- 全局变量污染,例如Minisite定义导致的各种冲突
- 代码重用,如果能将这些平时积累起来的JS重用的话会省很多事(每次开发专题都要copy minisite getcookie vip_index)
- 看看首页开发的时候已经使用了RequireJS,但是有一些不太理想的地方,仅仅用到了require的异步加载功能,而没有把它作为将js模块化的基础
- RequireJS是AMD规范(https://github.com/amdjs/amdjs-api/wiki/AMD AMD Definition)实现的最好者之一
- RequireJS提供了一个JS压缩工具,开发完成后可以利用它在解决js依赖性关系的同时压缩所有JS文件,明显减少http请求数,减轻服务器及带宽压力
当然,RequireJS为我们提供便利之处的同时也要求我们付出一定的代价,就是要在代码中引入额外15KB的JS文件(minified)
RequireJS - 基本教程
JSLINT for Sublime 或者最原始的 JSLINT - 检测代码写法是否规范
QUnit JS单元测试工具,为jQuery所使用 - 测试用例
R.JS RequireJS提供的用于Node和Rhino的适配器及JS压缩工具 - 配合Node压缩生成生产环境使用的JS文件
Node 这里主要是为R.js提供基本环境,要配合NodeJS才能进行压缩 - 命令行工具
JSDOC 生成JS文档注释 - 为后来的模块使用者提供文档帮助
BackBone JS的MVC框架 - 整合后台与前端交互展示,不再无脑的用js拼接html
-- appDir | 根目录
-- doc | 模块代码帮助文档输出位置
-- jsdoc | JSDOC3源文件位置,用于输出JS文件中的注释成为文档
-- src | 我们根据RequireJS规范自己编写的JS模块文件目录,包括RequireJS本身
-- tests | 测试用例目录
-- r.js | 主要用于实际项目中,完成开发后将所有涉及到的JS压缩到同一个文件中,减少HTTP请求数,需要[配合Node使用](http://requirejs.org/docs/optimization.html "使用方法说明页")
-- require.js | 供test中的测试用例本地调用
-- rundoc.bat | 生成JS帮助文档的简易批处理命令工具
-- READ.md | 就是现在读到的这个文件啦!
-- 编码规范 | 自己胡乱从[jQuery](http://contribute.jquery.org/style-guide/ "Style Guide")翻译的,主要还是靠JSLINT
我想重点提到的是RequireJS中如何定义模块,这样每个模块的实例化都会在RequireJS的callback中作为一个参数传入,避免了一开始提到的全局变量污染
JS文件压缩命令行调用方式(http://requirejs.org/docs/optimization.html#onejs)
node pathto/r.js -o baseUrl=pathtobase paths.jquery=pathtojquery(empty if no need): name=relativepathtobase/srcjsfilename(without extension ".js") out=relativepathtobase/buildjsfilename(full name with ".js")
上面示例中的###钢铁侠###专题第一个使用backbone+jquery+underscore+prototype完成的专题,backbone大量减轻了前端编码工作,可以让开发者更专心考虑逻辑问题 Backbone强依赖Underscore,但对于jquery是部分依赖,例如View中的events设置,可视情况使用 Underscore的话可以在平时操作一些基本代码的时候考虑使用,有非常优秀的基础功能供使用