骨干网收集/模型最佳实践

Question

In my application we are using RequireJs and Backbone

So a typical model might look like the following in a separate file so we can attempt to modularize this application better:

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;
});

Right now we keep each model and collection in its own file and return the Model/Collection as above. The bigger the application gets the harder it is to keep the files and naming convention straight. I would like to combine similar collections/models together into 1 file and maintain the modularity.

What is a good way to achieve this? Or should I stick with them in separate files and get a better naming convention? If so, what do you use for your naming convention between similar Collections/Models?

Answer 1

This is the way I structure my application :

I have a javascript path, which I'm minifying on demand by the server when client access "/javascript", so I have only one script line in my index.html :

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

My directory structure of /javascript is the following :

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

All those files are minified and loaded from client in the first request. By doing this I have a lot of my code already loaded in my browser before the application makes any requests with RequireJS.

On my server I have a directory, which is also public, but is for dynamic javascript loading and templates ( it is accessed by demand from the application at any given time ). The directory looks like this :

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

When my server requests "/templates/pages/articles.hb" the server returns JSON object which looks like this :

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

And when my client app receives "javascript" property in the returned JSON object it triggers a RequireJS request

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

In the dynamic/javascript/pages/articles.js I have something like :

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;

});

Pretty much that's it. I have minimum requests with RequireJS, because every time you hit require('something.js') it makes a request to the server, which is not good for your application speed.

So the exact answer of your question ( in my opinion ) is : You should make your initial loaded files separated as much as possible, but later loaded files with requireJS should be as small as possible to save traffic.