博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
好程序员教程分享Javascript设计模式
阅读量:7237 次
发布时间:2019-06-29

本文共 3042 字,大约阅读时间需要 10 分钟。

  hot3.png

好程序员教程分享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>

转载于:https://my.oschina.net/530504/blog/3039303

你可能感兴趣的文章
Lua 常用的shell命令
查看>>
C++字符串流保存数据
查看>>
FBReaderv1.8.2启动,阅读流程,及显示研究
查看>>
微信公众号开启企业付款到用户
查看>>
POJ 2349 Arctic Network
查看>>
SRM 394(1-250pt)
查看>>
linux shell 编程
查看>>
URAL 1182. Team Them Up!
查看>>
设计模式:代理模式
查看>>
ES6学习笔记--let和const命令
查看>>
[工具开发] 分享两个基于Heapster 和 Influxdb 的 Grafana 监控仪表盘模板
查看>>
RabbitMQ 通过记日志来看routingkey
查看>>
sklearn help之岭回归 ridge regression
查看>>
unity3d资源打包总结
查看>>
HTTP协议和几种常见的状态码
查看>>
NET程序的代码混淆、加壳与脱壳
查看>>
Servlet Analysis
查看>>
awk if print
查看>>
加载数据库User表中创建人,显示到界面控件中,其中数据库定义是int 型 外键(User表)...
查看>>
c标签遍历List<Map<String, Object>> 数据格式
查看>>