Javascript 什么'；构建Backbone.js项目的好方法是什么？_Javascript_Architecture_Backbone.js

Javascript 什么'；构建Backbone.js项目的好方法是什么？

javascript architecture backbone.js

Javascript 什么'；构建Backbone.js项目的好方法是什么？,javascript,architecture,backbone.js,Javascript,Architecture,Backbone.js,我们目前正在开始我们的第一个工作项目。事实上，这是我们除了jQuery之外的第一个主要JavaScript项目不管怎样，我们都在为自己的东西与建筑抗争。什么是最好的分类方法我们已经开始把所有东西都放在单独的文件中，并在文件夹中进行分类；视图、模型、集合和路由器，然后我们将所有内容都包含在index.html中。但问题是，这让我们不得不检查每个文件中的DocumentReady事件。这是最好的方法吗下面是一个例子：这是名为PageModel的文件，第一行似乎有误 $(function(){

我们目前正在开始我们的第一个工作项目。事实上，这是我们除了jQuery之外的第一个主要JavaScript项目

不管怎样，我们都在为自己的东西与建筑抗争。什么是最好的分类方法

我们已经开始把所有东西都放在单独的文件中，并在文件夹中进行分类；视图、模型、集合和路由器，然后我们将所有内容都包含在

index.html

中。但问题是，这让我们不得不检查每个文件中的DocumentReady事件。这是最好的方法吗

下面是一个例子：

这是名为

PageModel

的文件，第一行似乎有误

$(function(){
     app.models.Page = Backbone.Model.extend({
    //stuff
    });
});

然后在我们的

index.html

中，我们有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>

        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript">
            var app            = app                 || {};

            app.models         = app.models         || {};
            app.collections    = app.collections     || {};
            app.views        = app.views         || {};
            app.routers        = app.collections     || {};
            app.templates     = app.templates        || {};

            app.models.griditems = app.models.griditems || {};
            app.views.griditems = app.views.griditems || {};
        </script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
        <script src="assets/js/libs/json2.js" type="text/javascript"></script>
        <script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"></script>
        <script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"></script>

        <script src="assets/js/models/GridItemModel.js" type="text/javascript"></script>
        <script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"></script>
        <script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"></script>
        <script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"></script>

        <script src="assets/js/collections/GridCollection.js" type="text/javascript"></script>

        <script src="assets/js/templates/Submenu.js" type="text/javascript"></script>
        <script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"></script>

        <script src="assets/js/views/GridView.js" type="text/javascript"></script>
        <script src="assets/js/views/GridItemView.js" type="text/javascript"></script>
        <script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"></script>
        <script src="assets/js/views/VideoGridItemView.js" type="text/javascript"></script>

        <script src="assets/js/routers/Router.js" type="text/javascript"></script>

        <script src="assets/js/Application.js" type="text/javascript"></script>
    </head>

    <body>
    </body>
</html>


var-app=app |{}；
app.models=app.models | |{}；
app.collections=app.collections |{}；
app.views=app.views | |{}；
app.routers=app.collections | |{}；
app.templates=app.templates | |{}；
app.models.griditems=app.models.griditems | |{}；
app.views.griditems=app.views.griditems | |{}；

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

<!-- 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 -->

以及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等

对此，您有几个选项：

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

这种系统的优点是：

您可以使用依赖项，只有当代码的另一部分请求您的模型或视图时，才会加载它们。一开始并非如此
require.js还提供了根据指定的依赖性缩小和修改代码的功能
require.js有几个小插件用于加载文本文件（如果您使用模板系统，这可能会很有用，或者有一个插件用于定义文件加载顺序）
并且require.js还有一个特别的版本用于及其模块（但您不需要使用这个版本，您也可以手动在jquery中加载）

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

我建议你读一下“”并看看是否愿意使用它

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

嘿！谢谢你的回答。但是你如何处理示例模型文件中的代码呢？你知道吗你还有一个文档准备功能？如果我能看看你是如何构建renisans.js和app.js项目文件的，那就太酷了。谢谢@ant_Ti的一篇好文章，为我解决了很多问题！不过有几个问题。你在Core.js中使用了什么样的东西；app.prototype=Core；？还有，为什么你两个应用程序都有on.js和renisans.js？

core.js

是具有数据格式化方法的对象，为主干模型添加了特殊方法，并具有将视图与模型绑定的方法，以及获取和呈现模型的方法。

app.js

可以在页面上与不同的项目对象（如

renisans.js

）一起多次使用。无需定义在DOMReady事件上调用您的模型/集合/视图/路由器。只有在dom就绪时才需要调用的是

Backbone.history.start（）

。我非常同意使用资源加载程序。我们使用require.is，我强烈推荐它

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