再起航,我的学习笔记之JavaScript设计模式10(单例模式)
2017-08-21 08:11
330 查看
单例模式
单例模式(Singleton) :又被称为单体模式,是只允许实例化一次的对象类。一个类有且仅有一个实例,并且自行实例化向整个系统提供。
命名空间
单例模式可能是JavaScript中我们最常见的一种模式了,这种模式经常为我们提供一个命名空间,比如我们经常使用jQuery。下面我们来看看具体的示例吧:
var MyQuery={ $:function(id){ return document.getElementById(id); }, css:function(id,key,value){ this.$(id).style[key]=value; } }
在实例中,我们创建了一个叫MyQuery对象,分别添加了两个方法一个用来获取指定id的元素,一个更具id修改指定元素的样式
现在我们测试一下
console.log(MyQuery.$('container')); MyQuery.css('container','backgroundColor','red');
代码库
其实在JavaScript中单例模式除了像我们现在这样定义一个命名空间外,还有就是可以通过单例模式来管理代码库的各个模块。我们来看一个简单的例子:
var functionLibrary={ checkLibrary:{ checkName:function(){console.log("检查名称")}, checkEmail:function(){console.log("检查邮箱")} }, imageHandle:{ cutImage:function(){console.log("剪切图片")}, compressImage:function(){console.log("压缩图片")} } }
我们大致简单的创建了一个小型方法库,在里面简单的添加了验证方法库,和图像处理库,我们调用起来也非常的方便。
functionLibrary.checkLibrary.checkEmail();//检查邮箱
管理静态变量
使用单例模式可以让我们在代码管理上如虎添翼,但是如果我们仅仅认为单例模式就只能做这些,那就太小看它了。单例模式还能帮我们管理 静态变量 ,我们知道javascript中没有面向对象语言中的static这类关键字,所以理论上我们定义的任何变量都是可以更改的,那么万一我们不小心覆盖了一个我们本不该改变的全局变量的值,那么可能又需要花费时间去调试找错误,所以在javascript中创建静态变量也显得尤为重要。
虽然javascript没有static关键字,但是它的灵活可以让我们模仿出静态变量的效果,下面我们来看具体的示例:
var StaticValue=(function(){ var staticValue={ staticNum:1 } return{ get:function(name){ return staticValue[name]?staticValue[name]:null; } } })();
我们通过闭包的方式实现了一个简单的静态变量效果,现在我们调用一下
var num=StaticValue.get('staticNum'); console.log(num);//1
现在我们如果没有特定的方法就无法更改StaticValue.get('staticNum')的值了,这样我们就简单的模仿出了静态变量的效果。
惰性单例
在单例模式中还有一种延迟创建的形式,我们称之为惰性单例,也可以叫惰性创建。有的时候,我们需要延迟创建我们的单例对象,这个时候,我们就可以用到它惰性载入单例
var LazySingle=(function(){ //单例实例引用 var instance=null; //单例 function Single(){ //定义私有属性和方法 return{ privateMethod:function(){}, privatePrototype:'1.0' } } //获取单例对象接口 return function(){ if(!instance){ instance=Single(); } //返回单例 return instance; } })();
我们测试一下
console.log(LazySingle().privatePrototype);//1.0
总结
单例模式有时也被称为单体模式,它是一个只允许实例化一次的对象类,在javascript中我们经常把单例模式作为命名空间对象来实现,通过单例模式,我们可以创建消息方法库把各个模块的代码仅仅有条的梳理在一起,我们还能通过单例模式模拟实现static效果。如果您想让您的系统里只存在一个对象,那么单例模式则是最佳的解决方案。
也谢谢大家看到这里:)如果你觉得我的分享还可以请点击推荐,分享给你的朋友让我们一起进步~
好了以上就是本次分享的全部内容,本次示例参考自JavaScript设计模式一书,让我们一点点积累一点点成长,希望对大家有所帮助。
欢迎转载,转载请注明作者,原文出处。
相关文章推荐
- 再起航,我的学习笔记之JavaScript设计模式13(装饰者模式)
- 再起航,我的学习笔记之JavaScript设计模式15(组合模式)
- 再起航,我的学习笔记之JavaScript设计模式21(命令模式)
- 再起航,我的学习笔记之JavaScript设计模式22(访问者模式)
- 再起航,我的学习笔记之JavaScript设计模式27(链模式)
- 再起航,我的学习笔记之JavaScript设计模式18(观察者模式)
- 再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)
- 再起航,我的学习笔记之JavaScript设计模式28(委托模式)
- 再起航,我的学习笔记之JavaScript设计模式09(原型模式)
- 再起航,我的学习笔记之JavaScript设计模式17(模板方法模式)
- 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)
- 再起航,我的学习笔记之JavaScript设计模式29(节流模式)
- 再起航,我的学习笔记之JavaScript设计模式18(观察者模式)
- 再起航,我的学习笔记之JavaScript设计模式19(状态模式)
- 再起航,我的学习笔记之JavaScript设计模式14(桥接模式)
- 再起航,我的学习笔记之JavaScript设计模式26(解释器模式)
- 设计模式学习笔记(10)——桥接模式
- 再起航,我的学习笔记之JavaScript设计模式16(享元模式)
- 再起航,我的学习笔记之JavaScript设计模式11(外观模式)
- 再起航,我的学习笔记之JavaScript设计模式12(适配器模式)