1，命名空間模式 ?namespace

? <script> var myApp = {};//通過全局變量來實現命名空間 maApp.Parent = function (){ ? }; myApp.Child = function(){ };? </script>
? ? 通用命名空間函數

? <script> //不安全代碼 var myApp = {}; //安全代碼 if(typeof myApp === "undefined"){ var myApp = {}; } //或者使用更短的語句 var myApp = myApp || {};? </script> 使用命名空間函數

? <script> myApp.namespace("myApp.modules.module2"); //等同于如下代碼 var myApp = { modules : { module2:{} } };? </script>

<script> var myApp = myApp || {};? myApp.namespace = function(ns_string){? var parts = ns_string.split('.'), parent = myApp, i;? if(parent[0] === "myApp"){ parts = parts.slice(1); }? for(i = 0; i < parts.length; i++){ if(typeof parent[parts[i]] === "undefined"){ parent = parent[parts[i]]; } } return parent; };? var modules2 = myApp.namespace("myApp.modules.module2"); console.log(modules2 === myApp.modules.module2);? myApp.namespace("modules.module2");? </script>
2，聲明依賴關系 ? ? js庫通常是模塊化且依據命名空間組織的。

? var myFunction = function(){ var event = YAHOO.util.event, dom = YAHOO.util.Dom; }
3，私有屬性和方法 ? ? JS并沒有特殊的語法來表示私有。JS中所有對象的成員是公共的。
? ??

var myObj = {?? myProp : 1, ? ?getPro: function(){ ? return this.myProp; ? } ? }; console.log(myObj.myProp); console.log(myObj.getPro()); ? ? 但是可以使用閉包實現成員私有化。
? ?

