模块化介绍，演进过程，实现手段，Noah组件库的实践，模块化实现总结。

1. 谈谈前端模块化
2011年06月07日 阳衡锋

2. 议程
模块化介绍
模块化演进过程
模块化的实现手段
Noah组件库中模块化的实践

3. 什么是模块？

4. 前端模块化的优点：
•可维护性:
灵活架构，焦点分离，低耦合，高内聚
方便模块间的组合，分解
方便单个模块功能调试，升级
多人协作互不干扰
•可测试性

5. 前端模块化的缺点：
•性能损耗
•系统分层
•模块间的通信

6. 前端模块的边界：
•功能边界
•可重用的粒度
•人员的分工

7. 万物皆模块：
http://925html.com/techniques/auto-building-yui-3-custom-modules/

8. 前端模块：
HTML
+
CSS
+
JavaScript

9. 演进-现状

10. 演进-CSS的模块化

11. 演进-现状的不足
•一个文件完成独立的功能,而且粒度很细
•细粒度的引入是为了防止引入无关的
js,css
•事实上适得其反，使用者往往徒简单，会
引入多余的js css

12. 演进-使用loader
声明模块
模块=js+css
使用js加载
js,css,回调

13. 演进-使用loader
优点：
•减少了js,css的引入，防止重复加载
缺点：
•模块之间的依赖关系未知，加载顺序比较
严格，后面模块依赖于前面模块。

14. 为loader添加依赖声明
声明模块
模块=js+css+
依赖
Base模块自
动加载
按需引入，无需考虑个模块内部依赖

15. loader不足
http请求太多?
•尝试后端combo服务
•深入浏览器javascript加载机制
依赖关系不智能？
•重新审视我们的“模块”
并不是每个模块都能如此加载，如My97DP

16. 浏览器脚本加载
分为两个阶段:下载阶段，执行阶段
•按需加载，并行
•脚本加载阻塞 下载
VS •严格的依赖关系，
•浏览器并发限制 脚本执行顺序

17. 脚本加载策略：

18. 脚本加载执行几种控制方法：
1.给script设置src属性但是并不把dom节点append到head中，实现预加载，当dom追加
到head中时脚本执行(IE中使用该方法)。
2.相同domain。使用XHR对象加载。然后使用eval(xhr.responseText)来执行脚本。
3.非IE浏览器，使用<script type=”text/cache”></script>来预先加载脚本。然后将
type=”text/javascript”来执行脚本。
(类似的思路还可以使用(new Image().src=”xx.js” 来将脚本加载到缓存中，然后使用DOM
操作添加script节点)
4.使用html5中<script async ></script>来保证执行顺序
5.单个js加载直接使用DOM操作。

19. 一些脚本加载器
•LabJs
•Requirejs

20. Combo服务
YUI combo：按需拼接js，打包，混淆压缩
需要有后端能读取的依赖关系才能完成按
需加载
Tangram的自动引入 /import.php?f=baidu.ui.Tab

21. Commonjs规范来定义模块
模块定义:提
供的API在
export上
使用require引入无需关
心模块间的依赖

22. nodejs:一种commonjs的实现
•require同步加载js，在web环境中比较困难

23. seajs：完美的模块化的实现
•实现commonjs模块规范
•依赖可追朔
•按需引入，按序引入
•配合打包部署工具

24. Seajs中的“声明”式依赖

25. 模块的通信机制:通知/监听
Notify
Listen

26. 模块的通信机制
•有效减少了模块之间的耦合
•各模块都不知道彼此的存在
•任何模块的缺失都不会影响整体运行
•事件通知给第三方，监听也是监听第三方事件
•整个应用变得强壮，可伸缩性增强
•各模块各司其职，分工协作完成应用

27. Noah组件库的一些实践：
组件库的特点：
•依赖关系比较简单
•模块粒度比较大
处理办法：
•压缩打包工具，提供部署方法
•引入时防止缓存
http://fe.baidu.com/doc/noah/nuit/#uitext/ui_devcomp.text

28. 总结：
模块化实现的技术点：
•模块本身的定义，注册
•依赖声明，追朔机制
•开发阶段的加载机制
•打包部署机制
•模块间的通信机制

29. 参考资料：
•Commonjs模块规范：http://wiki.commonjs.org/wiki/Modules/1.1
•动态脚本执行顺序：http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order
•模块化： http://baike.baidu.com/view/182267.htm
•Labjs: http://labjs.com
•Requirejs:http://requirejs.org/
•Nodejs: http://nodejs.org
•Seajs:http://seajs.org/
•Kissy的前端模块化实践 http://www.slideshare.net/yiminghe/kissy-6637677
•可伸缩性架构： http://www.slideshare.net/nzakas/scalable-javascript-application-
architecture
•再读可扩展的javascript架构:
http://hi.baidu.com/ywdblog/blog/item/f4f6680e15737cc57acbe100.html

30. Q&A

31. Thanks!