一:单体模式简介:

  是什么:将代码组织为一个逻辑单元,这个单元中的代码通过单一的变量进行访问。只要单体对象存在一份实例,就可以确信自己的所有代码使用的是同样的全局资源。

  用途:1.用来划分命名空间,减少网页中全局变量的数目。

    2.在分支技术中用来封装浏览器之间的差异。

    3.单体对象创建的命名空间可以快速清除全局变量。

    4.增强模块性

  关于单体模式的好坏,等你看完所有的讲解之后再告诉你哦.......

二:单体结构:

1.最简单的单体就是一个对象字面量。

     var ProductTools={
findProduct: function(){
//.........
},
//其他类似的方法.....
} var resetProduct = $('rest-product-button');
var findProduct = $('find-product-button');

ProductTools中的方法不会被外面的所覆盖,它被装在自己创建的命名空间中。(金钟罩,铁布衫,哈哈)

接着可以把命名空间进行进一步的分割。为了避免与其他库代码冲突,可以定义一个用来包含自己所有代码的全局对象: 

     var GaintCrop = {};
GaintCrop.Common = {
//....拥有普通方法的单体,被用于所有的对象和方法。
}
GaintCrop.ErrorCodes = {
//....用来储存数据
}
GaintCrop.PageHandler = {
//....拥有特殊和私有页面方法的单体
}

2.用作特定网页专用代码的包装器的单体:

有些js代码用于多个页面,而有的只用于某个特定的网页,所以最好把这两种代码包装在自己的单体对象中。

接下来,举一个例子吧。常用的表单提交:

下面的单体会查找并劫持一个特定表单的提交:

     GaintCrop.RegPage = {
FORM_ID : 'reg-form',//要提交表单的ID
OUTPUT_ID : 'reg-results',//要显示提交成功后结果的元素的ID //....表单的处理方法....
handleSubmit: function(e){
e.preventDafault();//取消事件的默认动作 var data = {};
var inputs = GaintCrop.RegPage.formEl.getElementsByTagName('input'); //取出表单中input框输入的值
for(var i= 0, len = inputs.length; i < len; i++){
data[inputs[i].name] = inputs[i].value;
}
//把表单中的信息提交的服务器
GaintCrop.RegPage.sendRegistration(data);
},
sendRegistration: function(){
//发送请求到服务器(调用ajax),然后在成功函数里面调用
//......
},
displayResult: function(){
//显示服务器返回的data数据到页面中....
GaintCrop.RegPage.outputEl.innerHTML = response;
},
//初始化方法
init: function(){
//取出表单元素和要显示提交成功后结果的元素
GaintCrop.RegPage.formEl = $(GaintCrop.RegPage.FORM_ID);
GaintCrop.RegPage.outputEl = $(GaintCrop.RegPage.OUTPUT_ID); //劫持表单的提交
//参数:(dom对象,事件类型,触发函数)
addEvent(GaintCrop.RegPage.formEl, 'submit', GaintCrop.RegPage.handleSubmit)
}
}; //页面加载完成后调用 RegPage 的初始化方法。
addLoadEvent(GaintCrop.RegPage.init);

看到上面的代码是不是讲的很详细呢,是就点个头,表示一下赞同,真的是....

对于 GaintCrop 前面讲过了,在这里使用时它应该是已经作为一个空的对象字面量存在的(你存在....我存在...... - _ -)。为了以防万一可以添加如下代码:

     var GaintCrop = window.GaintCrop || {};

3.拥有私用成员的单体:

(1)用下划线表示

下面举一个例子:构造一个单体,干嘛用呢》....用来把string转换成数组

     GaintCrop.DataParse = {
//私有方法
_stripWhitespace: function(str){
return str.replace(/\s+/, '');//去掉空格
},
_stringSplit: function(str, delimiter){
return str.split(delimiter);//切割string,规则是delimiter
}, //公用方法
//stripWS 表示是否删除所有空格(一个布尔型的值)
stringToArray: function(str, delimiter, stripWS){
if(stripWS){
str = this._stripWhitespace(str);
}
var outputArray = this._stringSplit(str, delimiter);
return outputArray;
}
};

上面的两个方法作为私有方法提供给stringToArray方法使用。

仅仅是用下划线表示吗?......我去.........就是说带下划线就是私用的了 0.0 。当如果有一天你觉得某个带下划线的方法可以不用存在了,你就删了它,然后也不会对外面有影响,因为,一般也不会有人去调用你带下划线的方法,除非他S....B....  .真心不会有人这么调用。有的话,公司可以把它给辞掉了....(0.0有点严重,ha)

(2)使用闭包:

现在我们用一个在定义后立即执行的函数创建单体。

