Question

我不明白如何分享某种单身＆＃34;＆＃34;应用程序状态持有对象模型，在不同视图之间，使用browserify。书籍和教程通常使用全局命名空间，例如：

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（＆＃39; backbone＆＃39;）;

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

module.exports = new ApplicationState();

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

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

Answer 1

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

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

对于您提供的示例，我会高度考虑使用Backbone's Router。在您的示例中，您有一个导航器可以更改＆＃34; main＆＃34;视图。 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);
    }
});

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

其他说明：

您希望确保在替换旧视图时（通过调用它们上的.remove()）丢弃旧视图，以避免内存泄漏。 Further Reading
您可以为路由器添加一些灵活性，并使用控制器模式使用this nifty plugin呈现子视图

Browserify + Backbone.js＆＃34; ApplicationState＆＃34;共享模块

1 个答案: