javascript进阶——测试和打包分发

浏览数：31 / 时间：2015年06月09日

建立一个面向对象的好的代码基础后，为了达到代码重用的目的，通过调试使用适当的测试用例进行测试尤为必要，之后就是打包分发的主题。

一、调试与测试

1、调试

Firebug：包含了错误控制台、调试器、DOM查看器。可以很好的定位DOM结构。
Chrome：拥有控制台、DOM查看器等于Firebug几乎类似功能。
IE浏览器：错误控制台显示错误，F12打开开发者工具，提供了javascript调试工具。
Venkman：Mozilla发起的javascript调试器项目，它与javascript引擎本身紧密集成，是你能够对代码的执行做出精确的控制。

2、测试

为代码构建可靠的测试用例时，可以为自己省下无数调试的时间、寻找一个古怪bug的时间或者除去了引入新bug的机会。

JSUnit

长期是javascript单元测试的唯一标准，基于java时间中很受欢迎的JUnit程序包。包含三个基本的组件：

测试运行器：为测试过程的执行提供一个图形化输出，还提供了输入测试集并执行的能力。

测试集：一系列测试用例的集合。

测试用例：可以执行以获得真假表达式的单独命令。

J3Unit

与JSUnit相比提供了像JUnit和Jetty等对服务器端的测试套件，对java开发者很有用。

Test.Simple：比较新，是JSAN的javascript模块的标准测试方案。

二、打包分发

编写好优美的面向对象javascript代码之后，应该与其他javascript库良好配合使用，或者供他人重复使用。

1、命名空间化

为了和全局对象或其他使用的库不冲突，需要考虑命名空间，但是javascript不支持命名空间，因此需要使用对象的属性又可以包含对象的特性，模拟实现命名空间。如：

var YAHOO = {}; //创建一个默认全局命名空间

YAHOO.util = {}; //使用对象设置一些子命名空间
YAHOO.util.Event = {addEventListener: function(){...}}; //创建最终的命名空间，包含一个值为函数的属性

YAHOO.util.Event.addEventListener(); //调用具体命名空间中的函数

很多流行的框架都是利用这个特性构建了各自的命名空间系统。

Dojo：dojo.require("dojo.widget.AccordionContainer");导入特定命名空间下的程序包
JQuery：$或者是JQuery对象为最外层命名空间，给这个对象添加属性或者方法就是添加的插件。
YUI：与Dojo一样使用了深层次的命名空间结构来组织函数和特性，不同的是所有外部代码的导入由自己完成。

2、清理代码

如果希望其他人可以使用或者修改后保存下来，自己的代码需要进行检查和清理，JSLint工具就是使用其内建的一系列规则找出可能引发问题的代码片段。

变量声明：JSLint提出程序中所有的变量都必须在使用前声明，虽然javascript允许不申明直接使用，但是会导致变量实际作用域不好理解。由于null、0、false、‘’、undefined都是两两相等（==），因此JSLint要求每次对false进行比较时都要是要 “!==”、“===”。
代码块与大括号：不应该使用单行的代码块。也就是if、while或者for等语句中，即使后面只有一条语句，也要带上花括号“{”、“}”。
分号：所有的语句都应该在后面加上分号，独占一行的代码结尾可以省略，但是压缩后就可能导致问题。

3、压缩

分发javascript库的关键之一就是使用代码压缩工具来节省带宽，压缩后代码不可读。有三类压缩工具：

只去除多余空白和注释，保留所有有意义的代码。JSMin属于这种，原理最简单，去除多余空白字符和注释。
去除空白和注释，而且修改变量名以减小代码
完成上述两种工作，同时还最小化代码中的所有单词，不仅仅是变量名称。Packer是这类工具，是目前最强大的javascript压缩工具，提供了一种彻底精简代码，并在执行时即时重新展开的方式，能够得到可能是最小的代码。可以看做一个可自解压的ZIP文件，压缩后会多出几百字节的内容用于自解压。小文件的压缩效果可能没有JSMin的效果好，但是大文件则是Packer最合适。