单例模式-3.透明的单例模式 

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>透明的单利模式</title>
    </head>

    <body>

    </body>
    <script type="text/javascript">
        //用户从这个类中创建对象的时候，可以像使用其他任何普通类一样
        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');
        console.log(a === b); //true

        /*为了把 instance 封装起来，我们使用了自执行的匿名函数和闭包，并且让这个匿名函数返回
         真正的 Singleton 构造方法，这增加了一些程序的复杂度，阅读起来也不是很舒服
         CreateDiv 的构造函数实际上负责了两件事情。第一是创建对象和执行初始
         化 init 方法，第二是保证只有一个对象。虽然我们目前还没有接触过“单一职责原则”的概念，
         但可以明确的是，这是一种不好的做法，至少这个构造函数看起来很奇怪
         假设我们某天需要利用这个类，在页面中创建千千万万的 div，即要让这个类从单例类变成
         一个普通的可产生多个实例的类，那我们必须得改写 CreateDiv 构造函数，把控制创建唯一对象
         的那一段去掉，这种修改会给我们带来不必要的烦恼
        */

        //用代理实现单利模式;解决上面的问题
        var CreateDiv2 = function(html) {
            this.html = html;
            this.init();
        }
        CreateDiv2.prototype.init = function() {
            var div = document.createElement('div');
            div.innerHTML = this.html;
            document.body.appendChild(div);
        };
        //引入代理类
        var ProxySingleCreateDiv = (function() {
            var instance;
            return function(html) {
                if(!instance) {
                    instance = new CreateDiv2(html);
                }
                return instance;
            }
        })()

        var a1 = new ProxySingleCreateDiv('seven1');
        var b1 = new ProxySingleCreateDiv('seven2');
        console.log(a1 === b1);
    </script>

</html>

 

posted @ 2017-07-03 13:35  流年之外天空蓝  阅读(293)  评论(0)    收藏  举报