JS单例模式在工作中的使用
为了尽可能的减少全局变量的污染,在写js的时候可以采用单例模式,形式如下:
比如有一个js叫demo.js,那么我们可以在js里这样写:
var demo = {}
这样做的目的是将整个js当成一个对象,这样暴露在外的全局变量就只有demo这一个命名,不像我们平常写直接写很多函数,这都是对全局空间的一种污染,一旦项目中别人也取了同样的名称,那么就容易出问题了。
function xxx1(){}
function xxx2(){}
function xxx3(){}
同时为了方便维护管理js,还可以对demo内部进行划分模块,可以按照页面划分,也可以按照具体功能模块划分。
比如按照页面划分的写法:
var demo = {
page1: {
setSlide:function(){
//这里去进行轮播图的相关设置
}
},
page2: {
setSlide:function(){
//这里去进行轮播图的相关设置
}
}
}
可以看到,如果单纯按照页面去划分,那么页面与页面的之间的js可以分离的很清楚,但是也有一个弊端,即如果两个甚至多个页面拥有相同的功能,那么会需要去调用其它页面的js,这样不是很利于维护。
所以我们还可以按照功能+页面混合模式来划分模块,例如:
var demo = {
// 将所有的公用功能抽离集成在一个模块里
base:{
setSlide: function(){
// do something
}
},
page1: {
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
}
},
page2: {
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
}
}
}
以上代码只是举个例子,我们可以进一步完善一下:
var demo = {
// 将所有的公用功能抽离集成在一个模块里
base:{
setSlide: function(){
// do something
}
},
page1: {
Init: function(){
this._setSlide().verify();
},
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
//还可以做其他事情
......
// 返回this,那么就能实现链式调用了
return this;
},
verify:function(){
//做些事情
......
}
},
page2: {
Init: function(){
this._setSlide();
},
_setSlide: function(){
// 直接调用通用方法
demo.base.setSlide();
//还可以做其他事情
}
}
}
可以看到,我们在每个页面模块里增加了一个Init方法,我们可以叫它页面初始化方法,它的作用就是集中调用其它方法,相当于这个页面的入口,这样我们只要看到这个方法就大概能知道我们调用了哪些方法了,而不需要在页面里去分别的调用。维护起来更方便些。
关于在工作中使用单例模式的方法就说到这了,有不足的地方欢迎大神指点,有不懂的地方欢迎留言。
JS单例模式在工作中的使用的更多相关文章
- 工作中使用seajs后的一些总结
工作中用seajs一段时间了,小小地总结一下. 使用seajs五部曲: 1.布置你项目的目录结构 2.设置seajs的config项,我一般是单独一个js文件--> seajs-config.j ...
- 工作中常用的js、jquery自定义扩展函数代码片段
仅记录一些我工作中常用的自定义js函数. 1.获取URL请求参数 //根据URL获取Id function GetQueryString(name) { var reg = new RegExp(&q ...
- [工作中的设计模式]单例模式singleton
一.模式解析: 单例模式是最简单和最常用的设计模式,面试的时候,不管新毕业的学生还是已经工作多年的筒子,对单例模式基本都能聊上两句.单例模式主要体现在如下方面: 1.类的构造函数私有化,保证外部不能直 ...
- 原生js(form)验证,可以借鉴下思路,应用到工作中
我在工作中时常使用form验证,在目前的公司做的表单验证用的angular的form组件,对于一个有追求的前端,或者应用在移动端写个form验证,引入angular或者jquery组件等验证,难免显得 ...
- 记录下工作中使用的pdf.js
在工作中遇到一个通过网页的形式浏览pdf文件以及图片的需求,图片简单,直接通过网页的形式打开这个图片的URL即可.而pdf这边,通过查询发现有一个名为pdf.js的神器. 简单介绍下,它可以在html ...
- JS 单例模式
<parctical common lisp>的作者曾说,如果你需要一种模式,那一定是哪里出了问题.他所说的问题是指因为语言的天生缺陷,不得不去寻求和总结一种通用的解决方案. 不管是弱类型 ...
- [工作中的设计模式]原型模式prototype
一.模式解析 提起prototype,最近看多了js相关的内容,第一印象首先是js的原型 var Person=function(name){ this.name=name; } Person.pro ...
- 浅谈js单例模式
单例模式就是在系统中保存一个实例,就是一个全局变量,在团队开发中,为了实现一些相似的功能,比如不同页面之间的表单验证,可能需求是不一样的,但是呢命名可能一样,这时就会产生冲突,这时候单例模式就能很好的 ...
- php单例模式在数据库连接中的使用
今天同事问到一个关于单例模式在php中是否有用的问题,我们知道,单例的目的是为了避免重复生产相同的对象,一般情况在数据库连接中,为了避免多次拿到相同数据库连接,使用到单例模式,我们来看一下单例模式数据 ...
随机推荐
- c++ 文件操作 重新命名 删除
教学内容: l 文件重命名rename l 文件删除remove 文件重命名rename int rename( const char *oldname, const char *newname ...
- jQuery学习-鼠标事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 11-[CSS]-标准文档流,display,浮动,清除浮动,overflow
1.标准文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 前端- html -总结
html概述 head标签 title 显示网站的标题 meta 提供有关页面的原信息 link 链接css资源文件.网站图标 style 定义内部样式表 script 链接脚本js文件 body标签 ...
- sqlyog 可视化查看数据库关系并创建外键
+ 一个架构设计器,把表拖进来即可查看数据库关系 如果要建立外键,需要在两个要被建立的外键之间进行操作(经过验证不需要都为主键),然后从用鼠标把子外键拖到父外键中,就可以关联上了. 参考: https ...
- IIS 配置网站
IIS 配置网站最常见的问题 1 文件夹权限问题 (C盘 windows下temp文件夹权限问题)2 版本问题 (框架版本问题如4.0 在2.0下运行,4.5在4.0下运行) 3如果是局域网,考虑动态 ...
- sqlmap简单中文说明
首先下载需要的文件,如果是windows环境直接到http://sqlmap.org/下载安装所需要的文件即可. 更新 svn checkout https://svn.sqlmap.org/sqlm ...
- 用C链表实现约瑟夫环问题
问题:设有n个人围成一个圆圈,现从第s个人开始报数,数到第m的人出列,然后从出列的下一个人重新开始报数,数到第m的人再次出列,如此反复,直到所有的人全部出列为止.对于任意给定的n.s.m,求按出列次序 ...
- 配置centos7来支持xshell远程访问和xftp传输文件
前提: 首先需要一台已装有centos7的电脑(虚拟机的配置这里不说明,这里用的是物理机) 背景: 在工作中访问linux的环境通常需要Xshell等终端软件,通过配置静态IP远程服务器进行管理开发. ...
- Revit开发小技巧——撤销操作
最近开发Revit命令需要限制某些操作,思路是监控用户操作,如果达到限制条件,将操作回退.思路有两种: 1.调用WindowsAPI,发送快捷命令Ctrl+Z. 2.通过Revit底层提供DLL找到回 ...