亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Snailclimb / 808人閱讀

摘要：原文精髓，觀察者模式和事件交互邏輯更需要設(shè)計模式設(shè)計模式將人們在以往的開發(fā)過程中的經(jīng)驗加以總結(jié)，以指導(dǎo)后人。的事件根據(jù)上面討論，要實現(xiàn)觀察者模式，事件是非常重要的機制?？偨Y(jié)雖然是模式的框架，但是其核心卻是界面的觀察者模式和事件機制。

前言

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

UI交互邏輯更需要設(shè)計模式

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

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

觀察者模式

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

Backbone的事件

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

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

var Events = Backbone.Events = { .. }

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

listenTo: function(obj, name, callback)

使當(dāng)前對象偵聽obj對象的一個叫name的事件，當(dāng)事件被觸發(fā)后，回調(diào)callback

listenToOnce: function(obj, name, callback)

使當(dāng)前對象偵聽obj對象的一個叫name的事件，當(dāng)事件被觸發(fā)后，回調(diào)callback一次（以后不會在回調(diào)）

trigger: function(name)

當(dāng)前對象觸發(fā)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上實驗這個代碼，結(jié)果如下：

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

但是，大量的將Backbone.Events擴展到實際的對象上，顯然是一種內(nèi)存浪費，那么何不將它擴展到原型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核心類創(chuàng)建出來的對象就有了事件能力。

下面是一個體現(xiàn)觀察者模式的經(jīng)典例子：

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();
    }

});

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

探究Backbone事件的實現(xiàn)原理

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

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

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

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/87526.html

相關(guān)文章

  • Backbone 源碼解讀（一）

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

    Kosmos 評論0 收藏0

  • Backbone.js學(xué)習(xí)筆記（一）

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

    FrancisSoung 評論0 收藏0

  • Backbone入門講解

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

    bingchen 評論0 收藏0

  • web前端mvc庫實現(xiàn)

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

    Kylin_Mountain 評論0 收藏0

  • 關(guān)于框架

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

    Richard_Gao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<