jS设计模式二：单例模式

这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~若是以为不错，恳求star哈~

单例模式简述

概念：

单例模式思想在于保证一个特定类仅有一个实例，意味着当你第二次使用同一个类建立信对象时，应获得和第一次建立对象彻底相同。

特色： 

1. 能够来划分命名空间，从而清除全局变量所带来的风险。
2. 能够把代码组织的更为一体，便于阅读和维护。
3. 能够被实例化，且实例化一次。

单例模式的简单实现

var Singleton = function(name){
            this.name = name;
        };
        Singleton.prototype.getName = function(){
          return this.name;
        }
        // 获取实例对象
        var getInstance = (function() {
            var instance = null;
            return function(name) {
                if(!instance) {
                    instance = new Singleton(name);
                }
                return instance;
            }
        })();
        // 测试单例模式的实例
        var a = getInstance("aa");
        var b = getInstance("bb");
        console.log(b.getName()); // "aa"
        console.log(a === b);     // true
复制代码

如上代码，实现一个单例模式，无非就是使用一个变量来标识该类是否被实例化，若是未被实例化的话，那么咱们能够实例化一次，不然的话，直接返回已经被实例化的对象。

单例模式的运用

平常工做中，咱们常常须要实现一个遮罩层，来防止用户中断页面操做。所谓的遮罩层，就是一个大小跟窗口一致的半透明div层。咱们要求页面最多只能存在一个遮罩层，此时运用单例模式就再合适不过了。

如下是代码实现~~~

var createMask = (function(){
            var div;
            return function(){
                if(!div) {
                    div = document.createElement("div");
                    div.innerHTML = "遮罩层";
                    div.style.display = 'none';
                    document.body.appendChild(div);
                }
                return div;
            }
        })();
        document.querySelector("body").onclick = function(){
            var win = createMask();
            win.style.display = "block";
        }
复制代码

如上代码，虽然能够实现需求，可是不通用。若是业务又须要咱们实现单例模式建立弹窗效果，势必须要copy一份代码，因此咱们须要对单例模式进行封装。

单例模式的封装

var getInstance = function(fn) {
    var result;
    return function(){
        return result || (result = fn.call(this,arguments));
    }
};
复制代码

如上代码：咱们使用一个参数fn传递进去，若是有result这个实例的话，直接返回，不然的话，会去执行fn函数，并将结果保存到result中。

如今，无论咱们须要实例化多少个对象，都使用getInstance来实现。

如下是代码示例~~~

var createMask = function(){
            var div = document.createElement("div");
            div.innerHTML = "遮罩层";
            div.style.display = 'none';
            document.body.appendChild(div);
            return div;
        };
        // 建立iframe
        var createIframe = function(){
            var iframe = document.createElement("iframe");
            document.body.appendChild(iframe);
            return iframe;
        };
        // 获取实例的封装代码
        var getInstance = function(fn) {
            var result;
            return function(){
                return result || (result = fn.call(this,arguments));
            }
        };
        // 测试建立遮罩层
        var createSingleMask = getInstance(createMask);
        document.querySelector("body").onclick = function(){
            var win = createSingleMask();
            win.style.display = "block";
        };
        // 测试建立iframe
        var createSingleIframe = getInstance(createIframe);
        document.querySelector("body").onclick = function(){
            var win = createSingleIframe();
            win.src = "https://jiangxia.github.io/";
        };
复制代码

单例模式在咱们平时的应用中用的比较多的，至关于把咱们的代码封装在一个起来，只是暴露一个入口，从而避免所有变量的污染。