JavaScript设计模式----单例模式

selfimpr 发布于2019-08-21 10:55 / 1592人阅读

摘要：不符合设计模式中的单一职责的概念。引入代理实现单例模式引入代理实现单例模式的特点我们负责管理单例的逻辑移到了代理类中。的单例模式对比在以上的代码中实现的单例模式都混入了传统面向对象语言的特点。

声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记

1.单例模式的特点和定义

</>复制代码 
保证一个类仅有一个实例，并且提供一个访问它的全局访问点。

2.传统面向对象语言的单例模式 2.1传统语言描述的单例模式JavaScript实现

</>复制代码 
var Singleton = function(name) {
    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.getInstance("seven1");
var b = Singleton.getInstance("seven2");

或者使用闭包的形式创建单例模式,同时符合惰性单例的特性

</>复制代码 
var Singleton = function(name) {
    this.name = name;
};
Singleton.prototype.getName = function() {
    alert(this.name);
};
//利用闭包的特性创建单例,同时符合惰性单例的特性
Singleton.getInstance = (function(name) {
    var instance;
    return function(name){
        if (!instance) {
            instance = new Singleton(name);
        }
    }
})();
var a = Singleton.getInstance("seven1");
var b = Singleton.getInstance("seven2");
console.log(a===b);   //true

2.2透明的单例模式：

</>复制代码 
//反面的单例模式的例子
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 = new CreateDiv("seven1");
var b = new CreateDiv("seven2");

这样编写单例模式的缺点：

为了把instance封装起来，我们使用了自执行的匿名函数和闭包，并且让这个匿名函数返回真正的Singleton构造方法，这增加了一些程序的复杂度。

CreateDiv的构造函数负责了两件事情。1.创建对像和执行初始化init方法，第二是保证只有一个对象。不符合设计模式中的单一职责的概念。

2.3引入代理实现单例模式

</>复制代码 
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);
}
var ProxySingletonCreateDiv = (function() {
    var instance;
    return function(html) {
        if (!instance) {
            instance = new CreateDiv(html);
        }
        return instance;
    }
})();
var a = new ProxySingletonCreateDiv("seven1");
var b = new ProxySingletonCreateDiv("seven2");

引入代理实现单例模式的特点：

我们负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中。这样一来，CreateDiv就变成了一个普通的类，他跟ProxySingletonCreateDiv组合起来可以达到单例模式的效果。

3.JavaScript的单例模式对比

在以上的代码中实现的单例模式都混入了传统面向对象语言的特点。而没有利用JavaScript这们语言的特点来实现一个单例模式。

3.1惰性单例的例子

概念描述：

</>复制代码 
惰性单例指的是在需要的时候才创建对象的实例。惰性单例是单例模式的重点。

</>复制代码 
var createLoginLayer=(function(){
    var div;
    return function(){
        if(!div){
            div=document.createElement("div");
            //创建一个登录框
        }
        return div;
    }
})();
document.getElementById("loginBtn").onclick=function(){
    var loginLayer=createLoginLayer();
    loginLayer.style.display="block";
};

代码解析：
这里的对惰性单例的实现主要是只有单例了网页上的登录按钮，才会去创建，登录框的dom节点，并且只是创建一次。

3.2通用的单例模式例子

根据3.1的代码示例，我们的单例对像，但是并不是通用的，比如我们要创建的不是div而是iframe，那要怎么办呢？

</>复制代码 
//获取单例
var getSingle = function(fn){
    var result;
    return function (){
        return result || (result=fn.apply(this,arguments));
    };
};
//创建div登录框
var createLoginLayer=function (){
    var div= document.createElement("div");
    div.innerHTML="我是登录框";
    document.body.appendChild(div);
    return div;
};
//创建iframe的dom节点
var createIframe=function(){
    //创建irame节点的代码
}
var createSingleLoginLayer = getSingle(createLoginLayer);
var createSingleIframe=getSingle(createIframe);
var loginLayer1 = createSingleLoginLayer();
var loginLayer2 = createSingleLoginLayer();
var iframe1=createSingleIframe();
var iframe2=createSingleIframe();
console.log(loginLayer1 === loginLayer2);

通用的单例创建的例子就是通过封装一个getSingle需要实现单例模式的对象。而且只是会只创建一次。因为使用了闭包的原因通过getSingle创建的result会在内存中一直存在不会销毁（除非页面关闭，或者手动释放）。

总结：

单例模式是一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对像，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。

GPU云服务器云服务器单例模式单例模式实现单例模式总结 pdo单例模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86420.html

JavaScript设计模式-第一部分：单例模式、组合模式和外观模式

摘要：但是，这并不是采用单例的唯一原因。使用命名空间单例模式也被称为模块设计模式。函数内部声明了一些局部函数和或变量。紧随函数声明放置即可立即执行外部函数，并将所得的对象文字费赔给变量。 JavaScript设计模式-第一部分：单例模式、组合模式和外观模式设计模式是一些可靠的编程方式，有助于保证代码更加易于维护、扩展及分离，所有设计模式在创建大型JavaScript应用程序时均不可或缺单...

betacat 2019-08-20 13:38 评论0 收藏0
【JavaScript设计模式】单例模式

摘要：此时我们创建的对象内保存静态变量通过取值器访问，最后将这个对象作为一个单例放在全局空间里面作为静态变量单例对象供他人使用。单例模式又被称为单体模式，是只允许实例化一次的对象类。有时我们也用一个对象来规划一个命名空间，井井有条的管理对象上面的属性和方法。传统的面向对象语言中单例模式的实现，均是单例对象从类中创建而来，在以类为中心的语言中，这是很常见的做法。如果需要某个对象，就必须先...

zhaot 2019-08-21 18:36 评论0 收藏0
JavaScript 设计模式（一）：单例模式

摘要：停更许久，近期计划更新设计模式系列。单例模式是创建型设计模式的一种。虽然它不是正规的单例模式，但不可否认确实具备类单例模式的特点。适用场景单例模式的特点，意图解决维护一个全局实例对象。停更许久，近期计划更新：设计模式系列。 showImg(https://segmentfault.com/img/bVbt7uw?w=800&h=600); 单例模式：限制类实例化次数只能一次，一个类只...

xialong 2019-08-23 18:13 评论0 收藏0
JavaScript设计模式与开发实践 | 04 - 单例模式

摘要：观察构造函数的代码，该构造函数实际上负责了两件事情第一是创建对象和执行初始化方法，第二是保证只有一个对象。惰性单例在实际开发中非常有用，是单例模式的重点。单例模式单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器的window对象等。例如，当我们点击登录按钮时，页面会弹出一...

awkj 2019-08-21 10:48 评论0 收藏0
再遇设计模式之JavaScript篇

摘要：在面向对象的语言中，比如，等，单例模式通常是定义类时将构造函数设为，保证对象不能在外部被出来，同时给类定义一个静态的方法，用来获取或者创建这个唯一的实例。万事开头难，作为正经历菜鸟赛季的前端player，已经忘记第一次告诉自己要写一些东西出来是多久以的事情了。。。如果，你也和我一样，那就像我一样，从现在开始，从看到这篇文章开始，打开电脑，敲下你的第一篇文章（或者任何形式的文字）吧。 ...

Clect 2019-08-20 19:09 评论0 收藏0