Javascript常用的设计模式详解（一）

Javascript常用的设计模式详解系列文章目录

1. Javascript常用的设计模式详解（一） 

     - 什么是设计模式

     - 单体模式

     - 模块模式

2. Javascript常用的设计模式详解（二）

---

什么是设计模式

• 设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

• 使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。

---

单体模式

• 概念： 单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可

以被实例化，那么他只能被实例化一次。

• 特点：

  1. 可以来划分命名空间，从而清除全局变量所带来的危险。

  2. 利用分支技术来来封装浏览器之间的差异。

  3. 可以把代码组织的更为一体，便于阅读和维护。

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

注 :
  //单体模式是只实例化一次，所以下面的实例是相等的
  console.log(a === b); // true
  单体模式只实例化一次，因此第一次调用，返回的是a实例对象，当我们继续调用的时候，b的实例就是a的实例，因此下面都是打印的是aa；
  console.log(a.getName());// aa
  console.log(b.getName());// aa

• 使用
  
  1. 创建唯一性div(页面loading toast dailog…) demo见下代码

  var Toast = function() {
      var _t = this;
      this.initToast = function(){
        var div = document.createElement("div");
          div.innerHTML = "我是弹窗内容";
          div.style.display = 'none';
          document.body.appendChild(div);
          return div;
      }
      this.createToast = (function() {
          var div;
          return function() {
              if (! div) {
                  div = _t.initToast();
              }
              return div;
          }
      })();
      this.showToast = function() {
          var toast = _t.createToast();
          toast.style.display = 'block';
      }
  }
  var toast = new Toast();
  document.getElementById("btn").onclick = function() {
      toast.showToast();
  }

通用代码块

// 获取实例的封装代码
var getInstance = function(fn) {
    var result;
    return function(){
        return result || (result = fn.call(this,arguments));
    }
};

---

模块模式

• 模块模式的思路是为单体模式添加私有变量和私有方法能够减少全局变量的使用

• 模块模式的代码结构如下：

var singleMode = (function(){
    // 创建私有变量
    var privateNum = 112;
    // 创建私有函数
    function privateFunc(){
        // 实现自己的业务逻辑代码
    }
    // 返回一个对象包含公有方法和属性
    return {
        publicMethod1: publicMethod1,
        publicMethod2: publicMethod1
    };
})();

• 模块模式使用场景

  如果我们必须创建一个对象并以某些数据进行初始化，同时还要公开一些能够访问这些私有数据的

方法，那么我们这个时候就可以使用模块模式了。

• 理解增强的模块模式

  增强的模块模式的使用场合是：适合那些单列必须是某种类型的实例，同时还必须添加某些属性或

方法对其加以增强的情况。比如如下代码：

function CustomType() {
    this.name = "tugenhua";
};
CustomType.prototype.getName = function(){
    return this.name;
}
var application = (function(){
    // 定义私有
    var privateA = "aa";
    // 定义私有函数
    function A(){};

    // 实例化一个对象后，返回该实例，然后为该实例增加一些公有属性和方法
    var object = new CustomType();

    // 添加公有属性
    object.A = "aa";
    // 添加公有方法
    object.B = function(){
        return privateA;
    }
    // 返回该对象
    return object;
})();

引用借鉴：龙恩0707 Javascript常用的设计模式详解