谈谈模块化

985 views
801 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
985
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

谈谈模块化

  1. 1. 谈谈前端模块化 2011年06月07日 阳衡锋
  2. 2. 议程模块化介绍模块化演进过程模块化的实现手段Noah组件库中模块化的实践
  3. 3. 什么是模块?
  4. 4. 前端模块化的优点:•可维护性: 灵活架构,焦点分离,低耦合,高内聚 方便模块间的组合,分解 方便单个模块功能调试,升级 多人协作互不干扰•可测试性
  5. 5. 前端模块化的缺点:•性能损耗•系统分层•模块间的通信
  6. 6. 前端模块的边界:•功能边界•可重用的粒度•人员的分工
  7. 7. 万物皆模块:http://925html.com/techniques/auto-building-yui-3-custom-modules/
  8. 8. 前端模块: HTML + CSS + JavaScript
  9. 9. 演进-现状
  10. 10. 演进-CSS的模块化
  11. 11. 演进-现状的不足•一个文件完成独立的功能,而且粒度很细•细粒度的引入是为了防止引入无关的js,css•事实上适得其反,使用者往往徒简单,会引入多余的js css
  12. 12. 演进-使用loader 声明模块 模块=js+css 使用js加载 js,css,回调
  13. 13. 演进-使用loader优点:•减少了js,css的引入,防止重复加载缺点:•模块之间的依赖关系未知,加载顺序比较严格,后面模块依赖于前面模块。
  14. 14. 为loader添加依赖声明 声明模块 模块=js+css+ 依赖 Base模块自 动加载按需引入,无需考虑个模块内部依赖
  15. 15. loader不足http请求太多?•尝试后端combo服务•深入浏览器javascript加载机制依赖关系不智能?•重新审视我们的“模块”并不是每个模块都能如此加载,如My97DP
  16. 16. 浏览器脚本加载分为两个阶段:下载阶段,执行阶段 •按需加载,并行•脚本加载阻塞 下载 VS •严格的依赖关系,•浏览器并发限制 脚本执行顺序
  17. 17. 脚本加载策略:
  18. 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. 19. 一些脚本加载器•LabJs•Requirejs
  20. 20. Combo服务YUI combo:按需拼接js,打包,混淆压缩需要有后端能读取的依赖关系才能完成按需加载Tangram的自动引入 /import.php?f=baidu.ui.Tab
  21. 21. Commonjs规范来定义模块 模块定义:提 供的API在 export上 使用require引入无需关 心模块间的依赖
  22. 22. nodejs:一种commonjs的实现•require同步加载js,在web环境中比较困难
  23. 23. seajs:完美的模块化的实现•实现commonjs模块规范•依赖可追朔•按需引入,按序引入•配合打包部署工具
  24. 24. Seajs中的“声明”式依赖
  25. 25. 模块的通信机制:通知/监听 Notify Listen
  26. 26. 模块的通信机制•有效减少了模块之间的耦合•各模块都不知道彼此的存在•任何模块的缺失都不会影响整体运行•事件通知给第三方,监听也是监听第三方事件•整个应用变得强壮,可伸缩性增强•各模块各司其职,分工协作完成应用
  27. 27. Noah组件库的一些实践:组件库的特点:•依赖关系比较简单•模块粒度比较大处理办法:•压缩打包工具,提供部署方法•引入时防止缓存http://fe.baidu.com/doc/noah/nuit/#uitext/ui_devcomp.text
  28. 28. 总结:模块化实现的技术点:•模块本身的定义,注册•依赖声明,追朔机制•开发阶段的加载机制•打包部署机制•模块间的通信机制
  29. 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. 30. Q&A
  31. 31. Thanks!

×