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中是否有用的问题,我们知道,单例的目的是为了避免重复生产相同的对象,一般情况在数据库连接中,为了避免多次拿到相同数据库连接,使用到单例模式,我们来看一下单例模式数据 ...
随机推荐
- mfc 类
知识点 类的概念 类的相关术语 定义类 使用类 一.类的概念 简单的说类就是数据与函数综合体,它是用户自定义类型. 二.类的相关术语 类的实例称为对象. 类在定义中隐式地包含数据和操作函数,这种思想称 ...
- 11.7 NOIP总复习总结
好像要1A模板题.完败 下面主要是一波SB错误总结 最小生成树(忘了sort(QwQ)) // It is made by XZZ // Fei Fan Ya Xi Lie~~~ #include&l ...
- burpsuite 抓取https 证书问题
一定要按照步骤来,先导入burp初始证书到服务器,这时候初始证书是未验证的,然后导出为crt/cer文件(可能拼写错误,总之是正规证书后缀),再导入到机构. 要代理所有类型包括ssl的才能正常导入机构 ...
- vs2012调试时,抛出异常的等待时间很慢,原来是QQ电脑管家搞的鬼。
vs2012调试时,抛出异常的等待时间以前都正常,不知什么时候起变得很慢,就是出错以后要等30秒以上才会提示,一直找不到原因. 今天看了一下任务管理器,发现有个QQpcrTP进程(好像是,因为卸载了) ...
- 稳重商务风格教师求职简历免费word模板
30款稳重商务风格教师求职简历免费word模板,也可用于其他专业和职业,个人免费简历模板,个人简历表免费,个人简历表格. 声明:该简历模板仅用于个人欣赏使用,请勿用于商业用途,谢谢. 下载地址:百度网 ...
- Hacknet 玩后感
这款游戏的主题是黑客模拟.玩家需要帮助雇主搞定各种乱七八糟的需求. 你需要使用各种工具和各种linux命令行来获取对方电脑的Root权限.然后就是各种增删改查... 解密部分设计的太过简单,导致玩的时 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- gulp + angular + requirejs 简单学习
一.安装gulp(已经安装了node环境) npm install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...
- python初学者随笔Week2
一.集合 去重,把一个列表变成集合,自动去重 关系测试,测试两组数据的交集,并集,差集关系 集合是无序的 集合的操作: list_1 = [1,4,5,7,3,6,7,9] list_1 = set( ...
- 高可用OpenStack(Queen版)集群-11.Neutron计算节点
参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...