单例模式也称为单体模式,其中:

1,单体模式用于创建命名空间,将系列关联的属性和方法组织成一个逻辑单元,减少全局变量。
 逻辑单元中的代码通过单一的变量进行访问。

2,三个特点:
 ① 该类只有一个实例;
 ② 该类自行创建该实例,即在该类内部创建自身的实例对象;
 ③ 向整个系统公开这个实例接口

3,单体模式有四种基本形式:

第一种,最简单的单体,只被实例化一次    我简记为json对象

(1)基本结构

 var userInfo={//已经自行被实例化  其实是一json对象
name:"测试名称",
dept:"测试PD",
code:"测试PD001",
getName:function () {
return "测试"
}
};

(2)使用方法与json的使用方法一致:使用点 " . "的方式访问

alert(userInfo.getName())

单体模式用来划分命名空间,并将一群相关的属性和方法组织到一起的简单介绍:

 var  comm={};//一个空对象

    comm.userInfo={//空对象下的第一个命名空间
name:"命名空间1下的",
code:""
}
comm.funcInfo={//空对象下的第二个命名空间
funcName:"命名空间2下的",
code:""
}

总结:该种方式可以看出对象的变量值不是动态加载的,而且对象没有显示初始化,由此有了第二种单体模式。

第二种,具有局部变量的单体

要求:模拟一个使用ajax从数据库加载数据的过程

(1)简单模拟一下ajax过程

//模拟一个Ajax操作
function Ajax() {};//空对象
//静态函数 模拟作为从数据库取值 此处值写死的
Ajax.request=function (url,fn) {
//默认永远回调成功
if(true){
fn("测试值1","测试值2")
}
}

(2)在最简单的单体中出现了数据不是动态从数据库加载的,而且没有显示实例化对象,此处使用闭包原理解决上述问题

//使用闭包的原理解决:动态从数据库加载数据 ,显示实例化
var userInfo=(function () {
//(1)利用闭包使单体有自己的私有局部变量
var name="";
var code="";
//(2)利用ajax访问数据库取到数据
Ajax.request("url",function (n,c) {//由于模拟的ajax中只是简单传递参数,所以第一个参数可以任意
name=n;
code=c;
})
//(3)单体实现私有变量的赋值
return {
name:name,
code:code
}
})()

(3)使用该种方式的单体,不用实例化 可以直接返回一个单体 【因为使用userInfo时,直接return一个单体回来】

alert(userInfo.name);

总结:

(1)优点,灵活

(2)弊端:return 单体数据量比较大时,都需要从数据库取数据,每次加载都要执行,会影响程序性能。由于该种方式每次加载都要直接执行,return单体数据量大时会影响呈现的性能,于是有了第三种单体模式。

第三种,惰性单体 提供的解决方案为:调方法时才实例化单体,而不是加载时就执行。

于是在第二种的基础上进行修改为,

(1)模拟ajax从数据库加载数据不变

 //模拟一个Ajax操作
function Ajax() {}
//静态函数 模拟作为从数据库取值
Ajax.request=function (url,fn) {
//默认永远回调成功
if(true){
fn("测试值1","测试值2")
}
}

(2)动态从数据库加载数据 ,显示实例化,使用一个函数(Init())封装产生单体的函数,通过一个私有变量来返回函数(Init())

 //使用闭包的原理解决:动态从数据库加载数据 ,显示实例化
var UserInfo=(function () {
var userInfo="";//私有变量 function Init() {//在产生单体方式为包裹一层初始化函数
//利用闭包使单体有自己的私有局部变量
var name="";
var code="";
//利用ajax访问数据库取到数据
Ajax.request("url",function (n,c) {
name=n;
code=c;
})
//单体
return {
name:name,
code:code,
}
} return {//此时开始调用初始化函数实现单体的产生
getInstance:function () {
if(userInfo){//userInfo=""为false
return userInfo;
}else {
userInfo=Init();
return userInfo;
}
}
} })()

(3)使用   访问UserInfo对象里面的获取初始化获取对象的函数(getInstance())

   alert(UserInfo.getInstance().name);

总结:使用惰性单体实质上是通过对产生单体的函数进行再一次封装(使用函数封装),再在通过该类提供的唯一接口(getInstance()方法)访问初始化单体 的函数。

第四种,分支单体

简单的用处:做Ajax的时候根据不同的浏览器获得不同的XHR。(将浏览器之间的差异封装到动态方法,适用于解决浏览器之间的差异。)

比如下面一个简单的例子:在电脑不同分辨率的情况下初始化不一样的界面。(这里只是弹窗显示而已)

(1)获取电脑的分辨率