这个包装函数创建了一个可以用来添加真正的私用成员的闭包

     GaintCrop.DataParser = (function () {
//私有属性
var whitespaceRegex = /\s+/; //私有方法
function stripWhitespace(str){
return str.replace(whitespaceRegex, '');
}
function stringSplit(str, delimiter){
return str.split(delimiter);
} return {
//公有方法
stringToArray: function(str, delimiter, stripWS){
if(stripWS){
str = stripWhitespace(str);
}
var outputArray = stringSplit(str, delimiter);
return outputArray;
}
}
})();

GaintCrop.DataParser 获得的并不是一个函数,而是这个立即执行的方法返回的一个对象,这样返回的对象中的方法因为是在那个立即执行的函数中定义的,so......就可以调用所谓的私有方法和属性咯......这个闭包的概念不懂的去我前几节博客看一下吧....

4.惰性实例化:

什么是惰性实例化:这个吗>......前面讲了这么多...有一个共性,单体对象都是在脚本加载时被创建出来。对于资源密集型的或者配置开销大的单体,更合理的做法是将其实例化推迟到需要使用的时候。这种技术被称为惰性加载...lazy loading ,它最常用于那些必须加载大量数据的单体。而那些被用作命名空间、特定网页专用代码包装器或组织相关实用的方法的工具的单体最好还是立即实例化。

一个常规的单体转化成惰性的要分几步?(大象装冰箱分几步?....)

首先把单体的所有代码移到一个叫constructor的函数中:

         function constructor(){
//所有常规的单体的代码:
//私有方法和属性
var privateAttribute1 = false;
var privateAttribute2 = "123"; function privateMehtod1(){
//>....
}
function privateMehtod2(){
//>....
} return {
//公有属性和方法:
publicAttribute1: true;
publicAttribute2: 10;
publicMethod1: function(){
//....
};
publicMethod2: function(){
//....
}
}

这个方法外部不能访问,通过一个公用方法 getInstance 来访问:

     GaintCrop.Singleto = (function(){
var uniqueInstance;//用来判断单体是否实例化的私有属性 function constructor(){
//所有常规的单体的代码:
//.......
}
return {
getInstance: function(){
if(!uniqueInstance){ //如果单体没被实例话,就实例化单体
uniqueInstance = constructor();
}
return uniqueInstance;
}
}
})();

这样转换完后,要调用单体的公有方法,需要改变调用方式:GaintCrop.Singleto.getInstance().publicMethod1();

哎呀,调用个方法要写这么长。烦死.......(这就是惰性加载单体的缺点之一)。

 5.分支:

分支是一种用来把浏览器间的差异封装到运行期间进行设置的动态方法中的技术。(有点抽象吗?....看看下面的例子来理解吧)

举个例子,假如我们要创建一个返回XHR对象的方法,这种XHR对象在多数浏览器中石XMLHttpRequest类的实例,而在IE早期版本中则是某种ActiveX类的实例。这样一个方法通常会进行某种浏览器嗅探或者对象探测。如果不用分支技术,那么每次调用这个方法时,所有那些浏览器嗅探代码都要再次运行。要是这个方法的调用很频繁,这样做会严重缺乏效率。所有最好的办法是脚本加载时一次性地确定针对浏览器的代码。

用分支技术创建XHR对象:

     var simpleXhrFactory = (function () {
//三个分支:
var standard = {
createXhrObject: function(){
return new XMLHttpRequest();
}
};
var activeXNew = {
createXhrObject: function(){
return new ActiveXObject('Msxml2.XMLHTTP');
}
};
var activeXOld = {
createXhrObject: function(){
return new ActiveXObject('Microsoft.XMLHTTP');
}
}; var testObject;
try{
testObject = standard.createXhrObject();
return standard;
}
catch(e){
try{
testObject = activeXNew.createXhrObject();
return activeXNew;
}
catch(e){
try{
testObject = activeXOld.createXhrObject();
return activeXOld;
}
catch(e){
throw new Error('环境中未发现XHR对象....')
}
}
}
})();

这个单体可以用来生成XHR对象,使用这个API,只需要调用SimpleXhrFactory.createXhrObject() 就能得到适合特定的运行时环境的XHR对象。

这个单体创建了三个分支,通过一个变量testObject来测试是否是浏览器支持的XHR.

三:单体模式的利弊:

