Что это за образец?

0

Я изучил развитие, посмотрев коды других людей, поэтому я не очень хорошо разбираюсь в терминологии. В последнее время я написал свой JS/Jquery следующим образом:

$(document).ready(function() {
    testingFunc.init();
});

var testingFunc = {
    $object: $('#object'),
    init: function() {
        var _that = this;
        console.log($object);
    }
}

Может кто-нибудь скажет мне, если это какой-то образец? Или кто-нибудь может рассказать мне, как описать код, который я сделал выше?

  • 2
    Это не шаблон, для него нет названия. Это просто нормальный код. Вы создали объект и вызвали метод объекта в DOM ready. Однако для того, чтобы ваш код работал, он все равно должен работать на DOM ready (потому что вы пытаетесь получить ссылку на $('#object') ), поэтому используйте $(document).ready(function() { is ненужным.
  • 0
    Ярлык для $(document).ready(function () { testingFunc.init(); }); => $(testingFunc.init);
Показать ещё 7 комментариев
Теги:

4 ответа

1

Этот конкретный стиль, представленный в вашем коде, является шаблоном "объектный литерал". Он немного отличается от шаблона "модуля", когда вы не требуете, чтобы определенные свойства или методы были закрытыми.

Прежде чем попасть в ловушку терминологии, вы можете понять (в принципе), какие шаблоны Javascript, а затем определить те, которые могут быть наилучшим образом подходят для вашего проекта.

Вы можете получить глубокое понимание этой мини-книги от Адди Османи:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

И статья высокого уровня от него:

http://addyosmani.com/largescalejavascript/

0

Первая часть использует селектор jQuery, при этом слушатель "готов". Это означает, что функция обратного вызова, подключенная к селектору и слушателю, будет запускаться после того, как документ (в данном случае окно браузера) будет готов (в веб-терминах это означает, когда страница закончит загрузку).

Вторая часть вашего кода соответствует стандарту, называемому объектным литералом, который является методологией JavaScript, которая следует принципам key-> значения

0

Наверное, вы задаетесь вопросом о 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 так же, как вы просматриваете свой проводник файлов.

0

Возможно, вы можете назвать его шаблоном Object Literal, который использовался Ребеккой Мерфи в своей статье. Однако я не думаю, что он широко принят в качестве официального названия для такого рода кодовой структуры, но это кажется уместным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню