Yet Another Frontend Module          System       July 2011 @W3CTech
此前...●   海贝网: CommonJS 实践    http://www.slideshare.net/winnersong/java-script-84●   白社会: 视图模式    http://www.slideshare.net...
XKCD: Standards
理解基础●   “We must go deeper”●   协议: HTTP●   浏览器环境●   库与框架●   一点计算机科学●   没什么神秘的
解决问题●   敏感●   迭代前进●   简单实现
问题:声明 & 加载依赖
<script src=”/js/jquery-1.6.2.js”><!-- 依赖关系 = “项目经验” --><script src=”/js/ads.js”>
KISSY# /src/node/base.jsKISSY.add(node/base, function(S,DOM) {  return { ... }}, {  requires: [“dom”]})
问题:打字太多
预处理●   宏( C, Lisp)●   源代码编译到线上代码●   JS 没有...自行设计
MooTools# /Source/Element/Element.js/*---requires: [Window, Document, …]provides: [Element, Elements, …]---*/
MooTools Builder./packager build Core/Element
问题:构建
中间件●   服务器端●   “ 动态”响应请求●   责任链模式●   Python – WSGI, Ruby – Rack ...
问题:调试
抽象●   “ 暂时不关心”●   产品开发: 不关心 JS 文件的引入方式●   开发环境: 分别引入文件●   生产环境: 提前拼接/压缩●   单一职责原则
问题:CSS? 图片?
取舍成本         时         间
TL;DR●   自己写一个●   横向扩展●   对问题敏感
更多通用 JS 时代的模块机制和编译工具 – @ dexteryyhttp://www.slideshare.net/dexter_yy/js-6228773静态网页资源的管理和优化 – David Wei (Facebook)http://g...
Upcoming SlideShare
Loading in...5
×

July.2011.w3ctech

574

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
574
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

July.2011.w3ctech

  1. 1. Yet Another Frontend Module System July 2011 @W3CTech
  2. 2. 此前...● 海贝网: CommonJS 实践 http://www.slideshare.net/winnersong/java-script-84● 白社会: 视图模式 http://www.slideshare.net/slalx/ss-6377470
  3. 3. XKCD: Standards
  4. 4. 理解基础● “We must go deeper”● 协议: HTTP● 浏览器环境● 库与框架● 一点计算机科学● 没什么神秘的
  5. 5. 解决问题● 敏感● 迭代前进● 简单实现
  6. 6. 问题:声明 & 加载依赖
  7. 7. <script src=”/js/jquery-1.6.2.js”><!-- 依赖关系 = “项目经验” --><script src=”/js/ads.js”>
  8. 8. KISSY# /src/node/base.jsKISSY.add(node/base, function(S,DOM) { return { ... }}, { requires: [“dom”]})
  9. 9. 问题:打字太多
  10. 10. 预处理● 宏( C, Lisp)● 源代码编译到线上代码● JS 没有...自行设计
  11. 11. MooTools# /Source/Element/Element.js/*---requires: [Window, Document, …]provides: [Element, Elements, …]---*/
  12. 12. MooTools Builder./packager build Core/Element
  13. 13. 问题:构建
  14. 14. 中间件● 服务器端● “ 动态”响应请求● 责任链模式● Python – WSGI, Ruby – Rack ...
  15. 15. 问题:调试
  16. 16. 抽象● “ 暂时不关心”● 产品开发: 不关心 JS 文件的引入方式● 开发环境: 分别引入文件● 生产环境: 提前拼接/压缩● 单一职责原则
  17. 17. 问题:CSS? 图片?
  18. 18. 取舍成本 时 间
  19. 19. TL;DR● 自己写一个● 横向扩展● 对问题敏感
  20. 20. 更多通用 JS 时代的模块机制和编译工具 – @ dexteryyhttp://www.slideshare.net/dexter_yy/js-6228773静态网页资源的管理和优化 – David Wei (Facebook)http://goo.gl/n9HBw
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×