首页 > 编程语言 > 详细

javascript设计模式与开发实践读书笔记之单例模式

时间:2019-08-20 02:10:40      阅读:43      评论:0      收藏:0      [点我收藏+]

标签:element   let   一是   模式   apply   ins   之前   命令   userinfo   

1.定义

保证一个类只有一个实例,并提供一个访问它的全局访问点。

2. 应用场景

当我们单击登录按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个按钮都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建。

3.实现单例模式

3.1方法

用一个变量来标志当前是否已经为某个类创建过对象,如果是,则是下一次获取该类的实例时,直接返回之前创建的对象。

var Singleton = function(){
    this.name = name;
    this.instance = null;
};

Singleton.prototype.getName = function(){
    alert(this.name);
};

Singleton.getInstance = function(name){
    if(!this.instance){
        this.instance = new Singleton(name);
    }
    return this.instance;
}

var a = Singleton.getIntance('sevn1');
var b = Singleton.getIntance('sevn2');

alert(a==b);//true

或者

var Singleton = function(){
    this.name = name;
    this.instance = null;
};

Singleton.prototype.getName = function(){
    alert(this.name);
};

Singleton.getInstance =( function(){
    var instance = null;
    return function(name){
        if(!this.instance){
           this.instance = new Singleton(name);
        }
        return this.instance;
    }
    
})();

通过Singleton.getInstance来获取Singleton类的唯一对象,这种方式相对简单,但有一个问题,就是增加了这个类的"不透明性",Singleton类的使用者必须知道这是一个单例模式。跟以往通过 new 的方式来获取对象不同,这里偏要使用Singleton.getInstance来获取对象。

3.2 透明的单例模式

实现一个透明的单例类,用户从这个类中创建对象的时候,可以像使用其他任何普通类一样。在下面的例子中,我们将使用CreateDiv单例类,它的作用是负责在页面中创建唯一的div节点,代码如下:

var CreateDiv = (function(){
    var instance;
    var CreateDiv = function(html){
        if(instance){
            return instance;
        }
        this.html = html;
        this.init();
        return instance = this;
    };
    CreateDiv.prototype.init = function(){
        var div = document.createElement('div');
        div.innerHtml = this.html;
        document.body.appendChild(div);
}
    return CreateDiv;
})();

var a = Singleton.CreateDiv('sevn1');
var b = Singleton.CreateDiv('sevn2');

alert(a===b);//true

在这段代码中,CreateDiv的构造函数实际上负责了两件事情。第一是创建对象和执行初始化init方法,第二是保证只有一个对象。

加入我们某天需要利用这个类,在页面中创建千千万万的div,即要让这个类从单例类变成一个普通的可产生多个实例的类,那我们必须改写CreateDiv构造函数,把控制创建唯一对象的那一段去掉,这种修改会给我们带来不必要的烦恼。

3.3用代理实现单例模式

首先在CreateDiv构造函数中,把负责管理单例模式的代码移除出去,使他成为一个普通的创建div的类:

var CreateDiv = function(html){
        this.html = html;
        this.init();
};
    CreateDiv.prototype.init = function(){
        var div = document.createElement('div');
        div.innerHtml = this.html;
        document.body.appendChild(div);
}

接下来引入代理类proxySingletonCreateDiv:

var  proxySingletonCreateDiv = ( function(){
    var instance = null;
    return function(name){
        if(!this.instance){
           this.instance = new Singleton(name);
        }
        return this.instance;
    }
    
})();

var a = new proxySingletonCreateDiv('sevn1');
var b = new proxySingletonCreateDiv('sevn2');

alert(a===b);//true

我们把负责管理单例的逻辑移到了代理类proxySingletonCreateDiv中。

3.4javascript中的单例模式

单例模式的核心:确保只有一个实例,并提供全局访问。

全局变量不是单例模式,但在javascript中,我们经常会把全局变量当成单例来使用。

var a = {};

当用这种方式创建对象a时,对象a确实是独一无二的。如果a变量被声明在全局作用域下,则我们可以在代码中的任何位置使用这个便令,全局变量提供给全局访问是理所当然的。

全局变量的问题:命名空间污染,javascript中的变量也很容易被不小心覆盖。

作为普通的开发者,我们有必要尽量减少全局变量的使用,即使需要,也要把它的污染降到最低。

以下几种方式可以相对降低全局变量带来的命名污染

  • 使用命名空间

    适当的使用命名空间,并不会杜绝全局变量,但可以减少全局变量的数量。

    最简单的方式是使用对象字面量的方式:

    var namespace1 = {
        a:function(){
            alert(1);
        },
        b:function(){
            alert(2);
        }
    }

    把a和b都定义为namesapce1的属性,这样就可以减少变量和全局变量打交道的机会。另外我们还可以动态的创建命名空间,

    var MyApp = {};
    MyApp.namespace = function(name){
      var parts = name.split('.');
        var current = Myapp;
        for(var i in parts){
            if(!current[parts[i]]){
                current[parts[i]] = {};
            }
            current = current[parts[i]] ;
        }
    };
    Myapp.namespace('event');
    Myapp.namespace('dom.style');
    
    console.dir(Myapp);
    

    上述代码等价于:

    var Myapp = {
      event:{},
        dom:{
            style:{}
        }
    };
  • 使用闭包封装私有变量

    把一些变量封装在闭包的内部,只暴露一些接口跟外界通信:

    var user = (function(){
      var _name = 'sven';
        var   _age = 29;
    
        return{
            getUserInfo:function(){
                return _name + "-"  + _age;
            }
        }
    })()

    用下划线来约定私有变量_name和 _age ,它们被封装在闭包产生的作用域中,外部是访问不到两个变量的,这就避免了对全局的命令污染。

3.5惰性单例

惰性单例指的是在需要的时候才创建对象实例。

3.6通用的惰性单例

管理单例的逻辑其实是一样的:用一个变量来标志是否创建过对象,如果是,则在下次直接返回这个已经创建好的对象:

var obj;
if(!obj){
    obj = ***;
}

将管理单例的逻辑从原来的代码中抽离出来,这些逻辑被封装在getSingle函数内部,创建对象的方法fn被当成参数动态传入getSingle函数:

var getSingle = function(fn){
    var result;
    return function(){
        return result || (result = fn.apply(this,argument));//判断result是否为空
};
}

result因为在闭包中不会被销毁。

javascript设计模式与开发实践读书笔记之单例模式

标签:element   let   一是   模式   apply   ins   之前   命令   userinfo   

原文:https://www.cnblogs.com/zhoujingguoguo/p/11380459.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号