JS自动化

写在前面

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

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

一.自动化的优缺点

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篇博文

posted @ 2015-05-16 11:55 梦烬 阅读(...) 评论(...) 编辑 收藏