编写"单元可测试"的jQuery代码？

Question

直到现在我还习惯在ready()函数中编写我的所有代码,如:

$(document).ready(function() {
  // all my code
});

现在我看到使用这种方法,我的代码不是"单元可测试的",例如我无法从QUnit访问ready()内的东西.

构造与使用ready()函数兼容且能够进行测试的jQuery代码的正确方法是什么？

是否有一个良好的开源代码库或项目来学习和学习？

Answer 1

让你的代码在ready处理程序中只调用ready处理程序之外的函数:

$(document).ready(function() {
  // call some functions outside of handler
});

// most of my code

这样,您也可以调用这些函数进行单元测试.

NB,有一个捷径$(document).ready:

$(function() {
  // call some functions outside of handler
});

// most of my code

Answer 2

我看到两种方法.

1. 将QUnit代码放在文档中,准备好在您自己的代码之后运行.

2. 将代码放在模块中.

选项#2看起来像这样:

var MyModule = (function() {
    // Your code
}());

$(document).ready(function() {
    // Quit tests, referring to MyModule.xxx
});

在选项#2中,您无法访问模块中的私有元素.

不久前Ben Cherry在http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript中谈到了这一点,他实际上因为对单元测试的影响而对基于闭包的隐私做出了有争议的评论.