Question

在我的申请中，我们使用RequireJs和Backbone

因此，典型模型在单独的文件中可能如下所示，因此我们可以尝试更好地模块化此应用程序：

define([
'Require statements here if needed'
], 
function() {
var toDo = Backbone.Model.extend({

    // Model Service Url
    url: function () {
        var base = 'apps/dashboard/todo';
        return (this.isNew()) ? base : base + "/" + this.id;
    },
    // Other functions here

});

  return toDo;
});

现在我们将每个模型和集合保存在自己的文件中，并返回上面的模型/集合。应用程序越大，保持文件和命名约定的难度就越大。我想将类似的集合/模型组合成1个文件并保持模块化。

实现这一目标的好方法是什么？或者我应该在单独的文件中坚持使用它们并获得更好的命名约定？如果是这样，您在类似的集合/模型之间使用了什么命名约定？

Answer 1

这是我构建应用程序的方式：

我有一个javascript路径，当客户端访问“/ javascript”时，我正在按需要缩减，所以我的index.html中只有一个脚本行：

<script src='/javascript'></script>

我的/ javascript目录结构如下：

application.js
router.js
lib/
lib/jquery.js
lib/underscore.js
lib/backbone.js
lib/require.js
lib/other_libraries.js
views/
views/navigation.js
views/overlay.js
views/content.js
views/page
views/page/constructor.js
views/page/elements
views/page/elements/constructor.js
views/page/elements/table.js
views/page/elements/form.js
views/page/elements/actions.js
collections/
collections/paginated.js

所有这些文件都在第一个请求中缩小并从客户端加载。通过这样做，在应用程序使用RequireJS发出任何请求之前，我的浏览器中已经加载了很多代码。

在我的服务器上，我有一个目录，它也是公共的，但用于动态javascript加载和模板（可以在任何给定时间通过应用程序的需求访问它）。该目录如下所示：

dynamic/
dynamic/javascript
dynamic/javascript/pages
dynamic/javascript/pages/articles.js

dynamic/templates
dynamic/templates/pages
dynamic/templates/pages/articles.hb
dynamic/templates/pages/items.hb

当我的服务器请求“/templates/pages/articles.hb”时，服务器返回如下所示的JSON对象：

{ html : "<div class='page' id='articles'>blah blah blah</div>", javascript : "javascript/pages/articles.js" }

当我的客户端应用程序在返回的JSON对象中收到“javascript”属性时，它会触发RequireJS请求

if ( typeof json.javascript === string ) {
    require([ json.javascript ], function(constructor) {
         window.app.page = new constructor();
    });
}

在dynamic / javascript / pages / articles.js中我有类似的内容：

define(function() {
   var Model = Backbone.Model.extend({});

   // Collections.Paginated is in fact the Collection defined by /javascript/collection/paginated.js
   // it is already loaded via the initial javascript loading
   var Collection = Collections.Paginated.extend({
       url : '/api/articles'
   });

   // Views.Page is in fact the View defined by /javascript/views/page/constructor.js
   // it is also already loaded via the initial javascript loading
   var articles = Views.Page.extend({

       collection : Collection,

       initialize: function(options) {
            this.collection = new Collection();
       });

   });

   return articles;

});

差不多就是这样。我对RequireJS的请求最少，因为每次遇到require（'something.js'）都会向服务器发出请求，这对你的应用程序速度不利。

因此，您的问题的确切答案（在我看来）是：您应该尽可能地将初始加载的文件分开，但后来加载requireJS的文件应该尽可能小以节省流量。

骨干采集/模型最佳实践

1 个答案: