首頁 > web前端 > js教程 > jQuery的觀察者模式詳解_jquery

jQuery的觀察者模式詳解_jquery

WBOY
發布: 2016-05-16 16:24:57
原創
1023 人瀏覽過

在jQuery中,on方法可以為元素綁定事件,trigger方法可以手動觸發事件,圍繞這2個方法,我們來體驗jQuery中的觀察者模式(Observer Pattern)。

■ on方法綁定內建事件,自然觸發

例如,我們給頁面的body元素綁定一個click事件,這樣寫。

複製程式碼 程式碼如下:

 

   
   
   


   

hello



以上,我們只有點選body,才能觸發click事件。也就是說,當給頁面元素綁定內建事件後,事件的觸發是在內建事件發生的那刻。

■ on方法綁定內建事件,手動觸發

使用trigger方法,也可以手動觸發元素綁定的內建事件。

    
   
以上,無需點選body,在頁面載入完畢,body自動觸發了click事件。

■ on方法綁定自訂事件,手動觸發

我們知道,click是jquery內建的事件,那麼,是否可以自訂事件,並手動觸發呢?

複製程式碼 程式碼如下:

   
   

以上,我們自訂了一個someclick事件,得到的結果和上面一樣。

於是,我們發現:我們可以為元素綁定自訂事件,並且用trigger方法觸發該事件。

當然,自訂事件的名稱可以按照"命名空間.自訂事件名稱"的形式來寫,例如app.someclick,這在大型專案中尤其有用,這樣可以有效避免自訂事件名稱衝突。

如果從"發布訂閱"這個角度來看,on方法相當於訂閱者、觀察者,trigger方法相當於發布者。

■ 從"非同步取得json資料"來體驗jQuery觀察者模式

在根目錄下,有​​一個data.json的檔案。

{
    "one" : "Hello",
    "two" : "World"
}
現在,透過非同步的方式來取得json資料。

複製程式碼 程式碼如下:

   
   

 

如果用一個全域變數來接收非同步取得的json資料。

複製程式碼 程式碼如下:

   
   

這次,我們得到的結果卻是undefined,這是為什麼?
--因為,當$.getJSON方法還在取得資料的時候,就已經執行console.log(data),而此時data還沒有資料。

如何解決這個問題呢?
--如果在$.getJSON方法之外先定義好需要執行的方法,然後在$.getJSON方法的回呼函數裡真正觸發這個方法,不就解決了嗎?

複製程式碼 程式碼如下:

   
   

以上,on方法就像一個訂閱者,它訂閱了自訂事件app.myevent;而trigger方法就像一個發布者,它發布事件和參數後,才真正讓訂閱者方法得以執行。

■ jQuery觀察者模式的擴展方法

為此,我們也可以為jQuery觀察者模式專門寫一個擴展方法。

複製程式碼 程式碼如下:

   
   

以上,定義了全域的publish和subscribe方法,我們在任何時候都可以呼叫。

複製程式碼 程式碼如下:

   
   

總結:jQuery的觀察者模式,實際上是讓on方法綁定的自訂事件先不執行,直到使用trigger方法來觸發事件。使用jQuery的觀察者模式的好處是:一次發布,多次訂閱。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板