1，命名空間模式 ?namespace

? <script> var myApp = {};//通過(guò)全局變量來(lái)實(shí)現(xiàn)命名空間 maApp.Parent = function (){ ? }; myApp.Child = function(){ };? </script>
? ? 通用命名空間函數(shù)

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

? <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，聲明依賴(lài)關(guān)系 ? ? js庫(kù)通常是模塊化且依據(jù)命名空間組織的。

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

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

??<script> function Gadget(){ //私有成員 var name = "iPoid"; //共有函數(shù) this.getName = function(){ return name; }; }? var toy = new Gadget();? console.log(toy.name);//undefined console.log(toy.getName);//iPoid?? </script> 私有性失效：因?yàn)樯婕暗揭脗髦?#xff0c;如果傳遞私有屬性給外部，則外部可直接訪問(wèn)私有屬性，如下： ? ?

?<script> function Gadget(){ //私有成員 var specs = { screen_width: 320, screen_hight: 650, color: 'RED' }; //共有函數(shù) 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，對(duì)象字面量以及私有屬性 ??

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

??<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，將私有方法揭示為公共方法 ? ? 通過(guò)全局變量可以將匿名函數(shù)的私有方法公開(kāi)。
??

??<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，模塊模式 ? ? 模塊模式通過(guò)命名空間，完成函數(shù)變量定義和使用。
??

<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> 通過(guò)揭示模式暴漏想暴漏的方法。

<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> 創(chuàng)建構(gòu)造函數(shù)的模塊

? ???<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; } };? //返回要分配給新命名空間的構(gòu)造函數(shù) return Constr; });? var arr = new myApp.util.array([obj]);? </script> 8，將全局變量導(dǎo)入到模塊中 ? ???

<script> MYAPP.util.module = (function(app, global){ // }(MYAPP, this));? </script> 9，沙箱模式 ? ? 沙箱模式解決命名空間模式的如下特點(diǎn)：
? ? -1，對(duì)單個(gè)全局變量的依賴(lài)變成了對(duì)應(yīng)用程序的全局變量依賴(lài)。在命名空間模式中，是沒(méi)有辦法使用同一個(gè)應(yīng)用程序或庫(kù)的兩個(gè)版本在同一頁(yè)面中，因?yàn)檫@兩者都需要同一個(gè)全局符號(hào)名。
? ? -2，對(duì)這種以點(diǎn)分割的名字來(lái)說(shuō)，需要輸入更長(zhǎng)的字符，同時(shí)解析時(shí)需要更長(zhǎng)的時(shí)間。如：myapp.a.b.c.d 沙箱模式提供了一個(gè)可用于模塊運(yùn)行的環(huán)境，且不會(huì)對(duì)其他模塊和沙箱造成影響。 10，全局構(gòu)造函數(shù) ? ?? ? 最基礎(chǔ)的使用如下圖所示

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

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

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

<script> Sandbox('dom', 'event', function(box){ //your code? Sandbox('ajax', function(box){ //your cide? })? //此處無(wú)法獲取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){ //如果需要，可以通過(guò)如下語(yǔ)句訪問(wèn)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，實(shí)現(xiàn)構(gòu)造函數(shù) ? ??

<script> function Sandbox(){ //將參數(shù)轉(zhuǎn)為一個(gè)數(shù)組 var args = Array.prototype.slice.call(arguments),? ? //最后一個(gè)參數(shù)是回調(diào)函數(shù) callback = args.pop(), //模塊可以做為一個(gè)數(shù)組傳遞，或作為單獨(dú)的參數(shù)傳遞 modules = (args[0] && typeof args[0] === "string") ? args : args[0], i; //確保該函數(shù)做為狗仔函數(shù)被調(diào)用 if(! (this instanceof Sandbox)){ return new Sandbox(modules, callback); }? //向this添加屬性 this.a = 1; this.b = 2;? //向this對(duì)象添加模塊 //不制定模塊或指定“*”都表示使用所有模塊? 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> ? ? 以上代碼的關(guān)鍵部分：
? ? -1，存在一個(gè)類(lèi)型的檢查語(yǔ)句，檢查this是否為Sandbox的實(shí)例。
? ? -2，可以在該構(gòu)造函數(shù)中將一些屬性添加到this中。
? ? -3，所需的模塊可以魔窟名稱(chēng)數(shù)組的形式傳遞。

13，公有靜態(tài)成員 ? ??

?<script>? //構(gòu)造函數(shù) var Gadget = function(){}; //靜態(tài)方法 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，私有靜態(tài)成員 ? ? -1，以同一個(gè)構(gòu)造函數(shù)創(chuàng)建的所有對(duì)象共享該成員
? ? -2，構(gòu)造函數(shù)外部不可訪問(wèn)該成員。
?

<script> var Gadget = (function(){ var counter = 0;? return function(){ console.log(counter += 1); } }());//立即執(zhí)行? 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;});

轉(zhuǎn)載于:https://www.cnblogs.com/jingLongJun/p/4491078.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。