2016-07-25 6 views
0

Я использую jQuery в течение некоторого времени, но это, как правило, очень простой jQuery. Я просто смотрел видео-учебник, в котором автор использует что-то под названием Паб Sub Pattern. Я никогда не слышал об этом раньше, так что я искал на Stackoverflow и Google для объяснения:Понимание jQuery & Pub Sub Pattern с этим примером

Но это все еще не ясно для меня, особенно из-за кода, который используемый автором вышеупомянутого учебника. Таким образом, я буду вставлять этот код здесь, и если вы можете дать мне объяснения:

1. Вот файл .js первый названный pubsub.js, и я не понимаю:

(function($) { 

     var o = $({}); // ??? what is this ??? 

     $.subscribe = function() { // ??? and this ??? 
      o.on.apply(o, arguments); // ??? o.on.apply(o, arguments) ??? 
     }; 

     $.unsubscribe = function() { // ??? and this ??? 
      o.off.apply(o, arguments); // ?? 
     }; 

     $.publish = function() { // ??? and this ??? 
      o.trigger.apply(o, arguments); // ?? o.trigger.apply(o, arguments); ?? 
     }; 

    }(jQuery)); 

Я знаю, что с jQuery вы можете использовать $(document).ready() или $(function(), но я никогда не видел (function($) { ... }(jQuery)); - что это значит/делать? Кроме того, я не понимаю, остальную часть кода ...

2. Следующий файл app.js и содержит:

(function() { 
    $.subscribe('form.submitted', function() { 
     $('.flash').fadeIn(500).delay(1000).fadeOut(500); 
    }) 
}); 

Что это на самом деле? Опять же, что означает (function() { ... });/do? А что касается остальной части кода, можете ли вы мне объяснить $.subscribe('form.submitted', function() {?

3. Наконец, у нас есть что-то вроде этого:

$.publish('form.submitted', form); // publish? 

Это также не ясно для меня.


Я понимаю, что все это базовая реализация PubSub шаблон с JQuery, но я до сих пор не понимаю, почему кто-то будет делать таким образом (с помощью этого шаблона), я прочитал that answer on Stackoverflow, но это мне все еще неясно ... Думаю, если я пойму этот код, то мне станет понятнее, почему и когда использовать этот шаблон.

+1

Короткий ответ - подумайте об этом, как пользовательские события, связанные с объектом. См. Также [Что такое (function() {})() construct] (http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript) – charlietfl

ответ

1

В случае (function($) { ... }(jQuery)); автор передает экземпляр jQuery в качестве параметра. Внутри функции (которая имеет свой собственный объем), $ является ссылкой на экземпляр jQuery, который был передан.

«Паб Sub» - это еще один термин для управления событиями или обработки событий. Все, что вы говорите, это «Когда [это] происходит, сделайте [это]».

Когда вы подписываетесь, вы передаете 2 параметра, «событие», которое вы слушаете, и код, который вы хотите запустить, когда событие «срабатывает».

Когда вы «публикуете», вы «стреляете» (или запускаете) это событие.

Думайте об этом как о событии onclick. Когда вы устанавливаете что-то в событии onclick, вы подписываетесь на это событие. Когда вы нажимаете, вы публикуете это событие.