谈谈模块化
Upcoming SlideShare
Loading in...5
×
 

谈谈模块化

on

  • 676 views

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

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

Statistics

Views

Total Views
676
Views on SlideShare
676
Embed Views
0

Actions

Likes
1
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

谈谈模块化 谈谈模块化 Presentation Transcript

  • 谈谈前端模块化 2011年06月07日 阳衡锋
  • 议程模块化介绍模块化演进过程模块化的实现手段Noah组件库中模块化的实践
  • 什么是模块?
  • 前端模块化的优点:•可维护性: 灵活架构,焦点分离,低耦合,高内聚 方便模块间的组合,分解 方便单个模块功能调试,升级 多人协作互不干扰•可测试性
  • 前端模块化的缺点:•性能损耗•系统分层•模块间的通信
  • 前端模块的边界:•功能边界•可重用的粒度•人员的分工
  • 万物皆模块:http://925html.com/techniques/auto-building-yui-3-custom-modules/
  • 前端模块: HTML + CSS + JavaScript
  • 演进-现状
  • 演进-CSS的模块化
  • 演进-现状的不足•一个文件完成独立的功能,而且粒度很细•细粒度的引入是为了防止引入无关的js,css•事实上适得其反,使用者往往徒简单,会引入多余的js css
  • 演进-使用loader 声明模块 模块=js+css 使用js加载 js,css,回调
  • 演进-使用loader优点:•减少了js,css的引入,防止重复加载缺点:•模块之间的依赖关系未知,加载顺序比较严格,后面模块依赖于前面模块。
  • 为loader添加依赖声明 声明模块 模块=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=”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
  • Commonjs规范来定义模块 模块定义:提 供的API在 export上 使用require引入无需关 心模块间的依赖
  • nodejs:一种commonjs的实现•require同步加载js,在web环境中比较困难
  • seajs:完美的模块化的实现•实现commonjs模块规范•依赖可追朔•按需引入,按序引入•配合打包部署工具
  • Seajs中的“声明”式依赖
  • 模块的通信机制:通知/监听 Notify Listen
  • 模块的通信机制•有效减少了模块之间的耦合•各模块都不知道彼此的存在•任何模块的缺失都不会影响整体运行•事件通知给第三方,监听也是监听第三方事件•整个应用变得强壮,可伸缩性增强•各模块各司其职,分工协作完成应用
  • Noah组件库的一些实践:组件库的特点:•依赖关系比较简单•模块粒度比较大处理办法:•压缩打包工具,提供部署方法•引入时防止缓存http://fe.baidu.com/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.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
  • Q&A
  • Thanks!