构建Backbone.js项目的好方法是什么?

这是我们在主干项目中使用的结构

<!-- Libs Section -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery-1.5.2.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.maskedinput-1.3.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.mousewheel.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/jquery.scrollpane.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/fileuploader.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/modernizr.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/json2.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/underscore-min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/libs/backbone-min.js")"></script>
<!-- Libs Section -->
<!-- Core Section -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/config.js")"></script> <!-- Global configs -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/core.js")"></script> <!-- Core methods for easier working with views, models and collections + additional useful utils -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/app.js")"></script> <!-- Application object inherites core.js as prototype -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/renisans.js")"></script> <!-- Project Object. Creates Namespace and Extends it with project specific methods -->
<!-- Core Section -->
<!-- Routers Section -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/routers/workspace.js")"></script>
<!-- Routers Section -->
<!-- Models Section -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/models/profile.js")"></script>
    ...
<!-- Models Section -->
<!-- Collections Section -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/collections/messages.js")"></script>
    ...
<!-- Collections Section -->
<!-- Views Section -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/views/workspace.js")"></script>
    ...
<!-- Views Section -->
<!-- Localization Section -->
    <script type="text/javascript" src="@Url.Content("~/Content/static/js/localizations/ru_RU.js")"></script>
<!-- Localization Section -->
<!-- Init Section -->
    <script type="text/javascript">
        $(function() {
            Rens.container = $('.l-wrapper'); // Some parameters
            Rens.init({
                Localization: LocalizationStrings || {}, // Object with localization strings
                Profile: {
                    // Bootstraping initial data to Profile model
                }
            });
        });
    </script>
<!-- Init Section -->

app.js的内容

var App = function() {
        this.Views = {};
        this.Routers = {};
        this.Models = {};
        this.Collections = {};
        this.User = {};
        this.router = null;
        this.view = null;
        this.baseLocation = null;
        this.beforeInit = function() {};
        this.afterInit = function() {};
        this.init = function(initData) {
            if (typeof(this.beforeInit) === 'function') {
                this.beforeInit.apply(this, arguments);
            }
            if (this.Views.Workspace) {
                this.view = new this.Views.Workspace();
            }
            this.baseLocation = window.location.href.replace(/[?#].*/, '') == Config.web.host;
            if (this.Routers.Workspace) {
                this.router = new this.Routers.Workspace(initData);
            }
            this.view && this.view.setListeners && this.view.setListeners();
            Backbone.history.start();
            if (typeof(this.afterInit) === 'function') {
                this.afterInit.apply(this, arguments);
            }
        }.bind(this);
    };
App.prototype = Core;

和renisans.js的内容

var Rens = new App();
$.extend(Rens, {
    container: null,
    Error: function(data) {
        // Handling error
    },
    Localization: function(dictionary) {
        return {
            get: function(name) {
                var argumentsList = Array.prototype.slice.call(arguments),
                    strings = argumentsList.slice(1),
                    text = this[name];
                if (text && strings.length) {
                    $(strings).each(function(i, string) {
                        var reg = new RegExp('''$' + i, 'go');
                        text = text.replace(reg, string);
                    });
                }
                return text || 'SLB.Localization.' + name + ' not found!';
            }.bind(dictionary)
        }
    },
    formatDate: function(rawDate) {
        var timestamp = /'d+/.exec(rawDate)[0],
            date = Rens.DateUTC(timestamp),
            months = Rens.Localization.get('months');
        return {
            date: date,
            fullDate: [date.dd, months[date.mm], date.hh].join(' '),
            shortDate: [date.dd, date.MM, date.hh].join('.')
        };
    },
    beforeInit: function(initData) {
        this.Localization = new this.Localization(initData.Localization);
    }
});

也简化了models/profile.js的内容

Rens.Models.Profile = Backbone.Model.extend({
    ...
});

如果你正在创建一个这种形状的应用程序，我强烈建议使用动态加载你的资产，如javascript等。

你有几个选项:

• Require.js
• LABjs
• …

我自己没有LABjs的经验，但我一直在为自己在较小的项目中使用Require.js。但尚未在重大项目中使用。

这样一个系统的优点:

• 你可以使用依赖关系，你的模型或视图只会在被你代码的另一部分请求时才会被加载。
• require.js还提供了基于你指定的依赖项来最小化和聚合代码的特性。
• require.js有一些小插件用于加载文本文件(如果你使用模板系统，这可能很有用)，或者一个插件来定义文件需要加载的顺序。
• 和require.js也有一个特殊的版本，用于与jquery及其模块一起工作。(但你不需要使用这个，你也可以手动加载在jquery中)

你需要包装你的模型/视图/…在模块中，require.js可以动态加载它们。上周我在stack overflow上问过这个问题…你可以在这里找到如何做到这一点的信息

我建议你阅读一下'getting started with require.js'，看看你是否喜欢使用它。

因为要处理所有的模型/视图/…在开发阶段，在单独的文件中使用非常方便，但是在进入生产阶段时，不建议使用这种方法。浏览器向服务器发送的请求越少越好。