好程式設計師教程分享Javascript設計模式
阿新 • • 發佈:2019-04-20
好程式設計師教程分享Javascript設計模式
方法一 物件字面量表示法
在物件字面量表示法中,一個物件被描述為一組包含在大括號中,以逗號分隔的 name/value 對。物件內的名稱可以是字串或識別符號,後面跟著一個冒號。物件中最後一個 name/value 對不加逗號,否則會出錯。
/**
- <p><font size="3"> * 使用字面量表示法定義模組</font></p>
- <p><font size="3"> */</font></p>
- <p><font size="3"> var myModule = {</font></p>
- <p><font size="3"> myProperty: "someValue",</font></p>
- <p><font size="3"> myConfig: {</font></p>
- <p><font size="3"> useCaching: true,</font></p>
- <p><font size="3"> language: "en"</font></p>
- <p><font size="3"> },</font></p>
- <p><font size="3"> myMethod: function () {</font></p>
- <p><font size="3"> console.log("the first method");</font></p>
- <p><font size="3"> },</font></p>
- <p><font size="3"> myMethod2: function () {</font></p>
- <p><font size="3"> console.log("the second method");</font></p>
- <p><font size="3"> },</font></p>
- <p><font size="3"> };</font></p>
console.log(myModule.myProperty); // someValue
- <p><font size="3"> console.log(myModule.myConfig); // {useCaching: true, language: 'en'}</font></p>
- <p><font size="3"> console.log(myModule.myConfig.useCaching); // true</font></p>
- <p><font size="3"> myModule.myMethod(); // the first method</font></p>
- <p><font size="3"> myModule.myMethod2(); // the second method</font></p>
方法二 Module模式
Module模式使用閉包封裝“私有”狀態和組織。它提供了一種包裝混合公有/私有方法和變數的方式
,防止其汙染全域性名稱空間,防止其洩露到全域性作用域。通過該模式,只需返回一個公有API,而其他的一切則都維持在私有閉包裡。
/**
- <p><font size="3"> * Module方法定義</font></p>
- <p><font size="3"> */</font></p>
- <p><font size="3"> var myNameSpace = (function () {</font></p>
- <p><font size="3"> // 私有變數</font></p>
- <p><font size="3"> var myPrivateVar = 0;</font></p>
- <p><font size="3"> // 私有函式</font></p>
- <p><font size="3"> var myPrivateMethod = function (foo) {</font></p>
- <p><font size="3"> console.log(foo);</font></p>
- <p><font size="3"> };</font></p>
- <p><font size="3"> // 公有API</font></p>
- <p><font size="3"> return {</font></p>
- <p><font size="3"> // 公有變數</font></p>
- <p><font size="3"> myPublicVar: "foo",</font></p>
- <p><font size="3"> // 公有方法</font></p>
- <p><font size="3"> myPublicFunction: function (bar) {</font></p>
- <p><font size="3"> // 操作私有變數</font></p>
- <p><font size="3"> myPrivateVar ++;</font></p>
- <p><font size="3"> // 呼叫私有函式</font></p>
- <p><font size="3"> myPrivateMethod(bar);</font></p>
- <p><font size="3"> },</font></p>
- <p><font size="3"> // 公有方法二</font></p>
- <p><font size="3"> myPublicFunction2: function () {</font></p>
- <p><font size="3"> console.log("success");</font></p>
- <p><font size="3"> }</font></p>
- <p><font size="3"> };</font></p>
- <p><font size="3"> }) ();</font></p>
console.log(myNameSpace.myPrivateVar); // undefined
- <p><font size="3"> console.log(myNameSpace.myPrivateVar); // undefined</font></p>
- <p><font size="3"> console.log(myNameSpace.myPublicVar); // foo</font></p>
- <p><font size="3"> console.log(myNameSpace.myPublicFunction); // Function</font></p>
- <p><font size="3"> myNameSpace.myPublicFunction2(); // success</font></p>
- <p><font size="3"> myNameSpace.myPublicFunction("i am first"); // i am first</font></p><