Backbone精髓，觀察者模式和事件

Snailclimb 發布于2019-08-21 12:16 / 733人閱讀

摘要：原文精髓，觀察者模式和事件交互邏輯更需要設計模式設計模式將人們在以往的開發過程中的經驗加以總結，以指導后人。的事件根據上面討論，要實現觀察者模式，事件是非常重要的機制。總結雖然是模式的框架，但是其核心卻是界面的觀察者模式和事件機制。

前言

本人并非專業的前端，只是由于需要被迫轉做一段時間的前端，一段時間以來開始探索javascript上的MVC模式，最終打算從Backbone下手。在實戰了一段時間以后，對Backbone有了一些個人的理解，記錄在這里。不過，MVC是講爛掉的話題了，本文并不討論。原文：Backbone精髓，觀察者模式和事件

UI交互邏輯更需要設計模式

設計模式將人們在以往的開發過程中的經驗加以總結，以指導后人。然而，本人從事web后端開發的幾年間，所使用到的設計模式其實很單一，無非就是工廠模式、單例模式、依賴反轉。而更多的模式已經被開發框架所實現，程序員要做到僅僅是寫幾個if-else和for以實現業務邏輯。那么真正需要設計模式的地方在哪里呢?翻遍設計模式的書，可發現其中的例子基本上是用戶界面實現、編譯器實現，很多高深的模式都在這些應用中得以體現。

注意到現在web應用越來越多，而傳統的客戶端應用越來越少(除app之外)，而人們對web程序的用戶體驗要求也是越來越高，傳統的表單提交、頁面刷新、重定向等用戶交互方式越來越不被用戶買賬。因此，javascript的歷史地位空前的高，并且，圍繞javascript，產生了大量的庫和框架方便基于瀏覽器開發用戶交互，甚至提出了javascript MVC思想，諸多的框架在javascript層面上實現了MVC模式。

觀察者模式

其實，個人認為UI交互邏輯最需要的是MV模式，即模型和視圖的關聯，至于控制器，可有可無。而M和V之間的實現關聯的重要設計模式之一就是觀察者模式，即由于視圖呈現的復雜和多樣化，為了便于擴展，需要視圖有一種隨模型數據的變化而“自行變化”的能力，而實現方式就是，視圖通過偵聽模型對象的變化而渲染自己，不需要外力來渲染，外力只需要改變唯一的標準--模型對象就可以了。

Backbone的事件

根據上面討論，要實現觀察者模式，事件是非常重要的機制。在瀏覽器和javascript中，原生的事件是瀏覽器實現的基于DOM的事件體系。然而，這在我們需要的M和V的觀察者模式中是不夠的。幸好，Backbone實現了這樣的機制。有了它，能夠讓任何javascript對象擁有“事件能力”，來看看是如何做到的：

你可能沒有注意過Backbone.Events就是事件實現的核心，它可以讓對象擁有事件能力

var Events = Backbone.Events = { .. }

那么具體的看，事件能力究竟包含哪些能力呢？我們簡單的來看一下：

listenTo: function(obj, name, callback)

使當前對象偵聽obj對象的一個叫name的事件，當事件被觸發后，回調callback

listenToOnce: function(obj, name, callback)

使當前對象偵聽obj對象的一個叫name的事件，當事件被觸發后，回調callback一次（以后不會在回調）

trigger: function(name)

當前對象觸發name事件

看下面的實驗下面的代碼：

var model = _.extend({},Backbone.Events);
var view = _.extend({},Backbone.Events);
view.listenTo(model,"custom_event",function(){ alert("catch the event") });
model.trigger("custom_event");

可以在jsfiddle上實驗這個代碼，結果如下：

可以看到，依靠Backbone.Events是可以實現觀察者模式的。因為對于上面代碼的model對象而言，它并不知道view對象在偵聽它，甚至可以有更多的其他對象去偵聽這個model。這樣的話，如果model發生了某種改變就可以通過事件來發出通知。

但是，大量的將Backbone.Events擴展到實際的對象上，顯然是一種內存浪費，那么何不將它擴展到原型prototype上呢?于是就有了Backbone的Model和View等核心類。例如Backbone.Model：

var Events = Backbone.Events = { .. }

var Model = Backbone.Model = function(attributes, options) {
    ...
};

_.extend(Model.prototype, Events, { ... })

從上面的代碼可以看出，Backbone核心的類只不過是將Backbone.Events擴展到自身的prototype上罷了，這樣所有基于Backbone核心類創建出來的對象就有了事件能力。

