《javascript设计模式》笔记之第五章：单体模式

一：单体的基本结构：

最简单的单体，实际就是一个对象字面量：

var Singleton = {
  attribute1: true,
  attribute2: 10,

  method1: function() {

  },
  method2: function(arg) {

  }
};

二：划分命名空间：

单体一个很重要的功能就是划分命名空间，这节其实没什么好说的。。

然后，最好的做法是将命名空间再进一步统一，使自己的所有代码都通过一个全局对象来访问，例子：

var GiantCorp = {};

GiantCorp.Common = {
  // A singleton with common methods used by all objects and modules.
};

GiantCorp.ErrorCodes = {
  // An object literal used to store data.
};

GiantCorp.PageHandler = {
  // A singleton with page specific methods and attributes.
};

然后这样的话，与外部的代码发生冲突的可能性就超级少了

三：用作特定网页专用代码的包装器的单体：

单体的另一个重要的功能就是包装网页专用代码：

Namespace.PageName = {

  // Page constants.
  CONSTANT_1: true,
  CONSTANT_2: 10,

  // Page methods.
  method1: function() {

  },
  method2: function() {

  },

  // Initialization method.
  init: function() {

  }
}

然后就调用这些代码

addLoadEvent(Namespace.PageName.init);

接下来举一个实际使用的例子：我们现在写网页基本上必写的就是用ajax提交表单，那么我们怎样用单体来包装这些代码呢？下面就是一个演示：

先来反例（我自己之前的做法~~~）：

var formID = document.getElementById("form");
formID.addEventListener('submit',formSubmit,false);

function formSubmit(e) {
        //阻止表单默认动作，然后用ajax发送数据
        //接受数据之后调用callBack函数
}

