狠狠撸

谈谈前端模块化

2011年06月07日阳衡锋

议程

模块化介绍

模块化演进过程

模块化的实现手段

Noah组件库中模块化的实践

前端模块化的优点：

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

前端模块化的缺点：

?性能损耗
?系统分层
?模块间的通信

前端模块的边界：

?功能边界
?可重用的粒度
?人员的分工

万物皆模块：

http://925html.com/techniques/auto-building-yui-3-custom-modules/

前端模块：

HTML
+
CSS
+
JavaScript

演进-现状的不足

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

演进-使用濒辞补诲别谤

声明模块
模块=js+css

使用js加载
js,css,回调

演进-使用濒辞补诲别谤

优点：
?减少了js,css的引入，防止重复加载

缺点：
?模块之间的依赖关系未知，加载顺序比较
严格，后面模块依赖于前面模块。

为濒辞补诲别谤添加依赖声明

声明模块
模块=js+css+
依赖

Base模块自
动加载

按需引入，无需考虑个模块内部依赖

loader不足
http请求太多?
?尝试后端combo服务
?深入浏览器javascript加载机制

依赖关系不智能？
?重新审视我们的“模块”

并不是每个模块都能如此加载，如My97DP

浏览器脚本加载
分为两个阶段:下载阶段，执行阶段

?按需加载，并行
?脚本加载阻塞下载
VS ?严格的依赖关系，
?浏览器并发限制脚本执行顺序

脚本加载执行几种控制方法：
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=/slideshow/ss-13821260/13821260/”xx.js” 来将脚本加载到缓存中，然后使用DOM
操作添加script节点)

4.使用html5中<script async ></script>来保证执行顺序

5.单个js加载直接使用DOM操作。

一些脚本加载器

?LabJs
?Requirejs

Combo服务
YUI combo：按需拼接js，打包，混淆压缩

需要有后端能读取的依赖关系才能完成按
需加载
Tangram的自动引入 /import.php?f=baidu.ui.Tab

颁辞尘尘辞苍箩蝉规范来定义模块
模块定义:提
供的API在
export上

使用require引入无需关
心模块间的依赖

nodejs:一种commonjs的实现

?require同步加载js，在web环境中比较困难

seajs：完美的模块化的实现

?实现commonjs模块规范
?依赖可追朔
?按需引入，按序引入
?配合打包部署工具

厂别补箩蝉中的“声明”式依赖

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

Listen

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

Noah组件库的一些实践：
组件库的特点：
?依赖关系比较简单
?模块粒度比较大
处理办法：

?压缩打包工具，提供部署方法
?引入时防止缓存
http://fe./doc/noah/nuit/#uitext/ui_devcomp.text

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

参考资料：
?Commonjs模块规范：http://wiki.commonjs.org/wiki/Modules/1.1
?动态脚本执行顺序：http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order
?模块化： http://baike./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./ywdblog/blog/item/f4f6680e15737cc57acbe100.html

狠狠撸

谈谈模块化

More Related Content

谈谈模块化