js设计模式学习-单例模式

昨天开始学习js里的设计模式，这里特别推荐一本书《JavaScript设计模式与开发实践》，这本书是腾讯前端大神写的，讲的非常好，有实际当中的应用场景，还有讲了怎样用，什么地儿用，这位森赛讲的很好。

但是在阅读当中呢有一些地方还不太明白（我比较菜），然后又了了汤姆大叔的"深入理解JavaScript"这个系列博客，其中大叔有提到设计模式，读起来比起前面提到这本书讲的更好理解一些。

下面贴出我的笔记和代码：

//单例模式
//一个类，只产生一个实例，而且可以全局访问


//不透明的单例模式。 因为用之前不知道它这个类是个单例
var Singleton = function(name) {
    this.name = name;
    this.instance = null;
};

Singleton.prototype.getName = function() {
    console.log('test');
};

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

var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');

//这时候你去拿b的name 还会显示sven1

//还可以这样写

var Singleton2 = function(name) {
    this.name = name;
};

Singleton2.prototype.getName = function() {
    console.log(this.name);
};
Singleton2.getInstance = (function() {
        var instance = null;
        return function  (name) {
            if (!instance) {
                instance = new Singleton2(name);
            }   
            return instance;
        }
})();    

//透明的单例.在页面中创建唯一的一个节点

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 CreateDiv2 = function(hmtl) {
    this.html = html;
    this.init();
};
CreateDiv2.prototype.init = function() {
  var div = document.createElement('div');
  div.innerHTML = this.html;
  document.body.appendChild(div);
};

var ProxySingletonCreateDiv = (function() {
    var instance;
    return function  (html) {
        // body...
        if (!instance) {
            instance = new CreateDiv2(html);
        }   
        return instance;
    }
})();

 //这样子搞就是跟方便一点 你可以用creatediv2这个类创建许多实例， 也可以可代理类结合
//搞出一个单例模式出来


//以上是传统的单例实现方法，基于类的，但是因为js是class-free类型    语言（虽然es6添加了class这个概念）
//所以在JS开发环境中具体实现的单例模式还不太一样

//最简单的，可以这样搞
var mySingleton = {
    property1: "something",
    property2: "something else",
    method1: function () {
        console.log('hello world');
    }
};

//复杂一些的，可以拓展功能的

var mySingleton = function () {

    /* 这里声明私有变量和方法 */
    var privateVariable = 'something private';

    function showPrivate() {
        console.log(privateVariable);
    }

    /* 公有变量和方法（可以访问私有变量和方法） */
    return {
        publicMethod: function () {
            showPrivate();
        },
        publicVar: 'the public can see this!'
    };
};

var single = mySingleton();
single.publicMethod();  // 输出 'something private'
console.log(single.publicVar); // 输出 'the public can see this!'



//下面是惰性单例（需要的时候，再创建对象）的实现
//一个悬浮登陆框




    
    


    登陆




//以上仍不是通用的惰性单例模式

//see? 我们抽出惰性单例通用的逻辑
var obj;
if ( !obj ){
obj = xxx;
}
//我们可以把它抽象成一个函数
//fn是创建对象的方法,result保存对象，因为它在闭包中 所以不会被销毁。
//getSingleton 这个方法来管理单例
var getSingleton = function(fn) {
var result;
return function  () {
    return function() {
        return result||(result = fn.apply(this, [arguments]));
    };
}
};

var createLoginLayer = function() {
    var div = document.createElement('div');
    div.innerHTML = '我是登录浮窗';
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
};
var createSingleLoginLayer = getSingle(createLoginLayer);
document.getElementById('loginBtn').onclick = function() {
    var loginLayer = createSingleLoginLayer();
    loginLayer.style.display = 'block';
};

以上就是单例的笔记与总结。