JavaScript 设计模式之单例模式
2016-04-28 11:22
681 查看
一、单例模式概念解读
1.单例模式概念文字解读
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
2.单例模式概念拟物化解读
买房子要先确认是否有门,没有要联系开发商创建。其次,每一个门都有自己的归属,301归属小王,302归属小李,小王小李属于命名空间,但是一栋楼里有多个小王小李,这些全局命名空间里301只归属于一个小王,即,提供一个唯一的访问点来访问该对象。
![](https://images2015.cnblogs.com/blog/818082/201604/818082-20160428145059470-330507279.png)
二、单例模式的作用和注意事项
模式作用:
1.模块间通信。
2.系统中某个类的对象只能存在一个。
3.保护自己的属性和方法。
注意事项:
1.注意this 的使用(谁调用,指向谁)。
2.闭包容易造成内存泄漏,不需要的赶快删掉。
3.注意new 的成本。(继承)
三、单例模式的代码实战和总结
1.一个通俗的例子
![](https://images2015.cnblogs.com/blog/818082/201604/818082-20160428120944845-868773734.png)
2.平时开发的例子
1.单例模式概念文字解读
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
2.单例模式概念拟物化解读
买房子要先确认是否有门,没有要联系开发商创建。其次,每一个门都有自己的归属,301归属小王,302归属小李,小王小李属于命名空间,但是一栋楼里有多个小王小李,这些全局命名空间里301只归属于一个小王,即,提供一个唯一的访问点来访问该对象。
![](https://images2015.cnblogs.com/blog/818082/201604/818082-20160428145059470-330507279.png)
二、单例模式的作用和注意事项
模式作用:
1.模块间通信。
2.系统中某个类的对象只能存在一个。
3.保护自己的属性和方法。
注意事项:
1.注意this 的使用(谁调用,指向谁)。
2.闭包容易造成内存泄漏,不需要的赶快删掉。
3.注意new 的成本。(继承)
三、单例模式的代码实战和总结
1.一个通俗的例子
<script type="text/javascript"> //1.独立的对象,建立2个,一个xiaowang,一个xiaoli //2.让xiaoli和xiaowang 通过门铃进行通信 //3.先看一下xiaowang家有没有门,如果有门,直接通过门铃通迅(按didi),如果没有则建门 //4.两个单例之间开始通信 var xiaowang = (function(argument){ this.doorRing=message; }; var door; var info = { sengMessage:function(message){ if (!door) { door=new xiaowangjia(message); //这个单例用的时候才new ,注意new 的成本 }; return door; } }; return info; })(); var xiaoli = { callXiaowang:function(msg){ var _xw = xiaowang.sengMessage(msg); alert(_xw.doorRing); _xw = null; //用完了,要把xiaowangjia置成空。等待垃圾回收,闭包问题 } }; xiaoli.callXiaowang('didi'); //xiaoli 通过按didi发起通信请求 </script>
![](https://images2015.cnblogs.com/blog/818082/201604/818082-20160428120944845-868773734.png)
2.平时开发的例子
<script type="text/javascript"> //页面上有6个按钮:a,b,c,d,e,f //a,b,c => top 归属到top命名空间 //d,e,f => banner 归属到banner命名空间 var top={ init:function(){ this.render(); this.bind(); }, a:4, render:function(){ var me = this; me.btna=$('#a'); }, bind:function(){ var me = this; me.btna.click(function(){ //业务逻辑取出去 me.test(); }); }, test:function(){ a =5; } } var banner={ init:function(){ this.render(); this.bind(); }, a:4, render:function(){ var me = this; me.btna=$('#d'); }, bind:function(){ var me = this; me.btna.click(function(){ //业务逻辑取出去 me.test(); }); }, test:function(){ a =6; } } top.init(); banner.init(); //使用jQuery 绑定事件 $('#a').click(function(){ //执行逻辑 }); $('#b').click(function(){ //执行逻辑 }); $('#c').click(function(){ //执行逻辑 }); $('#d').click(function(){ //执行逻辑 }); $('#e').click(function(){ //执行逻辑 }); $('#f').click(function(){ //执行逻辑 }); </script>
相关文章推荐
- Javascript前台简单验证插件
- Javascript前台简单验证插件2
- 对js==和===的理解
- JavaScript 进阶学习 5 内置对象
- javascript中的toString()方法
- JSON详解
- javascript 正则表达式补充
- THREE.js概述
- js中this指向问题实例详解
- JS 中的 with 关键字
- JS实现的base64加密解密完整实例
- d3.js——绘制静态中国地图
- javascript 实现简单的div拖动
- [转] 考验你的JavaScript底细
- js 定时器运作原理实例
- tab选项卡切换效果(一)——滑过切换和点击切换
- IFRAME高度进行自适应 javascript脚本编写【JAVASCRIP】
- JSF环境搭建web.xml和faces-config.xml配置
- ajax 局部刷新,返回json字符串
- jsp获取请求路径