再起航,我的学习笔记之JavaScript设计模式10(单例模式)
单例模式
单例模式(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设计模式10(单例模式)的更多相关文章
- 再起航,我的学习笔记之JavaScript设计模式02
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 我们 ...
- 再起航,我的学习笔记之JavaScript设计模式01
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 在通 ...
- 再起航,我的学习笔记之JavaScript设计模式03
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上一 ...
- 再起航,我的学习笔记之JavaScript设计模式04
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 上回 ...
- 再起航,我的学习笔记之JavaScript设计模式05(简单工程模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航,我的学习笔记之JavaScript设计模式06(工厂方法模式)
上一次已经给大家介绍了简单工厂模式,相信大家对创建型设计模式有了初步的了解,本次我将给大家介绍的是工厂方法模式. 工厂方法模式 工厂方法模式(Factory Method):通过对产品类的抽象使其创建 ...
- 再起航,我的学习笔记之JavaScript设计模式05(简单工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
- 再起航,我的学习笔记之JavaScript设计模式06(抽象工厂模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前两 ...
- 再起航,我的学习笔记之JavaScript设计模式08(建造者模式)
我的学习笔记是根据我的学习情况来定期更新的,预计2-3天更新一章,主要是给大家分享一下,我所学到的知识,如果有什么错误请在评论中指点出来,我一定虚心接受,那么废话不多说开始我们今天的学习分享吧! 前几 ...
随机推荐
- SDP
SDP语法 一个SDP描述含有会话级信息和媒体级信息.会话级信息应用于整个会话.例如:它能成为会话始发者或者会话的名字.媒体级信息作用于特殊的媒体流.例如:它能作为一个编码器给音频流编码或者是给视频流 ...
- Python查看MQ队列深度
分享一段代码,很简单但是也很实用. #!/usr/bin/python #-*- coding:gb18030 -*- ''' Usage: mq.py [Qmgr] *get the queues' ...
- href="#" 的坑
第一次发博客, 也不讲究样式. 只是单纯的说一下踩过的坑,方便后人避坑吧 之前做项目的时候,碰到一个非常奇葩的问题. 就是在jqgrid中写了了一个简单的方法 {name:'已经存在的列名称', la ...
- elasticsearch REST API方式批量插入数据
elasticsearch REST API方式批量插入数据 1:ES的服务地址 http://127.0.0.1:9600/_bulk 2:请求的数据体,注意数据的最后一行记得加换行 { &quo ...
- select默认选中项颜色为灰色,选择后变为黑色(js实现)
<script> var unSelected = "#999"; var selected = "#333"; $(function () { $ ...
- HTML中的行内元素和框元素详解
定义 传统的块级元素定义中只是说明了在文档流中形成了一个块,在前后加换行,这里有些笼统. 其实框元素是指宏观上的框元素,它包括3种类型:1.本身就是块级元素 2.dispaly被设置为类block 3 ...
- ibatis 架构
从结构图中我们能够看出来ibatis框架中的几个关键的结构: 1. SqlMapConfig.xml 2. SqlMap.xml 3. ParameterObject 4. ...
- Django中ORM模型总结(一)[概述,查询语句]
理解ORM框架 概述 O:(objects)->类和对象. R:(Relation)->关系,关系数据库中的表格. M:(Mapping)->映射. 作用: 可以通过类和类对象就可以 ...
- Entity Framework Core 执行SQL语句和存储过程
无论ORM有多么强大,总会出现一些特殊的情况,它无法满足我们的要求.在这篇文章中,我们介绍几种执行SQL的方法. 表结构 在具体内容开始之前,我们先简单说明一下要使用的表结构. public clas ...
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了.今天呢.主要是跟小白讲一下 ...