function callBack(data) {
        //用ajax提交表单之后的回调函数

这样的话污染了超级多的全局变量~~~

然后学习这章之后的做法~~~

var GiantCorp = window.GiantCorp || {};
GiantCorp.RegPage = {
        formID: 'form',
        callBack: function(data) {
                //用ajax提交表单之后的回调函数
        },
        formSubmit: function(e) {
                //阻止表单默认动作，然后用ajax发送数据
                //接受数据之后调用callBack函数
        },
        init: function(e) {
                GiantCorp.RegPage.formEl = document.getElementById(GiantCorp.RegPage.formID);
                GiantCorp.RegPage.formEl.addEventListener('submit',GiantCorp.RegPage.formSubmit,false);
        }
}

GiantCorp.RegPage.init();

注意第一行代码，意思就是如果之前定义过GiantCorp的话就不管，不然就赋予一个空对象给GiantCorp，这样的代码在很多地方都会看到。

四：拥有私用成员的单体：

拥有私用成员的最简单方法就是在属性前加下划线_来区分:

GiantCorp.DataParser = {
  // Private methods.
  _stripWhitespace: function(str) {
    return str.replace(/\s+/, '');
  },
  _stringSplit: function(str, delimiter) {
    return str.split(delimiter);
  },
  
  // Public method.
  stringToArray: function(str, delimiter, stripWS) {
    if(stripWS) {
      str = this._stripWhitespace(str);
    }
    var outputArray = this._stringSplit(str, delimiter);
    return outputArray;
  }
};

上面的代码不用去理解它，看到下划线_就把它当成是私有属性就可以了

此外stringToArray的函数里面用了this来直接调用单体里面的其他方法，不过使用起来注意它有时候指向的对象的问题！

接下来是使用闭包来实现真正拥有私用成员的单体：

MyNamespace.Singleton = (function() {
  // Private members.
  var privateAttribute1 = false;
  var privateAttribute2 = [1, 2, 3];
  
  function privateMethod1() {
    ...
  }
  function privateMethod2(args) {
    ...
  }

  return { // Public members.
    publicAttribute1: true,
    publicAttribute2: 10,
    
    publicMethod1: function() {
      ...
    },
    publicMethod2: function(args) {
      ...
    }
  };
})();

注意是公共成员都是放在return里面的，其他都是私有的。

这种模式是JavaScript中最流行，应用最广泛的模式之一

五：惰性实例化：

又来一个比较高级的做法，那就是惰性实例化：当我们需要用到这段代码的时候才创建它。换种方法说就是这样调用其方法：Singleton.getInstance().methodName()，而不是这样调用：Singleton.methodName()。其中getInstance方法会检查该单体是否已经被实例化。如果还没有，那么它将创建并返回其实例，如果单体已经实例过，那么它将返回现有实例。

 

实现步骤一（单体的所有代码移动一个名为constructor的方法中）：

MyNamespace.Singleton = (function() {

  function constructor() { // All of the normal singleton code goes here.
    // Private members.
    var privateAttribute1 = false;
    var privateAttribute2 = [1, 2, 3];
  
    function privateMethod1() {
      ...
    }
    function privateMethod2(args) {
      ...
    }

    return { // Public members.
      publicAttribute1: true,
      publicAttribute2: 10,
    
      publicMethod1: function() {
        ...
      },
      publicMethod2: function(args) {
        ...
      }
    }
  }
  
})();

上面注意constructor是包含单体里面所有代码的。

实现步骤二（创建一个单体控制的函数，并返回到单体）：

MyNamespace.Singleton = (function() {
  
  function constructor() { // All of the normal singleton code goes here.
    ...
  }
  
  return {
    getInstance: function() {
      // Control code goes here.
    }
  }
})();

实现步骤三（创建个私有变量用于判断是否已经实例化，并且在getInstance实现判断逻辑）：

MyNamespace.Singleton = (function() {
  
  var uniqueInstance; // Private attribute that holds the single instance.
  
  function constructor() { // All of the normal singleton code goes here.
    ...
  }
  
  return {
    getInstance: function() {
      if(!uniqueInstance) { // Instantiate only if the instance doesn't exist.
        uniqueInstance = constructor();
      }
      return uniqueInstance;
    }
  }
})();

此外，可以用 var MNS = MyNamespace.Singleton的方法简化命名空间，但是要注意this指向问题！

六：分支：

利用分支可以实现判断浏览器支持哪一种代码，然后对该浏览器使用专用的代码：

MyNamespace.Singleton = (function() {
  var objectA = {
    method1: function() {
      ...
    },
    method2: function() {
      ...
    }
  };
  var objectB = {
    method1: function() {
      ...
    },
    method2: function() {
      ...
    }
  };

  return (someCondition) ? objectA : objectB;
})();

用上面这样的分支我们就可以用来实现如果是IE8就返回第一种单体，如果不是就返回第二种单体了。

七：示例：用分支技术创建XHR对象

如果要兼容老旧的浏览器使用ajax，那就可以用这种技术了

例子：

/* SimpleXhrFactory singleton, step 1. */

var SimpleXhrFactory = (function() {
  
  // The three branches.
  var standard = {
    createXhrObject: function() {
      return new XMLHttpRequest();
    }
  };
  var activeXNew = {
    createXhrObject: function() {
      return new ActiveXObject('Msxml2.XMLHTTP');
    }
  };
  var activeXOld = {
    createXhrObject: function() {
      return new ActiveXObject('Microsoft.XMLHTTP');
    }
  };
  
})();

/* SimpleXhrFactory singleton, step 2. */

var SimpleXhrFactory = (function() {
  
  // The three branches.
  var standard = {
    createXhrObject: function() {
      return new XMLHttpRequest();
    }
  };
  var activeXNew = {
    createXhrObject: function() {
      return new ActiveXObject('Msxml2.XMLHTTP');
    }
  };
  var activeXOld = {
    createXhrObject: function() {
      return new ActiveXObject('Microsoft.XMLHTTP');
    }
  };
  
  // To assign the branch, try each method; return whatever doesn't fail.
  var testObject;
  try {
    testObject = standard.createXhrObject();
    return standard; // Return this if no error was thrown.
  }
  catch(e) {
    try {
      testObject = activeXNew.createXhrObject();
      return activeXNew; // Return this if no error was thrown.
    }
    catch(e) {
      try {
        testObject = activeXOld.createXhrObject();
        return activeXOld; // Return this if no error was thrown.
      }
      catch(e) {
        throw new Error('No XHR object found in this environment.');
      }
    }
  }

})();