跟乐高学模块设计

跟乐高学模块设计

Transcript

1. 跟乐⾼高学模块设计
2. 乐⾼高的⽆无限可能 •  如果你有六块八颗凸起的长方体LEGO积木，这六块积木 可以砌出102,981,500多款组合。
3. 乐⾼高不只是⼩小孩⼦子的玩具 •  有趣视频
4. 乐⾼高有哪些特点？ •  简单，那怕是猴子也能学会。 •  一致，不同时期生产，不同地区生产的乐高还是能够很好 的组合在一起 •  复用，无论你是想做一艘船，一架飞机还是一座城堡，你 都可以用相同的零件组合。
5. 乐⾼高和软件⼯工程的交集 •  Cluelessness 无绪 o  即使对事物内在本质并不清楚，也可以很好的使用它 o  软件工程中的无绪是指：程序员无绪深入了解很多内容，也可以写出好的代码。
6. 乐⾼高和jQuery的共性 •  门槛低，使用者无需要了解jQuery的核心工作方式，就能 写出很好的代码。 •  jQuery的链式结构就像乐高一样可以实现不同模块间的对 接。 •  人性化的设计，构造一个对象并不是从最精简，最高效出 发，却是从最适用，最容易被理解出发。
7. 简单易⽤用是如何征服世界 口径 空枪重 初速 市场占有率 M16 5.56毫米  2.7  kg 975  m/s   AK-­‐‑47 7.62毫米 4.3千克 710  m/s 无可争议的 No.1 体积 性能结果 市场占有率 jQuery  1.4.1 23.82KB 48  ms 74.7% Mootools  1.22 20.47KB 47  ms 13.1% Prototype  1.6 29.85KB 36  ms 12.4% Dojo  1.5 30.38KB 19  ms 0.4% 想了解更多框架的性能比较请看：hGp://dante.dojotoolkit.org/taskspeed
8. 残酷的现实 •  开发过程是一场与时间的赛跑 •  维护是一个越陷越深的泥潭 •  迭代是一个垃圾场
9. 简单才好⽤用 •  当你今天接到需求，明天就要上线时，你不想去使用一个 你从来没用过的组件，因为往往调试的时间比开发的时间 还长。 •  所以在设计组件的时候，不要指望通过文档说明来弥补你 的API丑陋。
10. 简单才好⽤用 •  你要有所准备，因为你不知道为你接手维护代码的是不是 一个知道你底细的暴力狂。不要指望交接文档有人看，没 人相信这是最新的。 •  所以好的代码，好的组件本身就应该如同文档，清晰的结 构、合理的抽象、有价值的注释一个都不能少。
11. 简单才好⽤用 •  我相信一段代码在刚开始的时候都是清晰可读的，但是迭 代会让它变成一个东西放的乱七八糟的抽屉，一旦你失去 控制，这段代码将会变成一个恐怖的地下室，无人踏足。 •  所以在设计之初要有预见性，准备好后续的扩展，与其花 时间和别人一次又一次的解释，还不如花时间重构一次。
12. ⼀一致才可靠 •  没有什么比更新核心组件更让人担心了，更新后的组件是 否会引发新的问题？是不是满足各个场景的需要？ •  所以向前兼容是必须的，内聚、解耦、容错处理，不仅仅 提高了代码的安全性，还会让人留下可靠的印象。
13. ⼀一致才可靠 •  有一个问题往往被忽略，底层技术是否一致，可以想象木 头做的lego和塑料做的lego虽然尺寸一致，但是热胀冷 缩比不一致其结合必定是不稳的。 •  一致的抽象粒度，一致的API设计，一致的数据格式，一 致的返回约定，才能有可靠的结合。
14. 复⽤用才节省 •  流量是成本，开发量是成本，学习时间是成本。跨页面无 法被缓存，重复开发类似功能，过渡期间的临时解决方案 都是一种浪费。 •  所以我们需要跨页面的缓存复用，节省流量提高访问速度， 需要适应不同场景的组件复用，减少重复开发量减少用户 学习成本，需要API层面的复用，每个组件都应该具备一 些通用的API，已减少开发者的使用门槛。
15. 前端的展望 •  模块化JS，按需加载 •  BigPipe模式 •  代码规范之上的组件开发约定
16. 模块化JS加载 •  谁在做？ o  RequireJs o  YUI Loader o  LabJs o  RunJs o  SeeJs o  DoJs
17. 模块化JS加载 •  颗粒更小 •  维护更方便 •  更适合团队开发。
18. 有损的BigPipe •  BigPipe的最大的作用是用户端感知速度更快
19. 来⾃自新浪的⼀一组数据
20. 来⾃自淘宝的⼀一组数据
21. 有损的BigPipe •  Facebook的BigPipe由前后端共同完成，模式难以复制。 而国内使用BigPipe的主要有两种方式 o  服务器配置 combo o  纯前端BigPipe •  纯前端BigPipe有这样一个问题：连接数增加。带来的问 题是服务器CPU占用高，容易出现队列堵塞。
22. 有损的BigPipe •  基于现状分析，服务器CPU占用约20%，可见瓶颈并非在 此，特别是类似商品详情这种非常重的页面，页面打开速 度是网站的命脉，我认为这是值得的。
23. Q  &  A
24. 参考⽂文档 •  http://hax.github.com/2011/js_api_design/ 关于JavaScript库和框架的 API设计的思考两三例 •  http://blog.sina.com.cn/s/blog_482611850100xpb1.html 从微博的改版 谈网页重构——bigpipe中的页面构建优化 •  http://www.qianduan.net/particles-with-in-js-management-load- your-javascript-module.html用In.js颗粒化管理、加载你的Javascript模块 •  http://ued.taobao.com/blog/2011/05/13/2011-taobao-lottery-index- dev/ 2011彩票首页开发实践 •  http://www.infoq.com/cn/presentations/hjp-infoq-salon哪儿网的 JavaScript模块化之路 •  http://javascript.blogcn.com/articles/%E4%BB%8E%E4%B9%90%E9%AB %98%E4%B8%8A%E6%88%91%E4%BB%AC%E5%8F%AF%E4%BB %A5%E5%AD%A6%E5%88%B0%E4%BB%80%E4%B9%88%EF%BC%9F.html 从乐高上我们可以学到什么？