Backbone精华，观察者形式和事宜

2019年8月26日 219次阅读 来源: P_Chou水冗

媒介

本人并不是专业的前端，只是由于须要被迫转做一段时间的前端，一段时间以来最先探讨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精华，观察者形式和事宜》

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精华，观察者形式和事宜》

能够看到，依托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时，会将事宜名与回调保护到行列中：

《Backbone精华，观察者形式和事宜》

一个事宜名能够对应多个回调，关于被侦听者而言，只知道回调的存在，并不知道详细是哪一个对象在侦听它。

当被侦听者挪用trigger(name)时，会遍历_event，挑选同名的事宜，并将其下面一切的回调都实行一遍。

总结

Backbone虽然是MVC形式的框架，然则其中心倒是UI界面的观察者形式和事宜机制。有了事宜，并灵活运用观察者形式，才完成庞杂界面的庞杂逻辑。本文对此进行了论述，若有不妥的地方，请斧正。

    原文作者：P_Chou水冗
    原文地址: https://segmentfault.com/a/1190000000480727
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