??<script> function Gadget(){ //私有成員 var name = "iPoid"; //共有函數 this.getName = function(){ return name; }; }? var toy = new Gadget();? console.log(toy.name);//undefined console.log(toy.getName);//iPoid?? </script> 私有性失效：因為涉及到引用傳值，如果傳遞私有屬性給外部，則外部可直接訪問私有屬性，如下： ? ?

?<script> function Gadget(){ //私有成員 var specs = { screen_width: 320, screen_hight: 650, color: 'RED' }; //共有函數 this.getSpecs = function(){ return specs; }; }? var toy = new Gadget(), specs = toy.getSpecs(); specs.color = "GUESS"; console.log(specs.screen_width);//320 console.log(specs.color);//GUESS? console.dir(toy.getSpecs());?? </script> 4，對象字面量以及私有屬性 ??

??? <script> var myObj = (function(){ var name = "name";? return { getName: function(){ return name; } }; }()); console.log(myObj.getName());//name? </script> 5，原型和私有性 ? ? 通過prototype可以動態的給對象添加屬性和方法。
? ?

??<script> function Gadget(){ var name = "Ipod";? this.getName = function(){ return name; }; }? Gadget.prototype = (function(){ var browser = "others";? return{ getBrowser: function(){ return browser; } }; }());? var toy = new Gadget(); console.log(toy.getName());//name console.log(toy.getBrowser());//others? </script>
6，將私有方法揭示為公共方法 ? ? 通過全局變量可以將匿名函數的私有方法公開。
??

??<script> ?var myArray;? ?(function(){ var astr = "[object Array]", toString = Object.prototype.toString;? function isArray(s){ return toString.call(s) === 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"], "a"));//0 console.log(myArray.indexOf(["a", "b"], "d"));//-1 ?}());? console.log(myArray.indexOf(["a", "b"], "a"));//0 console.log(myArray.indexOf(["a", "b"], "d"));//-1? </script> 7，模塊模式 ? ? 模塊模式通過命名空間，完成函數變量定義和使用。
??

<script> myApp.namespace("myApp.util.array"); myApp.util.array = (function(){ var uobj = myApp.util.object,? ulang = myApp.util.lang, array_string = "[object Array]", ops = Object.prototype.toString; return { inArray: function(needle, haystack){ for(var i = 0, max = haystack.length; i < max; i+= 1){ if(haystack[i] === needle){ return true; } } },? isArray: function(s){ return ops.call(a) === array_string; } }; ?? }());? </script> 通過揭示模式暴漏想暴漏的方法。

<script> myApp.namespace("myApp.util.array"); myApp.util.array = (function(){ var uobj = myApp.util.object,? ulang = myApp.util.lang, array_string = "[object Array]", ops = Object.prototype.toString; inArray: function(needle, haystack){ for(var i = 0, max = haystack.length; i < max; i+= 1){ if(haystack[i] === needle){ return true; } } },? isArray: function(s){ return ops.call(a) === array_string; }; ? return { isArray: isArray, indexOf: inArray }; }());? </script> 創建構造函數的模塊

? ???<script> myApp.namespace("myApp.util.array"); myApp.util.array = (function(){ var uobj = myApp.util.object,? ulang = myApp.util.lang;? Constr;? Constr = function(o){ this.elements = this.toArray(o); };? //共有API原型 Constr.prototype = { constructor: myApp.util.array, version: "2.0", toArray: function(obj){ for(var i = 0, a= [], len = obj.length; i < len; i+= 1){ a[i] = obj[i]; }? return a; } };? //返回要分配給新命名空間的構造函數 return Constr; });? var arr = new myApp.util.array([obj]);? </script> 8，將全局變量導入到模塊中 ? ???

<script> MYAPP.util.module = (function(app, global){ // }(MYAPP, this));? </script> 9，沙箱模式 ? ? 沙箱模式解決命名空間模式的如下特點：
? ? -1，對單個全局變量的依賴變成了對應用程序的全局變量依賴。在命名空間模式中，是沒有辦法使用同一個應用程序或庫的兩個版本在同一頁面中，因為這兩者都需要同一個全局符號名。
? ? -2，對這種以點分割的名字來說，需要輸入更長的字符，同時解析時需要更長的時間。如：myapp.a.b.c.d 沙箱模式提供了一個可用于模塊運行的環境，且不會對其他模塊和沙箱造成影響。 10，全局構造函數 ? ?? ? 最基礎的使用如下圖所示

?? <script> new Sandbox(function(box){ //write your code });? </script> ? ? 通過以下兩種方式擴展屬性：
? ? -1，在創建對象的時候不實用new操作符。
? ? -2，Sandbox()狗仔函數可以接受一個額外的配置參數，其中改參數制訂了對象事例所需要的模塊名。
? ????

<script> Sandbox(['ajax', 'event'], function(box){ //your code });? </script> 或者，

<script> Sandbox('ajax', 'event', function(box){ //your code });? </script> 一個沙箱中可以繼續使用一個沙箱模塊。

<script> Sandbox('dom', 'event', function(box){ //your code? Sandbox('ajax', function(box){ //your cide? })? //此處無法獲取ajax });? </script> 11，增加模塊 ? ? ?

<script> Sandbox.modules = (); Sandbox.modules.dom = function(box){ box.getElement = function(){}; box.getStyle = function(){}; box.foo = "bar"; }; Sandbox.modules.event = function(box){ //如果需要，可以通過如下語句訪問Sandbox原型 //box.constructor.prototype.m = "mmmmm";? box.attachEvent = function(){}; box.dettachEvent = function(){}; }; Sandbox.modules.ajax = function(box){ box.makeRequest = function(){}; boix.getResponse = function(){}; }? </script> 12，實現構造函數 ? ??

<script> function Sandbox(){ //將參數轉為一個數組 var args = Array.prototype.slice.call(arguments),? ? //最后一個參數是回調函數 callback = args.pop(), //模塊可以做為一個數組傳遞，或作為單獨的參數傳遞 modules = (args[0] && typeof args[0] === "string") ? args : args[0], i; //確保該函數做為狗仔函數被調用 if(! (this instanceof Sandbox)){ return new Sandbox(modules, callback); }? //向this添加屬性 this.a = 1; this.b = 2;? //向this對象添加模塊 //不制定模塊或指定“*”都表示使用所有模塊? if(!modules || modules === "*"){ for(i in Sandbox.modules){ if(Sandbox.modules.hasOwnProperty(i)){ moduls.push(i); } } } //初始化模塊 for(i = 0; i < modules.length; i+= 1){ Sandbox.modules[[moduls[i]]](this); }? callback(this); }? Sandbox.prototype = { name: "My Application", version: "1.00", getName: function(){ return this.name; } };? </script> ? ? 以上代碼的關鍵部分：
? ? -1，存在一個類型的檢查語句，檢查this是否為Sandbox的實例。
? ? -2，可以在該構造函數中將一些屬性添加到this中。
? ? -3，所需的模塊可以魔窟名稱數組的形式傳遞。

13，公有靜態成員 ? ??

?<script>? //構造函數 var Gadget = function(){}; //靜態方法 Gadget.isShiny = function(){ return "Static Method!"; };? //原型添加方法 Gadget.prototype.setPrice = function(price){ this.price = price; };? console.log(Gadget.isShiny());//Static Method!?? var iphone = new Gadget(); iphone.setPrice(500); console.log(typeof Gadget.setPrice);//undefined console.log(typeof iphone.isShiny);//undefined? Gadget.prototype.isShiny = Gadget.isShiny; console.log(iphone.isShiny());//Static Method!? </script>
14，私有靜態成員 ? ? -1，以同一個構造函數創建的所有對象共享該成員
? ? -2，構造函數外部不可訪問該成員。
?

<script> var Gadget = (function(){ var counter = 0;? return function(){ console.log(counter += 1); } }());//立即執行? var g1 = new Gadget();//1 var g2 = new Gadget();//2? </script> 15，鏈模式 ? ? 如:

myObj.method1("11").method2("w").method3(); 16，method方法 ? ??

var Person = function(name){ this.name = name;}.method("getName", function(){ return this.name;});

轉載于:https://www.cnblogs.com/jingLongJun/p/4491078.html

總結

以上是生活随笔為你收集整理的JavaScript模式读书笔记 第5章 对象创建模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。