下面是一個體現觀察者模式的經典例子：

var Todo = Backbone.Model.extend({
    model.trigger("destroy");
});

var TodoView = Backbone.View.extend({

    events: {
      "click a.destroy" : "clear",
    },

    initialize: function() {
      this.listenTo(this.model, "destroy", this.remove);
    },

    clear: function() {
      this.model.destroy();
    },

    remove: function() {
      this.$el.remove();
    }

});

上面的例子忽略了很多細枝末節，只是想說明一個界面元素的刪除動作，首先是刪除模型，模型隨后觸發刪除事件，由于這個刪除事件，界面元素才被刪除

探究Backbone事件的實現原理

被偵聽的對象維護一個事件數組_event，其他對象在調用listenTo時，會將事件名與回調維護到隊列中：

一個事件名可以對應多個回調，對于被偵聽者而言，只知道回調的存在，并不知道具體是哪個對象在偵聽它。

當被偵聽者調用trigger(name)時，會遍歷_event，選擇同名的事件，并將其下面所有的回調都執行一遍。

總結

Backbone雖然是MVC模式的框架，但是其核心卻是UI界面的觀察者模式和事件機制。有了事件，并靈活運用觀察者模式，才能實現復雜界面的復雜邏輯。本文對此進行了闡述，如有不妥之處，請指正。

云服務器 GPU云服務器設計模式觀察者模式觀察者模式 php觀察者模式 ios觀察者模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87526.html

Backbone 源碼解讀（一）

1. 開場 1.1 MVC？ MVC是一種GUI軟件的一種架構模式。它的目的是將軟件的數據層（Model）和視圖（view）分開。Model連接數據庫，實現數據的交互。用戶不能直接和數據打交道，而是需要通過操作視圖，然后通過controller對事件作出響應，最后才得以改變數據。最后數據改變，通過觀察者模式更新view。（所以在這里需要用到設計模式中的觀察者模式） 1.2 Smalltalk-80...

Kosmos 2019-08-20 10:25 評論0 收藏0
Backbone.js學習筆記（一）

摘要：它通過數據模型進行鍵值綁定及事件處理，通過模型集合器提供一套豐富的用于枚舉功能，通過視圖來進行事件處理及與現有的通過接口進行交互。本人兼職前端付費技術顧問，如需幫助請加本人微信hawx1993或QQ345823102，非誠勿擾 1.為初學前端而不知道怎么做項目的你指導 2.指導并扎實你的JavaScript基礎 3.幫你準備面試并提供相關指導性意見 4.為你的前端之路提供極具建設性的...

FrancisSoung 2019-08-21 10:21 評論0 收藏0
Backbone入門講解

摘要：一種解決問題的通用方法，我們叫做模式。事件委托當這個視圖后，頁面上的就會綁定事件，只要點擊，就會執行方法。同時，頁面上的元素也會綁定事件。，套入模板后變成，最后添加到頁面上。 Backbone是一個實現了web前端mvc模式的js框架。一種解決問題的通用方法，我們叫做模式。設計模式：工廠模式，適配器模式，觀察者模式等，推薦js設計模式這本書。設計模式是一種思想。框架模式：MVC，...

bingchen 2019-08-23 12:17 評論0 收藏0
web前端mvc庫實現

摘要：如函數通過名，找到對應的數組，并觸發所有數組內回調函數。核心代碼如下效果圖源碼前端實現小節整篇文章基本是圍繞著如下點，的觀察者模式的實現展開，期間的銷毀則取消與之有關聯對象的關系，如銷毀時，注銷掉與之關聯的的回調函數。 web前端mvc庫實現前言隨著前端應用日趨復雜,如今如angular，vue的mvvm框架,基于virtual dom的react等前端庫基本成為了各個公司的首選。...

Kylin_Mountain 2019-08-20 15:54 評論0 收藏0
關于框架

摘要：事件訂閱發布者模式什么是讀音類似于是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，采用自底向上增量開發的設計。 MVC && MVVM 前端框架前端 MV*框架的意義被誤解的MVC和被神化的MVVM Vue.js新手入門指南單頁應用SPA的路由單頁面應用的路由問題本文是在自己總結時，看了許多篇文章有了些體會，然后把我認為有意義的摘抄下來，文中很大部分摘錄以上...

Richard_Gao 2019-08-20 18:30 評論0 收藏0