//得到机器的分辨率
var screenWidth=window.screen.width;//width
var screenHeight=window.screen.height;//height

(2)进行分支判断处理 ,将差异封装到动态方法中

  var portalInfo=(function () {
//单体
var $1280_1024={info:'1,2,3,5'}//单体1
var $1366_768={info:'4,2,1,2'}//单体2 //动态图选择浏览器的差异结果(这里是分辨率)
if(screenWidth==){
return $1280_1024;//返回单体进行初始化
}else if(screenWidth==){
return $1366_768;//返回单体进行初始化
}else {
throw new Error("请检查你当前的电脑分辨率")
}
})();

(3)使用 ,获取最终的结果

alert(portalInfo.info)//我的结果为4,2,1,2 这是由于我的电脑的分辨率为1366*768

总结一下,对于分支单体有一个缺点:分支中,单体1和单体2都被创建了,并保存在内存中了,但只用到一个。需要在 计算时间 和 占用内存 两者中取舍。

JavaScript设模式---单例模式的更多相关文章

  1. JavaScript严谨模式(Strict Mode)

    下面的内容翻译自It’s time to start using JavaScript strict mode,作者Nicholas C.Zakas参与了YUI框架的开发,并撰写了多本前端技术书籍,在 ...

  2. Javascript编程模式(JavaScript Programming Patterns)Part 1.(初级篇)

    JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript librar ...

  3. JavaScript中的单例模式

    单例模式 在JavaScript中,单例(Singleton)模式是最基本又最有用的模式之一.这种模式提供了一种将代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一的变量进行访问.确保单例 ...

  4. Javascript 严格模式 strict mode(转)

    一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. ...

  5. JavaScript组合模式---引入

    首先:使用一个例子来引入组合模式,需求为(1)有一个学校有2个班(一班,二班)(2)每个班级分2个小组(一班一组,一班二组,二班一组,二班二组)(3)学校计算机教室有限,每一个小组分着来上课 然后:根 ...

  6. JavaScript设计模式,单例模式!

    单例设计模式:保证一个类仅有一个实例,并且提供一个访问它的全局访问点.有些对象只需要一个,这时可用单例模式. 传统的单例模式 和new 创建对象的调用不一样 调用者要调用xxx.getInstance ...

  7. javascript运行模式:并发模型 与Event Loop

    看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日 ...

  8. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...

  9. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

随机推荐

  1. java_Ninja实战过程

    使用Ninja马上两年了,之前多多少少的都是跟着项目模仿着写,今年上半年准备从一个小项目开始从始至终走一遍; 首先官网:http://www.ninjaframework.org; github: h ...

  2. 分布式文件存储——GlusterFS

    一.概论 1.简介 GlusterFS (Gluster File System) 是一个开源的分布式文件系统,主要由 Z RESEARCH 公司负责开发. GlusterFS 是 Scale-Out ...

  3. CSS选择器(一)

    一.CSS 元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p.h1.em.a,甚至可 ...

  4. iOS 8以后 定位手动授权问题

    ios8以后 都是手动授权定位权限 不过不处理这块 在ios8以后的系统就会默认永不授权 即关闭了定位权限 处理办法如下 .导入框架头文件 #import <CoreLocation/CoreL ...

  5. Map集合按照value和key进行排序

    最近由于特殊的业务需求,需要做相关数据排序,下面就贴出其中的将map集合中按照value或者key进行排序的代码,后面再具体详说. /** * map 集合排序 * @param map * @ret ...

  6. Delphi UniDAC 通过http协议连接数据库的设置

    Connection through HTTP tunnel(using http protocol) Sometimes client machines are shielded by a fire ...

  7. Netty使用LineBasedFrameDecoder解决TCP粘包/拆包

    TCP粘包/拆包 TCP是个”流”协议,所谓流,就是没有界限的一串数据.TCP底层并不了解上层业务数据的具体含义,它会根据TCP缓冲区的实际情况进行包的划分,所以在业务上认为,一个完整的包可能会被TC ...

  8. 大话设计模式--代理模式 proxy

    1. 代理模式: 为其他对象提供一种代理以控制这个对象的访问. 代理模式使用场合: a. 远程代理, 为一个对象在不同的地址空间提供局部代理,隐藏一个对象存在于不同地址空间的事实.如.net中WebS ...

  9. JAVA- 数据库连接池原理

    第一次Java程序要在MySQL中执行一条语句,那么就必须建立一个Connection对象,代表了与MySQL数据库的连接通过直接发送你要执行的SQL语句之后,就会调用Connection.close ...

  10. js 判断滚动条的滚动方向

    以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ ...