設計模式之觀察者模式

觀察者模式

觀察者模式(Observer)完美的將觀察者和被觀察的對象分離開。舉個例子,用戶界面可以作為一個觀察者,業務數據是被觀察者,用戶界面觀察業務數據的變化,發現數據變化后,就顯示在界面上。面向對象設計的一個原則是:系統中的每個類將重點放在某一個功能上,而不是其他方面。一個對象只做一件事情,并且將他做好。觀察者模式在模塊之間劃定了清晰的界限,提高了應用程序的可維護性和重用性。
觀察者設計模式定義了對象間的一種一對多的依賴關系,以便一個對象的狀態發生變化時,所有依賴于它的對象都得到通知并自動刷新。

模式作用:

  1. 支持簡單的廣播通信,自動通知所有已經訂閱過的對象
  2. 頁面載入后目標對象很容易與觀察者存在一種動態關聯,增加了靈活性
  3. 目標對象與觀察者之間的抽象耦合關系能夠單獨擴展以及重用

注意事項:

  1. 監聽要在觸發之前

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>觀察者模式</title>
    <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
    <script>
        ~(function(){
            var o=$({});
            $.jianting=function(){
                o.on.apply(o,arguments)
            }
            $.fabu=function(){
                o.trigger.apply(o,arguments)
            }
            $.qingchu=function(){
                o.off.apply(o,arguments)
            }
        })()
        $.jianting('myEvent',function(e,a,b,c){
            alert(a+"||"+b+'||'+c);
        })

        setTimeout(function(){
            $.fabu('myEvent',[1,2,3])
        },1000)

    </script>
</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1 定義 定義對象之間的一種一對多依賴關系,使得每當一個對象狀態發生改變時,其相關依賴對象皆得到通知并被自動更新。...
    菜小軒526閱讀 551評論 3 3
  • 在正式介紹觀察者模式前,我們先引用生活中的小例子來模擬觀察者,先對觀察者模式有一個整體的感覺。 現實模擬 報紙和雜...
    六尺帳篷閱讀 1,655評論 6 18
  • 使用場景 一個抽象模型有兩個方面,其中一個方面依賴于另一個方面。將這些方面封裝在獨立的對象中使它們可以各自獨立地改...
    niaoge2016閱讀 763評論 0 1
  • 客戶需求 程序設計 一個氣象站對應著多個客戶端,氣象站的數據一發生變化,客戶端的數據也要隨著更新,這就形成了一種依...
    BlainPeng閱讀 1,025評論 1 17
  • 觀察者模式 有時,我們希望在一個對象的狀態改變時更新另外一組對象。在MVC模式中有這樣一個非常常見的例子,假設在兩...
    英武閱讀 4,242評論 0 51