用這個例子瞭解jQuery＆Pub Sub模式

Question

我使用jQuery一段時間，但通常jQuery非常簡單。我剛看了一些視頻教程，其中作者使用了一種叫做Pub Sub Pattern的東西。我從來沒有聽說過，所以我搜索了＃1和谷歌的解釋：

• Why would one use the Publish/Subscribe pattern (in JS/jQuery)?

但它仍然不是很清楚，我，尤其是因爲這是代碼由上述教程的作者使用。所以，我會在這裏粘貼代碼，如果你能給我解釋：

這裏是pubsub.js第一.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() { ... });意味着/做什麼？至於其餘的代碼，你可以向我解釋$.subscribe('form.submitted', function() {？

最後，我們有這樣的事情：

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

這也是我不清楚。

---

我明白，這一切都是一個基本的實現PubSub的模式使用jQuery的，但我還是不明白爲什麼會有人這樣做（通過使用這種模式），我看了that answer on Stackoverflow，但它的對我而言仍然不清楚......我猜如果我理解了這個代碼，那麼爲什麼以及何時使用這種模式會變得更加清晰。

Answer 1

在(function($) { ... }(jQuery));的情況下，作者將jQuery實例作爲參數傳入。在函數內部（它有自己的作用域），$是對傳入的jQuery實例的引用。

「Pub Sub」只是事件管理或事件處理的另一個術語。你所說的只是「當[發生]時，做[那]」。

當您「訂閱」時，您傳遞了2個參數，您正在偵聽的「事件」以及事件「觸發」時要運行的代碼。

當您「發佈」時，您正在「解僱」（或觸發）該事件。

想象它像onclick事件。當您在onclick事件上設置某些內容時，您正在訂閱該事件。當您點擊時，您正在發佈該事件。