深入理解JavaScript系列（47）：對象建立模式（上篇）

介紹

本篇主要是介紹建立對象方面的模式，利用各種技巧可以極大地避免了錯誤或者可以編寫出非常精簡的代碼。

模式1：命名空間（namespace）

命名空間可以減少全域命名所需的數量，避免命名衝突或過度。一般我們在進行對象層級定義的時候，經常是這樣的：

var app = app || {}; app.moduleA = app.moduleA || {}; app.moduleA.subModule = app.moduleA.subModule || {}; app.moduleA.subModule.MethodA = function () {     console.log("print A"); }; app.moduleA.subModule.MethodB = function () {     console.log("print B"); };

如果層級很多的話，那就要一直這樣繼續下去，很是混亂。namespace模式就是為瞭解決這個問題而存在的，我們看代碼：

// 不安全，可能會覆蓋已有的MYAPP對象 var MYAPP = {}; // 還好 if (typeof MYAPP === "undefined") {     var MYAPP = {}; } // 更簡潔的方式 var MYAPP = MYAPP || {};  //定義通用方法 MYAPP.namespace = function (ns_string) {     var parts = ns_string.split('.'),         parent = MYAPP,         i;      // 預設如果第一個節點是MYAPP的話，就忽略掉，比如MYAPP.ModuleA     if (parts[0] === "MYAPP") {         parts = parts.slice(1);     }      for (i = 0; i < parts.length; i += 1) {         // 如果屬性不存在，就建立         if (typeof parent[parts[i]] === "undefined") {             parent[parts[i]] = {};         }         parent = parent[parts[i]];     }     return parent; };

調用代碼，非常簡單：

// 通過namespace以後，可以將傳回值賦給一個局部變數 var module2 = MYAPP.namespace('MYAPP.modules.module2'); console.log(module2 === MYAPP.modules.module2); // true  // 跳過MYAPP MYAPP.namespace('modules.module51');  // 非常長的名字 MYAPP.namespace('once.upon.a.time.there.was.this.long.nested.property');

模式2：定義依賴

有時候你的一個模組或者函數可能要引用第三方的一些模組或者工具，這時候最好將這些相依模組在剛開始的時候就定義好，以便以後可以很方便地替換掉。

var myFunction = function () {     // 相依模組     var event = YAHOO.util.Event,         dom = YAHOO.util.dom;      // 其它函數後面的代碼裡使用局部變數event和dom };

模式3：私人屬性和私人方法

JavaScript本書不提供特定的文法來支援私人屬性和私人方法，但是我們可以通過閉包來實現，代碼如下：

function Gadget() {     // 私人對象     var name = 'iPod';     // 公有函數     this.getName = function () {         return name;     }; } var toy = new Gadget();  // name未定義，是私人的 console.log(toy.name); // undefined  // 公有方法訪問name console.log(toy.getName()); // "iPod"  var myobj; // 通過自執行函數給myobj賦值 (function () {     // 自由對象     var name = "my, oh my";      // 實現了公有部分，所以沒有var     myobj = {         // 授權方法         getName: function () {             return name;         }     }; } ());

模式4：Revelation模式

也是關於隱藏私人方法的模式，和《深入理解JavaScript系列（3）：全面解析Module模式》裡的Module模式有點類似，但是不是return的方式，而是在外部先聲明一個變數，然後在內部給變數賦值公有方法。代碼如下：

var myarray;  (function () {     var astr = "[object Array]",         toString = Object.prototype.toString;      function isArray(a) {         return toString.call(a) === astr;     }      function indexOf(haystack, needle) {         var i = 0,             max = haystack.length;         for (; i < max; i += 1) {             if (haystack[i] === needle) {                 return i;             }         }         return -1;     }      //通過賦值的方式，將上面所有的細節都隱藏了     myarray = {         isArray: isArray,         indexOf: indexOf,         inArray: indexOf     }; } ());  //測試代碼 console.log(myarray.isArray([1, 2])); // true console.log(myarray.isArray({ 0: 1 })); // false console.log(myarray.indexOf(["a", "b", "z"], "z")); // 2 console.log(myarray.inArray(["a", "b", "z"], "z")); // 2  myarray.indexOf = null; console.log(myarray.inArray(["a", "b", "z"], "z")); // 2

模式5：鏈模式

鏈模式可以你連續可以調用一個對象的方法，比如obj.add(1).remove(2).delete(4).add(2)這樣的形式，其實現思路非常簡單，就是將this原樣返回。代碼如下：

var obj = {     value: 1,     increment: function () {         this.value += 1;         return this;     },     add: function (v) {         this.value += v;         return this;     },     shout: function () {         console.log(this.value);     } };  // 鏈方法調用 obj.increment().add(3).shout(); // 5  // 也可以單獨一個一個調用 obj.increment(); obj.add(3); obj.shout();

總結

本篇是對象建立模式的上篇，敬請期待明天的下篇。

參考：http://shichuan.github.com/javascript-patterns/#object-creation-patterns

 

轉自：

湯姆大叔