介紹本篇主要是介紹創(chuàng)建對象方面的模式,,利用各種技巧可以極大地避免了錯誤或者可以編寫出非常精簡的代碼,。 模式1:命名空間(namespace)命名空間可以減少全局命名所需的數(shù)量,避免命名沖突或過度,。一般我們在進(jìn)行對象層級定義的時候,,經(jīng)常是這樣的: 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"); }; 如果層級很多的話,那就要一直這樣繼續(xù)下去,,很是混亂,。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; // 默認(rèn)如果第一個節(jié)點(diǎn)是MYAPP的話,,就忽略掉,比如MYAPP.ModuleA if (parts[0] === "MYAPP") { parts = parts.slice(1); } for (i = 0; i < parts.length; i += 1) { // 如果屬性不存在,,就創(chuàng)建 if (typeof parent[parts[i]] === "undefined") { parent[parts[i]] = {}; } parent = parent[parts[i]]; } return parent; }; 調(diào)用代碼,,非常簡單: // 通過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:定義依賴有時候你的一個模塊或者函數(shù)可能要引用第三方的一些模塊或者工具,,這時候最好將這些依賴模塊在剛開始的時候就定義好,,以便以后可以很方便地替換掉。 var myFunction = function () { // 依賴模塊 var event = YAHOO.util.Event, dom = YAHOO.util.dom; // 其它函數(shù)后面的代碼里使用局部變量event和dom }; 模式3:私有屬性和私有方法JavaScript本書不提供特定的語法來支持私有屬性和私有方法,,但是我們可以通過閉包來實(shí)現(xiàn),,代碼如下: function Gadget() { // 私有對象 var name = 'iPod'; // 公有函數(shù) this.getName = function () { return name; }; } var toy = new Gadget(); // name未定義,是私有的 console.log(toy.name); // undefined // 公有方法訪問name console.log(toy.getName()); // "iPod" var myobj; // 通過自執(zhí)行函數(shù)給myobj賦值 (function () { // 自由對象 var name = "my, oh my"; // 實(shí)現(xiàn)了公有部分,,所以沒有var myobj = { // 授權(quán)方法 getName: function () { return name; } }; } ()); 模式4:Revelation模式也是關(guān)于隱藏私有方法的模式,,和《深入理解JavaScript系列(3):全面解析Module模式》里的Module模式有點(diǎn)類似,但是不是return的方式,,而是在外部先聲明一個變量,,然后在內(nèi)部給變量賦值公有方法。代碼如下: 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; } //通過賦值的方式,,將上面所有的細(xì)節(jié)都隱藏了 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:鏈模式鏈模式可以你連續(xù)可以調(diào)用一個對象的方法,,比如obj.add(1).remove(2).delete(4).add(2)這樣的形式,其實(shí)現(xiàn)思路非常簡單,,就是將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); } }; // 鏈方法調(diào)用 obj.increment().add(3).shout(); // 5 // 也可以單獨(dú)一個一個調(diào)用 obj.increment(); obj.add(3); obj.shout(); 總結(jié)本篇是對象創(chuàng)建模式的上篇,敬請期待明天的下篇,。 參考:http://shichuan.github.com/javascript-patterns/#object-creation-patterns 同步與推薦本文已同步至目錄索引:深入理解JavaScript系列 深入理解JavaScript系列文章,,包括了原創(chuàng),翻譯,,轉(zhuǎn)載等各類型的文章,,如果對你有用,請推薦支持一把,,給大叔寫作的動力,。 |
|