Написание "тестируемого модуля" кода JQuery?

Question

До этого момента я использовал для написания всего своего кода внутри функции ready (), например:

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

Теперь я вижу, что при таком подходе мой код не «тестируется модулем», например Я не могу получить доступ к содержимому внутри ready () из QUnit .

Как правильно структурировать код jQuery, который совместим с использованием функции ready () и может быть протестирован?

Есть ли хорошая база с открытым исходным кодом или проект для изучения и изучения?

Answer 1

Поместите свой код в обработчик готовности, просто вызывая функции вне обработчика готовности:

$(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 это правда, что вы не получаете доступ к закрытым элементам в модуле.

Бен Черри говорил об этом некоторое время назад в http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript, где он фактически сделал спорный комментарий о конфиденциальности на основе замыканий из-за ее влияния на модульное тестирование.

Answer 3

Один из наиболее эффективных подходов - структурировать кодирование с использованием JS " namespaces ", и действительно, вы можете получить отличный пример из jQuery core .