• 单例模式


    单例模式

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

      要实现一个标准的单例模式并不复杂,无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象。

    1. 使用静态方法实现

        var Singleton = function (name) {
            this.name = name;
        };
        Singleton.prototype.getName = function () {
            alert(this.name);
        };
        //Singleton的静态方法
        Singleton.getInstance = (function () {
            var instance;
            //闭包
            return function (name) {
                //假如变量instance不是对象,则创建;否则直接返回对象
                if (!instance) {
                    instance = new Singleton(name);
                }
                return instance;
            }
        })();
        var a = Singleton.getInstance("xixi");
        var b = Singleton.getInstance("haha");
    
        alert(a === b);//ture
    

      我们通过Singleton.getInstance来获取Singleton类的唯一对象,这种方式相对简单,跟以往通过new XXX的方式来获取对象不同,这里偏得使用Singleton.getIntance来获取对象。

    2. 使用自定义函数实现

        var Singleton = function (name) {
            var instance = this;
            this.name = name;
            //重写函数,当第一次调用时被更新,从而使得再次调用时使用新的函数,新函数直接返回该对象
            Singleton = function () {
                return instance;
            };
        };
        var a = new Singleton("a");
        var b = new Singleton("b");
        alert(a === b);//true
    

      这种方法的实现秘诀就在重写函数,他的缺点在于会丢失所有初始定义时和重定义时添加到它里面的属性。

    3. 使用代理函数实现

        var Singleton = function (name) {
            this.name = name;
        };
        //代理函数
        var ProxySingleton = (function () {
            var instance;
            return function (name) {
                if (!instance) {
                    instance = new Singleton(name);
                }
                return instance;
            }
        })();
        var a = ProxySingleton("xixi");
        var b = ProxySingleton("haha");
        alert(a === b);//true
    

      前面提到的几种单例模式的实现,更多的是接近传统面向对象语言中的实现,单例对象从“类”中创建而来。在以类为中心的语言中,这是很自然的做法。比如在Java中,如果需要某个对象,就必须先定义一个类,对象总是从类中创建而来的。
      但JS其实是一门无类语言,也正因为如此,生搬单例模式的概念并无意义。在JS中创建对象的方法非常简单,既然我们只需要一个“唯一”的对象,为什么要为他先创建一个“类”呢?这无异于穿棉衣洗澡,传统的单例模式实现在JS中并不适用。
      单例模式的核心是确保只有一个实例,并提供全局访问
      全局变量不是单例模式,但在JS开发中,我们经常会把全局变量当成单例来使用,例如:

    var a = {};
    

      当用这种方式创建对象a时,对象a确实是独一无二的。如果a变量被声明在全局作用局下,则我们可以在代码中的任何位置使用这个变量,全局变量提供给全局访问是理所当然的。这样就满足了单例模式的两个条件。
      但是全局变量存在很多问题,他很容易造成命名空间污染,也很容易被不小心覆盖。
      以下几种方式可以相对降低全局变量带来的命名污染。

    1. 使用命名空间

      适当的使用命名空间,并不会杜绝全局变量,但可以减少全局变量的数量。
      最简单的方法是用对象字面量的方式:

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

      把a和b都定义为namespace1的属性,这样就可以减少变量和全局作用域打交道的机会。

    2.使用闭包封装私有变量

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

        var Yxz = (function () {
            //私有变量
            var __name = "SunXiao";
            //返回一个对象
            return {
                //闭包
                name: function (){
                   return __name;
                }
            }
        })();
        Yxz.name();//SunXiao
    

      变量__name被封装在闭包产生的作用域中,外部是访问不到这个变量的,这就避免了对全局的命名污染。

    4. 惰性单例

      惰性单例指的是在需要的时候才创建对象实例。实际上在第一个例子中就使用过这种技术,instance实例对象总是在调用Singleton.getInstance的时候才被创建,而不是在页面加载好的时候被创建。

    Singleton.getInstance = (function () {
        var instance;
        //闭包
        return function (name) {
            //假如变量instance不是对象,则创建;否则直接返回对象
            if (!instance) {
                instance = new Singleton(name);
            }
            return instance;
        }
    })();
    

      不过这是基于“类”的单例模式,前面说过,基于类的单例模式在JS中并不适用,下面我们以弹窗为例,介绍与全局变量结合实现惰性的单例。

    <body>
    <button id="btn">点我</button>
    <script>
        var createBtn = (function () {
            var div;
            return function () {
                if (!div) {
                    div = document.createElement('div');
                    div.innerHTML = "俺是弹窗";
                    document.body.appendChild(div);
                }
                return div;
            }
        })();
        document.getElementById("btn").onclick = function () {
            createBtn();
        }
    </script>
    </body>
    

    5. 通用的惰性单例

      如果我们下次需要创建页面中唯一的iframe或者script标签,就必须得如法炮制,把createBtn函数几乎照抄一遍:

        var createIframe = (function () {
            var iframe;
            return function () {
                if (!iframe) {
                    iframe = document.createElement('iframe');
                    iframe.innerHTML = "俺是弹窗";
                    document.body.appendChild(iframe);
                }
                return iframe;
            }
        })();
    

      我们需要把不变的部分隔离出来,管理单例的逻辑其实是完全可以抽象出来的,这个逻辑始终是一样的:用一个变量来标志是否创建过对象,如果是,则在下次直接返回这个已经创建好的对象:

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

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

        var getSingle = function (fn) {
            var result;
            return function () {
                return result || (result = fn.apply(this, arguments));
            }
        };
    

      接下来将用于创建对象的方法用参数fn的形式传入getSingle。之后再让getSingle返回一个新的函数,并且用一个变量result来保存fn的计算结果。result变量因为身在闭包中,所以不会被销毁。在将来的请求中,如果result已经被赋值,那么它将返回这个值。代码如下:

        var createBtn = function () {
            var div = document.createElement('div');
            div.innerHTML = "俺是弹窗";
            document.body.appendChild(div);
            return div;
        };
        var createSingleBtn = getSingle(createBtn);
        document.getElementById('btn').onclick = function () {
            createSingleBtn();
        }
    

      在这个例子中,我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里,这两个方法可以独立变化而互不影响,当它们连接在一起的时候,就完成了创建唯一实例对象的功能。


    参考书目:《JavaScript设计模式与开发实践》,《JavaScript模式》

    结束语:几个月没有(懒得)写博客了,为什么突然中断了,总得需要一个理由,我想想,当时的情景是这样的,我原来看书是看2遍的,因为之前学html与css的书普遍有些薄(比起JS权威指南这种大部头来说),第一遍能够很快就看过去,第二遍时就可以回过头来慢慢写博客巩固知识。这种学习的方式自我感觉还是不错的。等我拿起js书时,便隐约感觉自己恐怕不得坚持看第二遍了(就是懒),因为买的书多,光宠幸一本书(js高级程序设计)就花了我几乎一月时光,写博客那不是得要了我的老命,还不如看看其他书,反正都是讲js,看着新的就当学习,看到旧的就作回忆。就这样一本本的看,中间还不(懒得)打代码,几个月后一无所获,还把着学过的东西给忘了,我很伤心,于是,就有了今天的博客。

  • 相关阅读:
    List、Map、set的加载因子,默认初始容量和扩容增量
    spring事务处理
    根据url的属性名来取属性值赋值给js
    XStream JavaBean对象转换成XML!
    【转载:java】详解java中的注解(Annotation)
    Myeclipse修改jdk版本流程
    Bootstrap中文参考手册
    CSS3参考手册
    HTML 5 参考手册
    win7win8一键取得超级管理员权限
  • 原文地址:https://www.cnblogs.com/fxycm/p/4855490.html
Copyright © 2020-2023  润新知