规范java script开发模式 李国新

规范JavaScript开发模式

开心网 李国新

——海贝网CommonJS实践之路

关于我

李国新( 1985.02 )，哈尔滨工业大学计算机系退学生.曾就职百度WEB前端研发部( 2007.11 - 2010.03 ).也为CKEditor提供过一段时间的Patch.目前在开心网专职JavaScript 开发，技术经理( 2010.06 - 现在 ).

开心网主页：http://www.kaixin001.com/home/?uid=109364豆 瓣主页：http://www.douban.com/people/song/

Q Q ：394419050

关于开心网前端团队

尼玛这么大个开心网，我们现在也就十来个专职前端开发人员啊！！！缺人缺到内伤啊，有木有！！！

我们不差钱啊！！！我们玩桌上足球玩到手酸啊！！！我们打台球打到脚软啊！！！

其他的什么XBox，K歌，游泳，乒乓球，羽毛球等只要有兴趣也随便 玩呐！！！

敢不敢给个简历啊！！！

扔给我( guoxin@corp.kaixin001.com )就行！！！或者上我们的招聘主页在线投递！！！

各种虚位以待啊，亲！！！

关于海贝网( haibei.com )

议程

模块化前的混乱

CommonJS为何是解救之道

海贝网的Module与App机制

模块化后的收获

Q & A

混乱之源

滥用JavaScript的灵活性

1000个JavaScript程序员能写出1000种风栺各异的实现。

熟练程度不同，会导致不同代码中运用的语言特性不同。

全局变量，闭包，命名空间，事件绑定等不同方式都会导致复杂度不同。

灵活性强是好的，但需要局限它的活动范围。

无明确的JS资源管理机制

把JS文件放在页面顶部或者尾部

随意在页面中添加inline script

不同文件间没有明显的依赖关系，增加后期维护成本

COMMONJS解救之道

CommonJS简介

一套关于JavaScript生态系统实现的规范，

规定了某些功能模块需要实现的API。

http://wiki.commonjs.org/wiki/CommonJS

仅仅是一套规范，不是框架或者函数库，需要自

己去实现。

Node.js, CouchDB等著名项目是其实现，国内项

目有 SeaJS。

Module s/1.1规范

定义了一个模块所具有的特性

模块本身是天然封装的，必须通过特定方式（require）才能被引入

必须通过特定方式(exports)暴露接口

这种规则使得，只要你进入了这个系统，你就必须按照系统的规则行事

海贝网COMMONJS实践

系统概况

整个项目由Base， Module，App构成

Base实现CommonJS Module规范

Module为可重用的功能模块

App是Module的特例，实现业务逻辑代码

JS代码一览

约150个文件

Module的特点

供App调用，是可重用的组件。

文件加载时，不执行模块定义代码，延迟到require调用时才执行。

模块也可能需要依赖其他模块。

核心类库，如jQuery，swfUpload，tinyEditor也是模块。

App的特点

App用于实现页面业务逻辑。

App需要依赖核心库和一些module。

App有一个统一的代码执行入口(main函数)。

App中，事件只需要声明，不需要自行绑定。

App中，可以指定一个container(默认为body),来标记这个App的作用范围。

模块化后的收获

清晰的文件依赖关系

代码本身声明了依赖关系，后续维护代价大大降

低，如果某个模块卸载掉，你能花费较少的代价 知道哪些文件是可以删除的。

更有利于线上部署打包，很容易衡量哪些文件应该属于同一个包。

更高的代码重用率

模块的存在使得copy & repaste现象大大降低

不同项目间的代码复用率也能提高，迁移成本降低， 模块本身是可独立的

团队效率整体提高

App让业务逻辑非常清楚。

统一的代码入口，统一的事件绑定让阅读代码变得相当容易。

代码开发模式一致，开发人员能很快接管和维护团队其他人员写的代码。

一些其他特性

0.1%的inline代码

Html中，几乎看不到inline代码，杜绝了在元素属性中进行事件绑定。

全局inline代码用于配置信息。

大多数事件采用delegate方式

统一进行绑定，开发人员无需关注内部实现

存在一些问题，比如某些元素阻止了事件冒泡

统一的Ajax实现

仸何Ajax请求，服务端返回一致的数据接口

JS代码中，统一了Ajax调用方式

默认缓存访问过的数据

全局处理Click/Submit事件

防止代码未加载完成前，用户点击无响应情形

代码未加载前，如果用户触发了click事件或者submit事件，程序将等待，代码加载完成后，自动再一次触发该事件。

拥抱COMMONJS

在你的项目中运用CommonJS

自行实现CommonJS规范

根据你自己项目的实际需要，不一定非得百分百 实现规范

采用开源实现，如SeaJS ( seajs.com )

Q & A

谢谢！