Что это за шаблон?

Question

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

Я думаю, вы задаетесь вопросом о функции 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, чтобы найти узел с идентификатором, установленный на «объект» (например, <div id="object">). Однако документ, вероятно, еще не полностью инициализирован. В результате этот запрос может завершиться неудачно. Чтобы избежать этого риска вы скорее должны сделать это:

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

Вы можете думать о DOM как структура папок, где каждая папка и файл представляет собой HTML-разметка. jQuery просматривает дерево DOM так же, как вы просматриваете свой проводник файлов.

Answer 4

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

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

Вы можете получить глубокое понимание от этой мини-книги из Addy Osmani:

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

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

http://addyosmani.com/largescalejavascript/