跟乐高学模块设计

乐高的无限可能• 如果你有六块八颗凸起的长方体 LEGO积木，这六块积木可以砌出102,981,500 多款组合。

乐高不只是小孩子的玩具• 有趣视频

乐高有哪些特点？• 简单，那怕是猴子也能学会。

• 一致，不同时期生产，不同地区生产的乐高还是能够很好的组合在一起

• 复用，无论你是想做一艘船，一架飞机还是一座城堡，你都可以用相同的零件组合。

乐高和软件工程的交集• Cluelessness 无绪

o 即使对事物内在本质并不清楚，也可以很好的使用它

o 软件工程中的无绪是指：程序员无绪深入了解很多内容，也可以写出好的代码。

乐高和 jQuery的共性• 门槛低，使用者无需要了解 jQuery的核心工作方式，就能写出很好的代码。

• jQuery的链式结构就像乐高一样可以实现不同模块间的对接。

• 人性化的设计，构造一个对象并不是从最精简，最高效出发，却是从最适用，最容易被理解出发。

简单易用是如何征服世界口径 空枪重 初速 市场占有率

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%想了解更多框架的性能比较请看： http://dante.dojotoolkit.org/taskspeed

残酷的现实• 开发过程是一场与时间的赛跑• 维护是一个越陷越深的泥潭• 迭代是一个垃圾场

简单才好用• 当你今天接到需求，明天就要上线时，你不想去使用一个你从来没用过的组件，因为往往调试的时间比开发的时间还长。

• 所以在设计组件的时候，不要指望通过文档说明来弥补你的 API丑陋。

简单才好用• 你要有所准备，因为你不知道为你接手维护代码的是不是一个知道你底细的暴力狂。不要指望交接文档有人看，没人相信这是最新的。

• 所以好的代码，好的组件本身就应该如同文档，清晰的结构、合理的抽象、有价值的注释一个都不能少。

简单才好用• 我相信一段代码在刚开始的时候都是清晰可读的，但是迭代会让它变成一个东西放的乱七八糟的抽屉，一旦你失去控制，这段代码将会变成一个恐怖的地下室，无人踏足。

• 所以在设计之初要有预见性，准备好后续的扩展，与其花时间和别人一次又一次的解释，还不如花时间重构一次。

一致才可靠• 没有什么比更新核心组件更让人担心了，更新后的组件是

否会引发新的问题？是不是满足各个场景的需要？

• 所以向前兼容是必须的，内聚、解耦、容错处理，不仅仅提高了代码的安全性，还会让人留下可靠的印象。

一致才可靠• 有一个问题往往被忽略，底层技术是否一致，可以想象木

头做的 lego和塑料做的 lego 虽然尺寸一致，但是热胀冷缩比不一致其结合必定是不稳的。

• 一致的抽象粒度，一致的 API设计，一致的数据格式，一致的返回约定，才能有可靠的结合。

复用才节省• 流量是成本，开发量是成本，学习时间是成本。跨页面无

法被缓存，重复开发类似功能，过渡期间的临时解决方案都是一种浪费。

• 所以我们需要跨页面的缓存复用，节省流量提高访问速度，需要适应不同场景的组件复用，减少重复开发量减少用户学习成本，需要 API 层面的复用，每个组件都应该具备一些通用的 API，已减少开发者的使用门槛。

前端的展望• 模块化 JS，按需加载• BigPipe模式• 代码规范之上的组件开发约定

模块化 JS 加载• 谁在做？

o RequireJso YUI Loadero LabJso RunJso SeeJso DoJs

模块化 JS 加载• 颗粒更小• 维护更方便• 更适合团队开发。

有损的 BigPipe• BigPipe的最大的作用是用户端感知速度更快

来自新浪的一组数据

来自淘宝的一组数据

有损的 BigPipe• Facebook的 BigPipe 由前后端共同完成，模式难以复制。

而国内使用 BigPipe的主要有两种方式

o 服务器配置 comboo 纯前端 BigPipe

• 纯前端 BigPipe有这样一个问题：连接数增加。带来的问题是服务器 CPU 占用高，容易出现队列堵塞。

有损的 BigPipe• 基于现状分析，服务器 CPU 占用约 20%，可见瓶颈并非在此，特别是类似商品详情这种非常重的页面，页面打开速度是网站的命脉，我认为这是值得的。

Q & A

参考文档• 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 从乐高上我们可以学到什么？