Question

我在我的应用程序中广泛使用了主干。我非常喜欢它在模型 - ＆gt;视图中给出的事件绑定。我开始使用骨干进行Javascript编码，如果没有它，我真的不知道如何编码。

我正在构建另一个小应用程序。我想在不使用骨干的情况下编码。我有一个视图和与之相关的模型。当模型改变时，我想查看更新。目前在每种方法中，我都是这样手动完成的：

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

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

我想通过使用pubsub类型模式使视图正在侦听模型的更改。如何在不使用主干的情况下在普通javascript中实现它，以便我的代码看起来像这样：

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

//and view listening to this updates automatically

Answer 1

这是一个很好的问题，你应该问一个问题。开发人员不假思索地伸手去拿框架，就像有人在没有先品尝食物的情况下抓盐。对于许多人来说，许多任务甚至是简单的框架都是过度的，可以用vanilla js和基本的OO模式替换。

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

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

四处走动使用骨干

1 个答案: