javascript - vuejs 和backbone这两种框架有什么不同?
黄舟
黄舟 2017-04-11 11:56:35
0
2
321

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

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回覆(2)
PHPzhong

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

  • 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]; //这句,取第一个
    },

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); 设置到$对象上。

4. 事件流

view捕获窗口事件,触发events函数,函数中修改绑定的model,model改变引起 view 监听函数执行,从而启动view 重新绘制。

即view 将 model 暴露出来,使用户可以更改 model, model更改将引起view的重绘。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!