javascript - Browserify+Backbone.js "ApplicationState"共享模块

Question

我不明白如何使用 browserify 在不同的 View 之间共享某种“单例”应用程序状态持有对象模型。书籍和教程经常使用全局命名空间，例如:

var app = app || {};

我有一个简单的示例应用程序，它包括:

app.js

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var MenuView = require('./views/MenuView');
var ContainerView = require('./views/ContainerView');

new MenuView();
new ContainerView();

MenuView.js

var Backbone = require('backbone');
var ApplicationState = require('../models/ApplicationState');

module.exports = Backbone.View.extend({
    el: '#menuView', 
    events: {
        'click .menuLink': 'changePage'
    },
    changePage: function(event) {
        event.preventDefault();
        var viewName = $(event.target).attr('data-view');
        ApplicationState.set('currentView',viewName);
    }
});

ContainerView.js

var Backbone = require('backbone');
var ApplicationState = require('../models/ApplicationState');

module.exports = Backbone.View.extend({
    el: '#containerView', 
    initialize: function() {
        this.listenTo( ApplicationState, 'change', this.render );   
        this.render();
    },
    render: function() {
        this.$el.html( ApplicationState.get('currentView') );
    },
    close: function() {
        this.stopListening();
    }
});

这似乎使用这种方法工作:

ApplicationState.js var Backbone = require('backbone');

var ApplicationState = Backbone.Model.extend({
    defaults: {
        currentView: 'TransactionListView'
    }
});

module.exports = new ApplicationState();

ApplicationState 模块真的只创建一次(缓存)吗？或者是否存在重新创建/重置模块的风险？

我的用例的最佳做法是什么？非常感谢。

Answer 1

是的，你举的例子中只会有一个ApplicationState。只要 js 文件运行，Browserify 就会执行 module.exports = 之后的任何内容，然后任何需要该文件的内容都会传递对结果的引用。

然而，通常更好的做法是避免在 View 之间以这种方式共享状态，而是使用委托(delegate)给 subview 的父 View 。有多种方法可以进行设置。有关组织主干应用程序的最佳实践的想法，请查看此演讲:https://www.youtube.com/watch?v=Lm05e5sJaE8

对于您给出的示例，我会高度考虑使用 Backbone's Router .在您的示例中，您有一个更改“主” View 的导航。 Backbone.Router 拦截导航并根据调用 View 方法的指定路由检查它。例如:

router.js

module.exports = Backbone.Router.extend({
    initialize: function(options){
        this.ContainerView = new ContainerView();
    },
    routes: {
        'transactions': 'showTransactionListView',
        'transaction/:id': 'showTransactionDetailView'
    },
    showTransactionListView: function() {
        this.ContainerView.render('TransactionListView');
    },
    showTransactionDetailView: function(id) {
        this.ContainerView.render('TransactionDetailView', id);
    }
});

然后到 #transations 的任何链接(或者如果您使用的是 transactions Backbone History )将调用您的 ContainerView.render('TransactionListView') 。而且，作为奖励，如果您重新加载页面，您仍然会看到 TransactionListView。

其他说明:

• 您需要确保在替换旧 View 时丢弃它们(通过对它们调用 .remove())以避免内存泄漏。 Further Reading
• 您可以为您的路由器增加一些灵 active ，并使用 Controller 模式来呈现带有 this nifty plugin 的 subview 。