2013-11-21 61 views
2

我一直在我的应用中广泛使用骨干网。我真的很喜欢它在模型 - >视图中给我的事件绑定。我用骨干开始了我的Javascript编码,如果没有它,我真的不知道如何编写代码。绕过使用骨干网

我正在构建另一个小应用程序。我想在不使用主干的情况下编码。我有一个观点和与之相关的模型。模型更改时,我想查看更新。目前在每一个方法,我做手工是这样的:

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

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

我想就这个复杂的具有发布 - 订阅类型的模式,其视图所监听的模式变化。我将如何实现它在普通的JavaScript,而无需使用骨干,使我的代码看起来是这样的:

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

//and view listening to this updates automatically 

回答

2

这是一个很大的问题,一个你应该问。开发者不加思索地伸手去寻找框架,就像有人在没有品尝食物的情况下先抓盐一样。对于很多人来说,即使是简单的框架,许多任务都是矫枉过正的,可以用香草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

完全一致,你应该加入层之前了解的基础知识,但只是一定要看看成熟的解决方案,同时你学习通过重新实施。例如,Backbone会在删除视图时隐式移除事件监听器。为了避免内存泄漏,这是你想在任何可观察的重新实现中重新创建的东西。 – numbers1311407

+0

好点,数字 – Jonah