1. Yet Another Frontend Module
System
July 2011 @W3CTech

2. 此前...
● 海贝网: CommonJS 实践
http://www.slideshare.net/winnersong/java-script-84
● 白社会: 视图模式
http://www.slideshare.net/slalx/ss-6377470

3. XKCD: Standards

4. 理解基础
● “We must go deeper”
● 协议: HTTP
● 浏览器环境
● 库与框架
● 一点计算机科学
● 没什么神秘的

5. 解决问题
● 敏感
● 迭代前进
● 简单实现

6. 问题:
声明 & 加载依赖

7. <script src=”/js/jquery-1.6.2.js”>
<!-- 依赖关系 = “项目经验” -->
<script src=”/js/ads.js”>

8. KISSY
# /src/node/base.js
KISSY.add('node/base', function(S,
DOM) {
return { ... }
}, {
requires: [“dom”]
})

9. 问题:
打字太多

10. 预处理
● 宏( C, Lisp)
● 源代码编译到线上代码
● JS 没有...自行设计

11. MooTools
# /Source/Element/Element.js
/*
---
requires: [Window, Document, …]
provides: [Element, Elements, …]
---
*/

12. MooTools Builder
./packager build Core/Element

13. 问题:
构建

14. 中间件
● 服务器端
● “ 动态”响应请求
● 责任链模式
● Python – WSGI, Ruby – Rack ...

15. 问题:
调试

16. 抽象
● “ 暂时不关心”
● 产品开发: 不关心 JS 文件的引入方式
● 开发环境: 分别引入文件
● 生产环境: 提前拼接/压缩
● 单一职责原则

17. 问题:
CSS? 图片?

18. 取舍
成
本
时
间

19. TL;DR
● 自己写一个
● 横向扩展
● 对问题敏感

20. 更多
通用 JS 时代的模块机制和编译工具 – @ dexteryy
http://www.slideshare.net/dexter_yy/js-6228773
静态网页资源的管理和优化 – David Wei (Facebook)
http://goo.gl/n9HBw