js设计模式--单例模式

头像
普通程序员
    阅读 6 分钟
    13

    前言

    本系列文章主要根据《JavaScript设计模式与开发实践》整理而来，其中会加入了一些自己的思考。希望对大家有所帮助。

    文章系列

    js设计模式--单例模式

    js设计模式--策略模式

    js设计模式--代理模式

    概念

    单例模式的定义是:保证一个类仅有一个实例，并提供一个访问它的全局访问点。

    UML类图

    clipboard.png

    场景

    单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏 览器中的 window 对象等。

    在 JavaScript 开发中，单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少 次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。

    优缺点

    优点：创建对象和管理单例的职责被分布在两个不同的方法中

    实现

    1. 我们的第一个单例

    
var instance = null
var getInstance = function(arg) {
  if (!instance) {
    instance = arg
  }
  return instance
}

var a = getInstance('a')
var b = getInstance('b')
console.log(a===b)

    这种定义一个全局变量的方式非常不优雅，也不好复用代码

    2. 利用闭包实现单例

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

Singleton.getInstance = (function(){
  var instance = null;
  return function( name ){
    if ( !instance ){
      instance = new Singleton( name );
    }
    return instance;
  }
})();
var a = Singleton.getInstance('a')
var b = Singleton.getInstance('b')
console.log(a===b)

    有些同学可能对闭包不大理解，下面用函数实现一下

    3. 利用函数实现单例

    
function Singleton(name) {
  this.name = name
  this.instance = null
}

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

var a = Singleton.getInstance('a')
var b = Singleton.getInstance('b')
console.log(a===b)

    2，3这两种方式也有缺点，就是我们必须调用getInstance来创建对象，一般我们创建对象都是利用new操作符

    4. 透明的单例模式

    var Singleton = (function() {
  var instance
  Singleton = function(name) {
    if (instance) return instance
    this.name = name
    return instance = this
  }
  return Singleton
})()

var a = new Singleton('a')
var b = new Singleton('b')
console.log(a===b)

    这中方法也有点缺点：不符合单一职责原则，这个对象其实负责了两个功能：单例和创建对象

    下面我们分离这两个职责

    5. 利用代理实现单例

    var People = function(name) {
  this.name = name
}

var Singleton = (function() {
  var instance
  Singleton = function(name) {
    if (instance) return instance
    return instance = new People(name)
  }
  return Singleton
})()

var a = new Singleton('a')
var b = new Singleton('b')
console.log(a===b)

    这中方法也有点缺点：代码不能复用。如果我们有另外一个对象也要利用单例模式，那我们不得不写重复的代码

    6. 提供通用的单例

    
var People = function(name) {
  this.name = name
}

var Singleton = function(Obj) {
  var instance
  Singleton = function() {
    if (instance) return instance
    return instance = new Obj(arguments)
  }
  return Singleton
}

var peopleSingleton = Singleton(People)

var a = new peopleSingleton('a')
var b = new peopleSingleton('b')
console.log(a===b)

    到这里已经比较完美了，等等这只是es5的写法，下面我们用es6来实现一下

    7. es6单例模式

    class People {
    constructor(name) {
        if (typeof People.instance === 'object') {
            return People.instance;
        }
        People.instance = this;
        this.name = name
        return this;
    }
}
var a = new People('a')
var b = new People('b')
console.log(a===b)

    比较以上几种实现

    1. 用全局变量的第1种方法，应该摒弃
    2. 用闭包实现的第2种方式，instance 实例对象总是在我们调用 Singleton.getInstance 的时候才被创建，应该摒弃
    3. 其他方式都是惰性单例（在需要时才创建）

    js的特殊性

    我们都知道：JavaScript 其实是一门无类(class-free)语言，，生搬单例模式的概念并无意义。

    单例模式的核心是确保只有一个实例，并提供全局访问。

    我们可以用一下几种方式来另类实现

    1. 全局变量

    比如var a = {},这时全局就只有一个a对象
    但全局变量存在很多问题，它很容易造成命名空间污染，我们用以下两种方式解决

    2.使用命名空间

      var namespace1 = {
    a: function () {
      alert(1);
    },
    b: function () {
      alert(2);
    }
  };

    另外我们还可以动态创建命名空间

    
  var MyApp = {};
  MyApp.namespace = function (name) {
    var parts = name.split('.');
    var current = MyApp;
    for (var i in parts) {
      if (!current[parts[i]]) {
        current[parts[i]] = {};
      }
      current = current[parts[i]];
    }
  };
  MyApp.namespace('event');
  MyApp.namespace('dom.style');
  console.dir(MyApp);
  // 上述代码等价于：
  var MyApp = {
    event: {},
    dom: {
      style: {}
    }
  };

    3. 闭包

      var user = (function () {
    var __name = 'sven',
      __age = 29;
    return {
      getUserInfo: function () {
        return __name + '-' + __age;
      }
    }
  })();

    例子

    登录框

    下面我们来实现一个点击登录按钮弹出登录框的例子

    粗糙的实现

    <html>

<body>
  <button id="loginBtn">登录</button>
</body>
<script>
  var loginLayer = (function () {
    var div = document.createElement('div');
    div.innerHTML = '我是登录浮窗';
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
  })();
  document.getElementById('loginBtn').onclick = function () {

    loginLayer.style.display = 'block';
  };
</script>

</html>

    上面这种方式如果用户没有点击登录按钮，也会在一开始就创建登录框

    改进

    
<html>

<body>
  <button id="loginBtn">登录</button>
</body>
<script>
  var createLoginLayer = function () {
    var div = document.createElement('div');
    div.innerHTML = '我是登录浮窗';
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
  };
  document.getElementById('loginBtn').onclick = function () {
    var loginLayer = createLoginLayer();
    loginLayer.style.display = 'block';
  };
</script>

</html>

    这种方式每次点击按钮都会创建一个登录框

    再改进

    
var createLoginLayer = (function () {
    var div;
    return function () {
      if (!div) {
        div = document.createElement('div');
        div.innerHTML = '我是登录浮窗';
        div.style.display = 'none';
        document.body.appendChild(div);
      }
      return div;
    }
  })();

  document.getElementById('loginBtn').onclick = function () {
    var loginLayer = createLoginLayer();
    loginLayer.style.display = 'block';
  };

    这种方式不够通用，不符合单一职责原则

    再再改进

    
  var getSingle = function (fn) {
    var result;
    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';
  };

  //下面我们再试试创建唯一的iframe 用于动态加载第三方页面：
  var createSingleIframe = getSingle(function () {
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    return iframe;
  });
  document.getElementById('loginBtn').onclick = function () {
    var loginLayer = createSingleIframe();
    loginLayer.src = 'http://baidu.com';
  };

    至此已经完美

    设计模式javascript
    普通程序员
    4k 声望811 粉丝

    分享IT干货，内推大厂

    « 上一篇
    每日笔记-20181224
    下一篇 »
    js设计模式--策略模式

    引用和评论

    被 8 篇内容引用
    推荐阅读
    头像
    webpack官网指南demo

    普通程序员赞 4阅读 2.8k评论 1

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新