javascript - 使用 Backbone 四处走动

Question

我在我的应用程序中广泛使用了主干。我真的很喜欢它在模型-> View 中为我提供的事件绑定(bind)。我开始使用 Backbone 进行 Javascript 编码，但我真的不知道如何在没有 Backbone 的情况下进行编码。

我正在构建另一个小型应用程序。我想在不使用主干的情况下对其进行编码。我有一个 View 和一个与之关联的模型。当模型更改时，我希望 View 更新。目前，在每种方法中，我都像这样手动执行此操作:

function updatesomething(){
    //update model
    model[something] = new updated value;

    //update view
    $(".something").addClass("updated value");
}

我想通过使用 pubsub 类型模式来使这个复杂，其中 View 正在监听模型上的更改。我如何在不使用主干的情况下用纯 JavaScript 实现它，以便我的代码看起来像这样:

function updatesomething(){
    model.update(something);
}

//and view listening to this updates automatically

Answer 1

这是一个很好的问题，你应该问这个问题。开发人员不假思索地使用框架，就像有人不先品尝食物就抓盐一样。对于很多很多任务来说，即使是简单的框架也太过分了，可以用普通的 js 和基本的 OO 模式来代替。

这是使用 vanilla js 的 sub/pub 模式的简单演示。您可以使用提供的 mixin 来使任何纯 js 模型对象可观察。然后，您可以让您的 View 订阅它们并更新更改。

http://jsbin.com/umOhiFOP/1/edit

function makeObservable() {
  this._subscribers = [];
  this.subscribe = function(event, target, callback) {
    this._subscribers.push({event:event, target:target, callback:callback});
  }
  this.trigger = function(event) {
    this._subscribers.forEach(function(subscriber) {
      if (event !== subscriber.event) return;
        subscriber.callback.call(subscriber.target);
    });
  }
}

function Todo() {
  this.isDone = false;
  this.complete = function() {
    this.isDone = true;
    this.trigger('completed');
  }
}
makeObservable.call(Todo.prototype);

function TodoSubscriber() {
  this.onComplete = function() {
    console.log('Todo completed');
  }
}

var todo = new Todo();
var listener = new TodoSubscriber();

todo.subscribe('completed', listener, listener.onComplete);

todo.complete();

您可能也会喜欢这篇文章:https://moot.it/blog/technology/riotjs-the-1kb-mvp-framework.html