Я изучил развитие, посмотрев коды других людей, поэтому я не очень хорошо разбираюсь в терминологии. В последнее время я написал свой JS/Jquery следующим образом:
$(document).ready(function() {
testingFunc.init();
});
var testingFunc = {
$object: $('#object'),
init: function() {
var _that = this;
console.log($object);
}
}
Может кто-нибудь скажет мне, если это какой-то образец? Или кто-нибудь может рассказать мне, как описать код, который я сделал выше?
Этот конкретный стиль, представленный в вашем коде, является шаблоном "объектный литерал". Он немного отличается от шаблона "модуля", когда вы не требуете, чтобы определенные свойства или методы были закрытыми.
Прежде чем попасть в ловушку терминологии, вы можете понять (в принципе), какие шаблоны Javascript, а затем определить те, которые могут быть наилучшим образом подходят для вашего проекта.
Вы можете получить глубокое понимание этой мини-книги от Адди Османи:
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
И статья высокого уровня от него:
Первая часть использует селектор jQuery, при этом слушатель "готов". Это означает, что функция обратного вызова, подключенная к селектору и слушателю, будет запускаться после того, как документ (в данном случае окно браузера) будет готов (в веб-терминах это означает, когда страница закончит загрузку).
Вторая часть вашего кода соответствует стандарту, называемому объектным литералом, который является методологией JavaScript, которая следует принципам key-> значения
Наверное, вы задаетесь вопросом о ready
функции. Чтобы понять, как это работает, вы должны знать, что при загрузке HTML-страницы в ваш браузер структура HTML превращается в дерево javascript под названием "DOM" (Document Object Model). В вашем примере DOM ссылается на переменную с именем document
. Чтобы заполнить это дерево, каждая разметка должна быть инициализирована как объект javascript. Когда это задание выполняется, событие "ready" создается, вызывая каждую функцию, связанную с ним. Обобщить:
$(document).ready(function () { testingFunc.init(); });
// translation : Once the DOM has been initialized, call "init".
Что касается вашего кода, $('#object')
пытается запросить дерево DOM, чтобы найти узел с идентификатором, установленным в "object" (например, <div id="object">
). Однако документ, вероятно, еще не полностью инициализирован. В результате этот запрос может завершиться неудачно. Чтобы избежать этого риска, вам следует сделать следующее:
var testingFunc = {
$object: null,
init: function() {
this.$object = $('#object');
console.log(this.$object);
}
}
Вы можете думать о DOM как структуре папок, где каждая папка и файл являются разметкой HTML. jQuery просматривает дерево DOM так же, как вы просматриваете свой проводник файлов.
Возможно, вы можете назвать его шаблоном Object Literal, который использовался Ребеккой Мерфи в своей статье. Однако я не думаю, что он широко принят в качестве официального названия для такого рода кодовой структуры, но это кажется уместным.
$('#object')
), поэтому используйте$(document).ready(function() {
is ненужным.$(document).ready(function () { testingFunc.init(); });
=>$(testingFunc.init);