.

好程式設計師教程分享Javascript設計模式

方法一 物件字面量表示法
  在物件字面量表示法中,一個物件被描述為一組包含在大括號中,以逗號分隔的 name/value 對。物件內的名稱可以是字串或識別符號,後面跟著一個冒號。物件中最後一個 name/value 對不加逗號,否則會出錯。

/**

  1. <p><font size="3">  * 使用字面量表示法定義模組</font></p>
  2. <p><font size="3">  */</font></p>
  3. <p><font size="3">  var myModule = {</font></p>
  4. <p><font size="3">  myProperty: "someValue",</font></p>
  5. <p><font size="3">  myConfig: {</font></p>
  6. <p><font size="3">  useCaching: true,</font></p>
  7. <p><font size="3">  language: "en"</font></p>
  8. <p><font size="3">  },</font></p>
  9. <p><font size="3">  myMethod: function () {</font></p>
  10. <p><font size="3">  console.log("the first method");</font></p>
  11. <p><font size="3">  },</font></p>
  12. <p><font size="3">  myMethod2: function () {</font></p>
  13. <p><font size="3">  console.log("the second method");</font></p>
  14. <p><font size="3">  },</font></p>
  15. <p><font size="3">  };</font></p>

 

console.log(myModule.myProperty); // someValue

  1. <p><font size="3">  console.log(myModule.myConfig); // {useCaching: true, language: 'en'}</font></p>
  2. <p><font size="3">  console.log(myModule.myConfig.useCaching); // true</font></p>
  3. <p><font size="3">  myModule.myMethod(); // the first method</font></p>
  4. <p><font size="3">  myModule.myMethod2(); // the second method</font></p>


  方法二 Module模式
Module模式使用閉包封裝“私有”狀態和組織。它提供了一種包裝混合公有/私有方法和變數的方式
  ,防止其汙染全域性名稱空間,防止其洩露到全域性作用域。通過該模式,只需返回一個公有API,而其他的一切則都維持在私有閉包裡。
/**

  1. <p><font size="3">  * Module方法定義</font></p>
  2. <p><font size="3">  */</font></p>
  3. <p><font size="3">  var myNameSpace = (function () {</font></p>
  4. <p><font size="3">  // 私有變數</font></p>
  5. <p><font size="3">  var myPrivateVar = 0;</font></p>
  6. <p><font size="3">  // 私有函式</font></p>
  7. <p><font size="3">  var myPrivateMethod = function (foo) {</font></p>
  8. <p><font size="3">  console.log(foo);</font></p>
  9. <p><font size="3">  };</font></p>
  10. <p><font size="3">  // 公有API</font></p>
  11. <p><font size="3">  return {</font></p>
  12. <p><font size="3">  // 公有變數</font></p>
  13. <p><font size="3">  myPublicVar: "foo",</font></p>
  14. <p><font size="3">  // 公有方法</font></p>
  15. <p><font size="3">  myPublicFunction: function (bar) {</font></p>
  16. <p><font size="3">  // 操作私有變數</font></p>
  17. <p><font size="3">  myPrivateVar ++;</font></p>
  18. <p><font size="3">  // 呼叫私有函式</font></p>
  19. <p><font size="3">  myPrivateMethod(bar);</font></p>
  20. <p><font size="3">  },</font></p>
  21. <p><font size="3">  // 公有方法二</font></p>
  22. <p><font size="3">  myPublicFunction2: function () {</font></p>
  23. <p><font size="3">  console.log("success");</font></p>
  24. <p><font size="3">  }</font></p>
  25. <p><font size="3">  };</font></p>
  26. <p><font size="3">  }) ();</font></p>

 

console.log(myNameSpace.myPrivateVar); // undefined

  1.  
  2. <p><font size="3">  console.log(myNameSpace.myPrivateVar); // undefined</font></p>
  3. <p><font size="3">  console.log(myNameSpace.myPublicVar); // foo</font></p>
  4. <p><font size="3">  console.log(myNameSpace.myPublicFunction); // Function</font></p>
  5. <p><font size="3">  myNameSpace.myPublicFunction2(); // success</font></p>
  6. <p><font size="3">  myNameSpace.myPublicFunction("i am first"); // i am first</font></p><