• 1. javascript module pattern
  • 2. 引言js引擎发展,性能提升; 多平台的应用: 服务器(nodejs)-v8; 跨平台游戏app(cocos2d-js)-spidermonkey; 单页面web应用; 客户端开发。2
  • 3. 目录准备知识 module模式的产生 用法详述 3
  • 4. 对象字面量 - {} 使用大括号{}把键值对包起来,键值对以逗号,分割 var obj = { key1 : 'value1' , key2 : function value2( ) { } } 可以在对象外部增加新属性: obj.key3 = 123; 函数 - function 可以在函数内部定义函数; 可以做为返回值返回。 作用域和执行上下文 - scope&execution context 子函数拥有自己的作用域,并可以访问父函数的作用域 依此类推形成作用域链。 闭包 - closures 函数的特性 + 作用域和执行上下文 = js的闭包特性准备作用域: function parent(){ var _p1 = 1; function child(){ var _c1 = 2; _p1 = 3; } // _c1 }函数: function a(){ function b(){ } return b; } var c = a(); c();4
  • 5. 开始刚学习JavaScript的时候,一般都是用下面的方式来写代码: 优点:简单,方便~ 问题:谁都可以来改年龄,我们要“私有化”5
  • 6. 然后让我们尝试私有化变量。下面的代码看起来挺不错的,但私有变量可以被随便访问。6
  • 7. 最后这样做好像可以了7
  • 8. new只要new后面的构造器返回一个引用对象(数组,对象,函数等),都将覆盖自己的对象;但如果返回一个原始类型,那么就返回自己的对象。8
  • 9. 发现经过两次改造,我们发现 最后这种方式很好的解决了我们私有化的问题; 以它为基础,做一些抽象和变形,命名为module模式。 9
  • 10. MODULE模式概述关于module模式,最早由YUI的成员提出了这个概念; 使用闭包的方式封装,返回的是一个对象; 解决的主要的问题是"私有"和"公有"的问题,保护了全局作用域。 10
  • 11. 全局作用域的重要性"少写一个`var`是如何毁掉我们网站的" http://www.chinaz.com/web/2012/0104/230065.shtml 讲述了因为在用nodejs处理多用户并发请求时,把一个局部变量少写了var导致他变成全局变量,然后使得用户的请求数据乱了套的故事。 一个页面有多个文件,每个文件都可能有全局变量。 多人协作开发,鉴于大家的对一些变量命名时大都会参考有道词典,写出一些自己都不认识的单词,重名的几率就更高了。 11
  • 12. Module模式的用法匿名闭包 全局引入 扩展 松耦合扩展 模块导出 子模块 / 命名空间 继承与重载 12
  • 13. 匿名闭包13
  • 14. 匿名闭包我们创建了一个匿名的函数,并立即执行它。 例子里面,由于外部无法引用它内部的变量,因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。 有的函数只需要执行一次,其内部变量无需维护。 比如UI的初始化。 14
  • 15. 立即执行的函数立即执行的函数如何写 !function () { /* code */ } (); 0,function () { /* code */ } (); (function () { /* code */ } ()); //推荐 (function () { /* code */ })(); 要想达到立即执行一个函数也有多种方法:原理消除语法歧义,把一个函数声明变成一个函数表达式。15
  • 16. 全局引入16
  • 17. 全局引入的应用场景定义jQuery插件:17
  • 18. 全局引入的应用场景-扩展 问题: 对于module模式而言,我们的代码模块要在一个文件中声明。 但是项目大了,必须拆分文件。 做法:首先我们引入模块,然后为其添加属性,随后将其导出。 18
  • 19. 全局引入的应用场景-扩展19
  • 20. 全局引入的应用场景-扩展这样写有一个问题,我们先引入b.js ,在引入a.js的话就: 20
  • 21. 全局引入的应用场景-松耦合扩展说明: 1)为了解决上面这个问题。 2)异步加载js文件时,需要解决多个文件加载顺序的问题。 我们只需要简单改造,就能解决这个问题。 21
  • 22. 全局引入的应用场景-松耦合扩展22
  • 23. 逻辑“或”运算符|| 运算符,双目运算符。可接受两个不同类型的值或表达式,返回值不一定是布尔值。 返回的是第一个做布尔运算后得到true的原始值。 你可能会问,if(xx||xx) 不是应该用布尔来做判断吗?那 || 返回都不是布尔那怎么办? js会做自动类型转换,其实是把 || 的返回值再做一次类型转换再来做条件判断的。 'hello kitty!'是非空字符串,会被自动转换为true。23
  • 24. 模块导出24
  • 25. 模块导出对代码进行封装,隐藏模块中功能的具体实现; 保存程序运行过程中的一些中间值; 这是module模式最典型的用法。25
  • 26. 子模块 / 命名空间这种方法很简单,一般和我们刚刚介绍的一些用法一起使用。26
  • 27. 继承与重载想用module模式实现继承,怎么破? module模式生下来就不是为解决继承问题的,但是如果你就是这么任性,我们也可以试试。 27
  • 28. 继承与重载28
  • 29. 总结优点: 简单,好理解,代码整洁。 很好解决私有和公有,模块化等问题。 能保存运行时数据。 ... 缺点: ??29
  • 30. thank youby PPP