资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Backbone精髓，观察者模式和事件

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

Snailclimb / 639人阅读

摘要：原文精髓，观察者模式和事件交互逻辑更需要设计模式设计模式将人们在以往的开发过程中的经验加以总结，以指导后人。的事件根据上面讨论，要实现观察者模式，事件是非常重要的机制。总结虽然是模式的框架，但是其核心却是界面的观察者模式和事件机制。

前言

本人并非专业的前端，只是由于需要被迫转做一段时间的前端，一段时间以来开始探索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界面的观察者模式和事件机制。有了事件，并灵活运用观察者模式，才能实现复杂界面的复杂逻辑。本文对此进行了阐述，如有不妥之处，请指正。

云服务器 私有云 设计模式 观察者模式 观察者模式 php观察者模式 ios观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87526.html

相关文章

  • Backbone 源码解读（一）

    1. 开场 1.1 MVC？ MVC是一种GUI软件的一种架构模式。它的目的是将软件的数据层（Model）和视图（view）分开。Model连接数据库，实现数据的交互。用户不能直接和数据打交道，而是需要通过操作视图，然后通过controller对事件作出响应，最后才得以改变数据。最后数据改变，通过观察者模式更新view。（所以在这里需要用到设计模式中的观察者模式） 1.2 Smalltalk-80...

    Kosmos 评论0 收藏0

  • Backbone.js学习笔记（一）

    摘要：它通过数据模型进行键值绑定及事件处理，通过模型集合器提供一套丰富的用于枚举功能，通过视图来进行事件处理及与现有的通过接口进行交互。 本人兼职前端付费技术顾问，如需帮助请加本人微信hawx1993或QQ345823102，非诚勿扰 1.为初学前端而不知道怎么做项目的你指导 2.指导并扎实你的JavaScript基础 3.帮你准备面试并提供相关指导性意见 4.为你的前端之路提供极具建设性的...

    FrancisSoung 评论0 收藏0

  • Backbone入门讲解

    摘要：一种解决问题的通用方法，我们叫做模式。事件委托当这个视图后，页面上的就会绑定事件，只要点击，就会执行方法。同时，页面上的元素也会绑定事件。，套入模板后变成，最后添加到页面上。 Backbone是一个实现了web前端mvc模式的js框架。 一种解决问题的通用方法，我们叫做模式。 设计模式：工厂模式，适配器模式，观察者模式等，推荐js设计模式这本书。设计模式是一种思想。 框架模式：MVC，...

    bingchen 评论0 收藏0

  • web前端mvc库实现

    摘要：如函数通过名，找到对应的数组，并触发所有数组内回调函数。核心代码如下效果图源码前端实现小节整篇文章基本是围绕着如下点，的观察者模式的实现展开，期间的销毁则取消与之有关联对象的关系，如销毁时，注销掉与之关联的的回调函数。 web前端mvc库实现 前言 随着前端应用日趋复杂,如今如angular，vue的mvvm框架,基于virtual dom的react等前端库基本成为了各个公司的首选。...

    Kylin_Mountain 评论0 收藏0

  • 关于框架

    摘要：事件订阅发布者模式什么是读音类似于是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，采用自底向上增量开发的设计。 MVC && MVVM 前端框架前端 MV*框架的意义 被误解的MVC和被神化的MVVM Vue.js新手入门指南 单页应用SPA的路由 单页面应用的路由问题 本文是在自己总结时，看了许多篇文章有了些体会，然后把我认为有意义的摘抄下来，文中很大部分摘录以上...

    Richard_Gao 评论0 收藏0

发表评论

登陆后可评论

0条评论

Snailclimb

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<