js设计模式（1）—单例模式

现在的位置: 首页 > 综合 > 正文

RSS

js设计模式（1）—单例模式

2012年09月10日 ⁄ 综合 ⁄ 共 1972字 ⁄ 字号小中大 ⁄ 评论关闭

一直以来对单例模式的理解很凌乱，今天就整体了一下，希望能给用得到的朋友一点帮助。

0.前言

单例（singleton）对象在内存中只存在一份实例，一般用{}来呈现，{}里面有若干的属性和方法。借用该模式可以讲代码组织得更为一致，从而使其更容易阅读和维护。缺点是可能增强了代码之间的强耦合。

1.创建单例模式的方法

1.1 使用对象字面量，即{}

View Code

 1 var  singleton = {
 2  
 3         name: 'cnblogs',
 4 
 5         getName:function(){
 6 
 7                     return this.name;
 8         }
 9 
10 }

1.2 模块模式（module pattern），同时也可以借此创建私有变量，实现封装

View Code

 1 var singleton = (function(){
 2     //  private property and method
 3     var privateName = 'cnblog';
 4     function getName(){
 5         return alert(privateName);
 6     };    
 7     return {
 8         name:'public',
 9         getName2:function(){
10             getName();
11         }
12     }
13 })()

1.3 在使用时初始化（惰性实例化）

View Code

 1 var singleton = (function(){
 2    var instance;
 3    function init(){
 4     return {
 5         name:'cnblog',
 6         getName:function(){
 7             return this.name;
 8         }
 9     }
10    };
11    
12    return {
13         getInstance: function(){
14             if(!instance){
15                 instance = inti();
16             }
17             return instance;
18         }
19    }
20 })()
21 
22 使用:
23    singleton.getInstance().getName()

1.4 通过检测来创建单体模式

var singleton = function(){
     
       var single;
       return single || (single =new Date())

}()
var a = singleton();
var b = singleton();
a === b  ;   //true，说明是同一个实例

但是：
var a = new Date();
var b = new Date();
a === b  ; //  false，说明指向不同的实例

2.单体对象的用途

2.1 命名空间

在douglas的《js语言精粹》中，提高避免命名冲突的方法是模拟命名空间，而单例模式就可以做到这一点。

View Code

 1 var  nameSpace = {
 2       property: ****,
 3 
 4       method: function(){
 5              .......
 6      }
 7 }
 8 
 9 使用里面的方法：
10   nameSpace.property  或者 nameSpace.method().

2.2 分支

分支主要用于解决浏览器的差异。例如当使用Ajax的时候，首先需要创建一个XHR对象，众所周知IE和FF、chrome存在着差异，所以每创建一个XHR对象就需要探测浏览器的特性，造成浪费。

View Code

 1 var createXHRFactory = (function(){
 2     var standXHR = {
 3         createXHR:function(){
 4             return new XMLHttpRequest();
 5         }
 6     };
 7     var ieXHR = {
 8         createXHR:function(){
 9             return new ActiveXObject('microsoft.XMLHTTP');
10         }
11     };
12     var testObject;
13     try{
14         testObject = standXHR.createXHR();
15         return standXHR;
16     }catch(e){
17         testObject = ieXHR.createXHR();
18         return ieXHR;
19     } 
20 })()