JavaScript设计模式（一）单例模式

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

1.一个基本的单例模式

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

以上代码实现了一个简单的单例模式，但通过该方式创建的单例模式对使用者来说，并不“透明”。因为使用者首先需要只改该类是一个单例类，且需要使用特定的方法getInstance来获取单例。

2.透明的单例模式

let CreateDiv = (function(){
    let instance;
    let CreateDiv = function( html ) {
        if(instance){
            return instance;        
        }    
        this.html = html;
        this.init();
        return instance = this;
    }
    CreateDiv.prototype.init = function(){
        let div = document.createElement('div');
        div.innerHTML = this.html;
        document.body.appendChild(div);
    }
    return CreateDiv;
})();
let a = new CreatDiv('test1');
let b = new CreateDiv('test2');
console.log(a === b);  //true

通过以上代码，我们实现了一个透明的单例类的编写，但是为了将intance封装起来，分别运用了自执行匿名函数和闭包，并且返回了CreateDiv真正的构造方法，这增加了程序的复杂度和阅读难度，且构造函数同时负责了对象的初始化和保证对象唯一两件事情，不满足“单一职责原则”。

3.基于代理的单例模式

let CreateDiv = function (html) {
  this.html = html;
  this.init();
};
CreateDiv.prototype.init = function () {
  let div = document.createElement('div');
  div.innerHTML = this.html;
  document.body.appendChild(div);
}

let ProxySingletonCreateDiv = (function () {
  let instance;
  return function (html) {
    if (!instance) {
      instance = new CreateDiv(html);
    }
    return instance;
  }
})();

let a = new ProxySingletonCreateDiv('testa');
let b = new ProxySingletonCreateDiv('textb');
console.log( a === b)  //true

以上代码通过引入代理类的方式，完成了一个单例模式的编写，将管理单例的逻辑转移到代理类中，CreateDiv类只需要完成创建职责，将两者结合起来，即实现了一个单例模式的效果。

4.JavaScript中的单例模式

在JavaScript中，通常会将全局变量作为单例模式使用，但使用该种方式存在很多问题，比如变量污染。如果需要使用的话，可以使用以下几种方式降低变量污染的影响。

（1）使用命名空间

let namespace = {
  name: 'username',
  func: () => {
    console.log(1);
  }
}

将name和func定义为namespace内的属性，这样就可以将变量和全局作用域隔离开来。

（2）使用闭包

let user = (function () {
  let name = 'username', age = 18;
  return {
    getUserInfo: function () {
      return name + '-' + age;
    }
  }
})();

使用闭包将变量封装在闭包的内部，通过暴露一些接口跟外界通信。

5.惰性单例

不在页面加载时创建对象，而是当对象需要使用时才创建

let createObj = (function () {
  let obj;
  return function () {
    if (!obj) {
      obj.name = 'username';
      obj.age = 18;
    }
    return obj;
  }
})();

function func() {
  let obj = new createObj();
}

但相应的，以上代码仍然不满足“单一职责原则”职责，且不具有通用性，将其改为以下形式：

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

let createObj = getSingle(function () {
  let obj;
  obj.name = 'username';
  obj.age = 18;
  return obj;
})

function func() {
  let obj = new createObj();
}

以上代码将创建对象的职责和管理单例的职责分别放置在两个方法里，这两个方法各自独立且互不影响，当将它们结合在一起时，就完成了创建唯一单例对象的功能。