好处:

  1.组织作用:单体模式的主要好处在于它对代码的组织作用。把相关方法和属性组织在一个不会被多次实例化的单体中,可以使代码的调试和维护变得更轻松哦......

  2.节约内存:同第一条所讲,单体模式只会被实例化一次,节约内存。

  3.防止被误改:把方法包裹在单体中,可以防止它们被其他程序猿误改。

  单体模式的一些高级变体可以在开发后期用于对脚本进行优化,提高性能:

    使用惰性实例化技术,可以直到需要一个对象的时候才创建它,从而减少那些不需要它的用户承受的不必要的内存消耗(还可能包括带宽消耗)。

    分支技术可以用来创建高效的方法,不用管浏览器或者环境的兼容性。通过根据运行时的条件确定赋给单体变量的对象字面量,你可以创建出为特定环境量身定制的方法,这种方法不会在每次调用时都浪费时间去检查运行环境。

坏处:

  由于单体模式提供的是一种单点访问,所以它有可能导致模块间的强耦合。又因为这种强耦合导致它不利于单元测试。(你无法单独测试一个调用了来自单体的方法的类,只能把它和那个单体作为一个单元一起测试....)

  

JavaScript设计模式——单体模式的更多相关文章

  1. 读书笔记之 - javascript 设计模式 - 单体模式

    单体是一个用来划分命名空间,并将一批相关方法和属性组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次. 单体模式,就是将代码组织为一个逻辑单元,这个逻辑单元中的代码可以通过单一的变量进行访问 ...

  2. javascript设计模式-单体模式

    场景:假设有一个Girl(美女)实体,该实体拥有姓名.年龄两个属性,拥有显示姓名和洗澡两个方法,下面分步骤构造该实体. 1.用简单基本单体模式: var Girl1 = { name:"昭君 ...

  3. 设计模式-单体模式(C++)

    设计模式-单体模式 单体模式在使用非常方便,适合于单一的对象,例如全局对象的抽象使用. 需要注意的是单体模式不可继承 // 实现 Singleton.h #ifndef __SINGLETON_H__ ...

  4. js设计模式--单体模式

    GOF里的23种设计模式, 也是在软件开发中早就存在并反复使用的模式. 如果程序员没有明确意识到他使用过某些模式, 那么下次他也许会错过更合适的设计 (这段话来自<松本行弘的程序世界>). ...

  5. javascript 设计模式-----策略模式

    在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...

  6. JavaScript设计模式 - 迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  7. JavaScript设计模式 - 代理模式

    代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问 代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效 ...

  8. javascript中单体模式的实现

    单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对 ...

  9. 读书笔记之 - javascript 设计模式 - 代理模式

    代理(proxy)是一个对象,它可以用来控制对另一对象的访问.它与另外那个对象实现了同样的接口,并且会把任何方法调用传递给那个对象.另外那个对象通常称为本体.代理可以代替本体被实例化,并使其可被远程访 ...

随机推荐

  1. 1.kvm的基本搭建

    一.kvm简介 KVM 是指基于 Linux 内核的虚拟机(Kernel-based Virtual Machine). 2006 年 10 月,由以色列的Qumranet 组织开发的一种新的&quo ...

  2. Odoo误删除服务产品造成的错误解决办法

    在Odoo8.0中删除了产品中的服务,会造成工时单模块的安装失败,信息如下所示: ParseError: "null value in column "name" vio ...

  3. 完美解决:Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=6&arch=x

    如题: 原因:没有配置resolv.conf 解决方法: 到/etc目录下配置resolv.conf加入nameserver IP,如: nameserver 8.8.8.8nameserver 8. ...

  4. UIButton 的点击事件详解

    UIControlEventTouchDown 单点触摸按下事件:用户点触屏幕,或者又有新手指落下的时候. UIControlEventTouchDownRepeat 多点触摸按下事件,点触计数大于1 ...

  5. Oracle数据库对象题库

    一.    填空题 在用 create 语句创建基本表时,最初只是一个空的框架,用户可以使用insert命令把数据插入表中. 在基本表不需要时,可以使用 drop table 语句撤消.在一个基本表撤 ...

  6. ios 上下拉刷新

    UITableView:下拉刷新和上拉加载更多 - cDigger 时间 2013-11-24 02:00:00  博客园精华区 原文  http://www.cnblogs.com/lexingyu ...

  7. [Android ] linux命令英文缩写的含义(方便记忆)

    du -sh */ reference to : http://blog.chinaunix.net/uid-27164517-id-3299073.html linux常用命令的英文单词缩写 命令缩 ...

  8. October 10th 2016 Week 42nd Monday

    What makes life dreary is the want of motive. 没有了目标,生活便黯然无光. Motive and goal, are absolutely indispe ...

  9. 关于Linux环境变量

    查看全局变量:  printenv 查看单个环境变量的值可以用echo命令,必须在环境变量的名称前放一个$符号 如:

  10. DNS原理

    DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识. 本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读完此文后,你就能完全理解DNS. 一.D ...