JavaScript 单体设计模式教程

一:什么是单体模式:

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

  用途: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、基本结构:

var Singleton = {
    attr1 : 1,
    attr2 : 'hello',
    method1 : function(){alert(this.attr2);},
    method2 : function(arg){}
}

1.1上例的方式,对象Singleton的所有成员是公开的,在执行到变量Singleton时,会加载(实例化)自身,即非惰性加载。
1.2method1中用this访问单体的其他成员会存在一些风险,因为method1的上下文不是总指向Singleton对象。
如,当方法绑定到事件监听器时,this指向dom元素而失效,这时会提示undefined,故最好使用单体对象的全名访问属性和方法。

2、闭包

实现私有成员的单体,亦称为模块模式(module pattem)

2.1闭包函数 返回的是一个字面量作为单体对象。在继承中返回的是一个构造函数,思路是一样的,利用闭包。
2.2单体模式非常适合使用闭包实现私有方法,因为单体只会实例化一次,没有每次实例化都需要一份私有成员占用内存的顾虑。

var Singleton = (function(){
  var attr = 1, 
  fn = function(){};
  return {                           //return的都是公有成员,其他私有
    method : function(){ fn(); },
    getAttr : function(){ return attr; }
  };
})();

2.3因为单体会被实例化一次,故构造函数中声明的所有成员值会被创建一次。
上例,关键字var定义了私有成员,返回了一个公开的接口method和getAttr。
今后,修改实现时只需修改私有成员,method和getAttr接口不变。

3、闭包实现私有成员的惰性实例化单体,惰性实例化(lazy Instantiation)/惰性加载

3.1前面提到的单体模式的实现 都是在脚本加载时即创建的。当一个单体对象需要加载大量数据时,在需要时再创建单体对象会更好。

3.2单体放在constructor()函数中,getInstance函数用于控制单体加载。

使用形式:MyNamespace.Singleton.getInstance().publicMethod1();

对于长的命名空间可以用别名,var MNS = MyNamespace.Singleton;  可使用别名代替this!
上述,用于需要大量数据的单体 直到需要时才实例化。对于命名空间、特定网页专用代码 和 实用的工具方法不使用。
缺点:代码复杂,不直观。

3、分支技术Branching:将浏览器之间的差异封装到动态方法,适用于解决浏览器之间的差异。

通过return (someCondition) ? objectA : objectB;3
缺点:分支中,objectA 和 objectB都被创建了,并保存在内存中了,但只用到一个。
需要在 计算时间 和 占用内存 两者中取舍。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索对象
, 实例
, 变量
, 代码
, 闭包
模式
单体程序设计模式、单体设计模式、javascript设计模式、javascript的设计模式、javascript设计模式书,以便于您获取更多的相关知识。

时间: 2024-09-23 13:42:42

JavaScript 单体设计模式教程的相关文章

JavaScript面向对象程序设计教程_javascript技巧

JavaScript中对象的定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.可以把对象想象成散列表,就是一组名值对(key:value),其中值可以是数据或函数,每个对象都是基于一个引用类型创建的. 理解对象 前面的博客里写过创建对象的方式有两种,一种是创建一个object的实例,另一种是使用对象字面量法: var person = new Object(); person.sex = man; person.name = bluce person.age = 58; person.

JavaScript核心参考教程--内置对象

博学,切问,近思--詹子知 (https://jameszhan.github.io) JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言.这个标准由 ECMA 组织发展和维护.ECMA-262 是正式的 JavaScript 标准.这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在

javascript search 入门教程

javascript search 入门教程 search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串. 语法 stringObject.search(regexp)参数 描述 regexp 该参数可以是需要在 stringObject 中检索的子串,也可以是需要检索的 RegExp 对象. 注释:要执行忽略大小写的检索,请追加标志 i.   返回值 stringObject 中第一个与 regexp 相匹配的子串的起始位置. 注释:如果没有找到任何匹配的子串,则

JavaScript 核心参考教程 内置对象_js面向对象

这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft).Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言,从 1996 年开始,已经出现在所有的 Netscape 和 Microsoft 浏览器中.ECMA-262 的开发始于 1996 年,在 1997 年 7 月,ECMA 会员大会采纳了它的首个版本. 本系列教程旨在向大家分享本人当年学习Javascript的笔记和心得.本系列教程预计分五个部分. 第

详解JavaScript实现设计模式中的适配器模式的方法_基础知识

有的时候在开发过程中,我们会发现,客户端需要的接口和提供的接口发生不兼容的问题.由于特殊的原因我们无法修改客户端接口.在这种情况下,我们需要适配现有接口和不兼容的类,这就要提到适配器模式.通过适配器,我们可以在不用修改旧代码的情况下也能使用它们,这就是适配器的能力. 适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 从表面上看,适配器模式很像外观模式.它们都要对别的对象进行包装并改变其呈现的接口.二者的差

Javascript oop设计模式 面向对象编程简单实例介绍_javascript技巧

Javascript oop设计模式 面向对象编程 最初我们写js代码的时候是这么写 function checkName(){ //验证姓名 } function checkEmail(){ //验证邮箱 } function checkPassword(){ //验证密码 } 这种方式会造成全局变量的严重污染,再过渡到 var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword:

JavaScript实现设计模式中的单例模式的一些技巧总结_javascript技巧

一.使用全局变量保存单例 这是最简单的实现方法 function Person(){ this.createTime=new Date(); } var instance=new Person(); function getInstance(){ return instance; } 加载该js时就创建一个Person对象,保存到instance全局变量中,每次使用都取这个对象.如果一次都没使用,那么创建的这个对象则浪费了,我们可以优化一下, var instance function getI

JavaScript Throw 使用教程

JavaScript Throw 使用教程 JavaScript Throw 的声明允许你创建一个例外. 范例 该扔声明 如何使用JavaScript Throw . <script type="text/javascript"> var x=prompt("Enter a number between 0 and 10:",""); try { if(x>10)   {   throw "Err1";  

JavaScript MVC设计模式(构造器、模块和原型)教程

JavaScript面向对象 JavaScript是一种无类语言,但可以使用函数来模拟,这就涉及到设计模式.模式是一种已经验证过的可复用的解决方案,可用于解决软件设计中遇到的常见的问题,通常将这些解决方案制作成模板来复用. 而JavaScript模拟类常用的方式是定义一个JavaScript函数,使用this来定义属性和方法,然后使用new关键字创建对象实例.如  代码如下 复制代码     function webSite(){     this.name="开源视窗";     t