编写可维护的JavaScript-自动化

自动化的利弊
优点:

  • 本地的源代码不必同生产环境保持一致,所以你可以任意组织你的代码结构而不必担心在服务器上使用的代码是否需要优化。
  • 静态分析可以自动发现错误。
  • 在部署之前有多种方式处理JavaScript,比如文件的链接和压缩。
  • 通过自动化测试可以很容易的发现问题。
  • 很方便的自动的部署到生产环境。
  • 轻松快速的重新执行常见的任务。

弊端:

  • 开发者在开发环境每次改动后可能都需要在本地重新构建。一些习惯了改完代码就去刷新浏览器的开发人员会很难适应这一步
  • 被部署到生产的代码看起来不像我们在开发环境编辑的代码,使我们很难定位线上的Bug。
  • 技术水平偏低的开发人员使用构建系统可能会遇到问题。

文件和目录构造

实践

  • 一个文件只包含一个对象;
  • 相关的文件用目录分组;
  • 保持第三方代码的独立;

    任何不是你自己的代码,都应该独立出来;最理想的情况就是不引入这样的JavaScript类库,而是直接从CDN来加载它;或者把这些文件单独放置在项目工程中的一个目录里;

  • 确定创建位置;

    创建后的JavaScript文件应该放置在一个完全独立的目录里,而且不应该提交到项目工程中。

  • 保持测试代码的完整性。

    你的JavaScript测试代码也应该一并提交到项目工程中的一个显眼的位置,这样可以让开发者很容易注意到遗漏测试的情况。

基本结构

build:用来放置最终构建后的文件,理想情况下这个目录不应该提交。
src:用来放置所有的源文件,包括用来进行文件分组的子目录。
test或tests:用来放置所有的测试文件。通常包含一些同源代码目录一一对应的子目录或文件。
release(每个人不同):始终包含最新的稳定发行版本。
lib:依赖文件路径


剩下的一些的内容使用ant写的;就没仔细看。

校验

可以使用JSLint和JSHint来验证JavaScript代码。

文件合并和加工

如果你恰当的组织你的JavaScript文件–每个文件包含一个对象,那么你可能有许多个JavaScript文件。在部署到生产环境之前,最好把这些文件合并在一起,这样可以减少页面上的HTTP请求数。

文件精简和压缩

文件精简三个工具:
1.YUI Compressor
2.Closure Complier
3.UglifyJS可以使用npm下载;

文档化

1.JSDoc Toolkit 可能是最常用到的JavaScript文档生成工具。

/*
 * 两个数字的加分
 * @params {int} num1 第一个数字
 * @params {int} num2 第二个数字
 * */

2.YUI Doc是用Python写的;

自动化测试

  • YUI Test Selenium 引擎通过HTML文件执行测试。
  • Yeti是用JavaScript写测试并在node.js上运行。
  • PhantomJS就是一个命令行版本的Webkit;
  • JSTestDriver

组装到一起

发布之前,记得删除build文件;

  • 开发
  • 集成
  • 发布

使用CI系统

Jenkins

附录

程序语言的编码风格指南对于一个长期维护的软件而言是非常非要的。本指南是基于“Java语言编码规范”(Code Conventions for the Java Programming Language)和Crockfbrd的(JavaScript)编枰规范,同时结合我个人的经验和喜好做了一些改动,

A.1缩进

每一行的层级由4个空格组成,避免使用制表符(Tab)进行缩进。

//好的写法
if(true){
doScmething();

A.2行的长度

每行长度不应该超过80个字符。如果一行多于80个宇符,应当在一个运算符(逗号,加号等)后换行。下一行炖当增加两级缩进(8个字符)。

//好的写法
doSomething(argumentl#argument2,argument^,argument4,
        arguments);

//不好的写法:第二行只有4个空格的绾进
doSomething(argument1,argument2,argument?/arguments,
    arguinent5);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值