好程序员分享Javascript设计模式

时间：2022-06-23 08:54:31

方法一 对象字面量表示法

　　在对象字面量表示法中，一个对象被描述为一组包含在大括号中，以逗号分隔的 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. <p><font size="3">　　console.log(myNameSpace.myPrivateVar); // undefined</font></p>
    2. <p><font size="3">　　console.log(myNameSpace.myPublicVar); // foo</font></p>
    3. <p><font size="3">　　console.log(myNameSpace.myPublicFunction); // Function</font></p>
    4. <p><font size="3">　　myNameSpace.myPublicFunction2(); // success</font></p>
    5. <p><font size="3">　　myNameSpace.myPublicFunction("i am first"); // i am first</font></p>

相关文章