成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Snailclimb / 781人閱讀

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

前言

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

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

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

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

觀察者模式

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

Backbone的事件

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

你可能沒(méi)有注意過(guò)Backbone.Events就是事件實(shí)現(xiàn)的核心，它可以讓對(duì)象擁有事件能力

var Events = Backbone.Events = { .. }

那么具體的看，事件能力究竟包含哪些能力呢？我們簡(jiǎn)單的來(lái)看一下：

listenTo: function(obj, name, callback)

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

listenToOnce: function(obj, name, callback)

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

trigger: function(name)

當(dāng)前對(duì)象觸發(fā)name事件

看下面的實(shí)驗(yàn)下面的代碼：

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上實(shí)驗(yàn)這個(gè)代碼，結(jié)果如下：

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

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

var Events = Backbone.Events = { .. }

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

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

從上面的代碼可以看出，Backbone核心的類只不過(guò)是將Backbone.Events擴(kuò)展到自身的prototype上罷了，這樣所有基于Backbone核心類創(chuàng)建出來(lái)的對(duì)象就有了事件能力。

下面是一個(gè)體現(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é)，只是想說(shuō)明一個(gè)界面元素的刪除動(dòng)作，首先是刪除模型，模型隨后觸發(fā)刪除事件，由于這個(gè)刪除事件，界面元素才被刪除

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

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

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

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

總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87526.html

相關(guān)文章

  • Backbone 源碼解讀（一）

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

    Kosmos 評(píng)論0 收藏0

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

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

    FrancisSoung 評(píng)論0 收藏0

  • Backbone入門講解

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

    bingchen 評(píng)論0 收藏0

  • web前端mvc庫(kù)實(shí)現(xiàn)

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

    Kylin_Mountain 評(píng)論0 收藏0

  • 關(guān)于框架

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

    Richard_Gao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<