写在前面

记得当时刷笔试题的时候有了解过“前端工程化”，无非就是用自动化工具帮助开发人员完成一些小细节，提高工作效率之类的，不过当时可没想到可维护性这么远

构建项目 -> 模块化开发 -> 复用 -> 测试 -> 调试 -> 验证 -> 发布 -> 版本控制，这整个流程的很多环节都可以用自动化工具解放人力，提高项目的可维护性

一.自动化的优缺点

js开发中使用自动构建系统的优缺点如下：

1.优点

• 自动源码控制能够区分清楚用于调试的代码和将来发布的代码，开发阶段不必估计影响线上产品

• 静态代码分析能自动完成（JSLint、JSHint）

• 发布前可以进行多种方式的加工（合并文件、压缩代码）

• 自动化测试，能很快发现错误

• 很容易重做一次重复性的工作（比如再次合并文件、压缩代码）

2.缺点

• 有些开发人员用不习惯，因为改动代码之后要重新构建一次，而不是传统的保存文件，刷新页面

• 部署到线上的产品代码与开发阶段的代码不同，难以追踪bug

• 经验不足的开发人员可能不会用这种自动构建系统

二.文件目录结构

一般不同的项目需要不同的目录结构，但下面给出的几条原则是广泛适用的：

1. 一个对象对应一个文件

   避免多名开发人员修改冲突，文件越少，冲突的概率越大，一个对象对应一个文件能最小化这种风险

2. 把相关文件用文件夹分组

   这样管理代码更容易根据功能定位对应代码

3. 分离第三方代码

   最好用CDN引入第三方库，这样就不用对第三方代码进行多余的源码控制了

4. 分离构建产物

   应该把构建的产物放在另一个文件夹里，不要进行源码控制，避免无意中反复构建带来的时耗

5. 把测试代码放近点

   要把测试代码放在很容易找到的地方，比如和源码放在一起，或者test/目录下与源码路径相似的位置

三.自动化的步骤

1.使用自动构建工具

• Ant：基于Java的

• Buildy：基于NodeJS的

• Gmake：UNIX粉喜欢的

• Jammit：基于Ruby的

• Jasy：基于Pathon的

• Rake：基于Ruby的

• Sprockets：基于Rack的

2.使用自动代码检查工具

• JSLint：道格拉斯做的好工具

• JSHint：和上面的差不多，但配置选项更多

3.使用自动合并/加工文件的工具

合并文件，插入版本号什么的，用第一步用的自动构建工具就能搞定

4.使用代码瘦身/压缩工具

瘦身和压缩的区别是瘦身是针对代码语法的优化，让源码更短；而压缩就是把纯文本的源码文件变成别的更小的文件，压缩后不能再编辑，除非先解压

瘦身工具比较多，作者推荐了几个：

• YUI Compressor：Yahoo!的，基于Java，能缩短变量名、去掉空白字符、去掉注释，还能给CSS瘦身

• Closure Complier：Google的，基于Java，能进行深层次优化（去掉不用的方法，把只用一次的方法扔进闭包），比YUI的瘦身效果更好

• UglifyJS：基于NodeJS，还能合并var语句

5.使用文档自动生成工具

• JSDoc：基于java的

• YUI Doc：用js写的

• 其它：Docco、Dojo Documentation Tools、JoDoc、Natural Docs、NDoc、PDoc

6.使用自动测试工具

• YUI Test Selenium Driver：（作者总是喜欢把Yahoo!的东西排前面，好员工哇）YUI的单元测试框架

• Yeti：利用各个浏览器进行js测试

• PhantomJS：提供WebKit浏览器环境，可以配合QUnit和Jasmine

• JsTestDriver：Google的单元测试框架，支持自动浏览器测试

• Jasmine：行为驱动的js测试框架

• QUnit：JQuery的单元测试框架

• Selenium：功能测试框架，支持浏览器测试

7.把所有自动化工具整合起来

应该至少构建3个版本：

• 开发版

  要求是尽量快，否则影响开发人员火力全开

  具体任务是：清理文件 -> 初始化构建环境 -> 检查代码 -> 合并文件

  注意：不要把自动测试环节放进来，因为费时间，开发版构建要求尽量快

• 集成版

  用来排查错误，应该每隔一段时间运行一次检查并报告错误

  具体任务是：代码瘦身 -> 测试 -> 文档生成

  注意：文档生成环节是可选的，因为加进来可能会影响错误检查（错误可能来自文档生成环节）

• 发布版

  要保证0错误，稳定可靠的产品

  具体任务是：加工文件（添上版本、版权信息等等）

  注意：可以考虑把部署等发布任务加进来，也可以选择把集成结果直接加工后部署，但要保证集成结果没问题

8.使用CI系统

CI（Continuous Integration）系统是用来增强对集成版的错误排查的，持续集成可以每隔一段时间自动运行并检查代码报告错误，甚至联系错误相关的具体开发人员

参考资料

• 《Maintainable JavaScript》

后话

到这里整本书就结束了，这本书是淘宝UED博客推荐的，还算不错，也没有特别晦涩难懂的英文句子。

200页的书断断续续看了近3个星期，不算太慢，当然，在这期间还看完了《JavaScript语言精粹》、《The Book of CSS3》，学了SASS入门，写了10篇博文