【Vue】vuejs 和backbone这两种框架有什么不同？

Z时代
2024-01-10
分类：技术分享

我学过这两种框架的一些语法，到现在只知道一个是mvc另一个是mvvm，
想请教一下这两种框架的区别，更便于理解？

回答

Backbone唯一的优势在于学习成本，对于不会如何组织自己的应用程序和懒得去接受比较高级的概念的人来说，Backbone是非常好的选择。吐槽一下Backbone：
1.几乎什么都没干。
2.没有data-binding。纵观这么多MV*框架，Backbone是在这点上最偷懒的一个。
3.所有data和view的数据绑定都要靠自己用事件来绑定。SPA很重要一个需要解决的问题就是视图的嵌套和视图的组合。Backbone你需要搭配一个　Marionette.js或者Chaplin 才好得心应手。
4.视图爆炸。基本上需要的逻辑都要在view里面处理，view又有复杂的嵌套关系。view会非常的零散，加上view之间依赖，基本上没有扩展性可言。
5.相对而言，可维护性和可扩展性极差。

推荐用vue

区别要看源码，每个人理解不同。

backbone可以帮助你理解底层。

vue封装的很好，使用起来方便。

这里是我用过backbone后一些总结，可能会存在错误

1. Model view 事件流不同

.on() 并不能简单触发 view的事件（代码中给view事件流其实是加了后缀，并调用了jQuery的on()），请不要想当然。

// Add a single event listener to the view's element (or a child element
    // using `selector`). This only works for delegate-able events: not `focus`,
    // `blur`, and not `change`, `submit`, and `reset` in Internet Explorer.
    delegate: function(eventName, selector, listener) {
      this.$el.on(eventName + '.delegateEvents' + this.cid, selector, listener);
      return this;
    },
    // Clears all callbacks previously bound to the view by `delegateEvents`.
    // You usually don't need to use this, but may wish to if you have multiple
    // Backbone views attached to the same DOM element.
    undelegateEvents: function() {
      if (this.$el) this.$el.off('.delegateEvents' + this.cid);
      return this;
    },
    // A finer-grained `undelegateEvents` for removing a single delegated event.
    // `selector` and `listener` are both optional.
    undelegate: function(eventName, selector, listener) {
      this.$el.off(eventName + '.delegateEvents' + this.cid, selector, listener);
      return this;    },

2. el赋值时，只给一个标签(或 jquery对象)

虽然原则上，调用createElement()可以创建多个。看代码。

 _setElement: function(el) {
      this.$el = el instanceof Backbone.$ ? el : Backbone.$(el);
      this.el = this.$el[0]; //这句，取第一个    },

【Vue】vuejs 和backbone这两种框架有什么不同？

3. 一些默认（约定）

backbone.model 原型上的default会（_.defaults({}, attrs, _.result(this, 'defaults'));），然后放置在实例的attribute上。

backbone.view 实例初始化的option 会全部（_.extend(this, _.pick(options, viewOptions));），然后attributes项的内容会被（var attrs = _.extend({}, _.result(this, 'attributes')); this._setAttributes(attrs); 设置到$对象上。