定义

  1. **是允许实例化一次的对象类，**<br /> 有时我们也用一个对象来规划一个命名空间

demo

不透明的

  2.      let Singleton = (function(){
  3.    // 确保单利引入
  4.    var instance = null;
  5.    class  CreateSingleton{
  6.        constructor(name){
  7.            this.name = name;
  8.            if(instance){
  9.                return instance;
  10.            }
  11.            instance = this;
  12.        }
  13.        getName() {
  14.            console.log(this.name)
  15.        }
  16.    }
  17.    return CreateSingleton;
  18. })();
  19. // 创建实例对象1
  20. let a = new Singleton('a');
  21. // 创建实例对象2
  22. let b = new Singleton('b');
  23. console.log(a.name);
  24. console.log(a === b);

透明的

  1. class  CreateSingleton{
  2.    constructor(name){
  3.        this.name = name;
  4.    }
  5.    getName() {
  6.        console.log(this.name)
  7.    }
  8. }
  9. let Singleton = (function () {
  10.    let instance = null;
  11.    return function (name) {
  12.        if(!instance){
  13.            instance = new CreateSingleton(name)
  14.        }
  15.        return instance
  16.    }
  17. })();

惰性单例模式

  1.  **只有当触发创建实例对象时，实例对象才会被创建。**

抽取单例

  1. function singleton (fn) {
  2.    let instance = null;
  3.    return function () {
  4.        // 可以用类的安全方法来使用方法调用
  5.        return instance || (instance = fn.apply(this,arguments))
  6.    }
  7. }

创建遮罩层

  1. let createMask = function(){
  2.    // 创建div元素
  3.    let mask = document.createElement('div');
  4.    // 设置样式
  5.    mask.style.position = 'fixed';
  6.    mask.style.top = '0';
  7.    mask.style.right = '0';
  8.    mask.style.bottom = '0';
  9.    mask.style.left = '0';
  10.    mask.style.opacity = 'o.75';
  11.    mask.style.backgroundColor = '#000';
  12.    mask.style.display = 'none';
  13.    mask.style.zIndex = '98';
  14.    document.body.appendChild(mask);
  15.    // 单击隐藏遮罩层
  16.    mask.onclick = function(){
  17.        this.style.display = 'none';
  18.    };
  19.    return mask;
  20. };

创建登陆窗口

  1. var createLogin = function() {
  2.    // 创建div元素
  3.    var login = document.createElement('div');
  4.    // 设置样式
  5.    login.style.position = 'fixed';
  6.    login.style.top = '50%';
  7.    login.style.left = '50%';
  8.    login.style.zIndex = '100';
  9.    login.style.display = 'none';
  10.    login.style.padding = '50px 80px';
  11.    login.style.backgroundColor = '#fff';
  12.    login.style.border = '1px solid #ccc';
  13.    login.style.borderRadius = '6px';
  14.    login.innerHTML = 'login it';
  15.    document.body.appendChild(login);
  16.    return login;
  17. };

设置触发事件

  1. document.getElementById('btn').onclick = function() {
  2.    var oMask = singleton(createMask)();
  3.    oMask.style.display = 'block';
  4.    var oLogin = singleton(createLogin)();
  5.    oLogin.style.display = 'block';
  6.    var w = parseInt(oLogin.clientWidth);
  7.    var h = parseInt(oLogin.clientHeight);
  8. };