Backbone Sammlung/Modell Best Practice

Question

In meiner Anwendung wir RequireJs und Backbone

So ein typisches Modell in einer separaten Datei wie folgt aussehen könnte verwenden, damit wir versuchen, diese Anwendung modularisieren besser:

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

Momentan behalten wir jedes Modell und jede Sammlung in einer eigenen Datei und geben das Model/Collection wie oben beschrieben zurück. Je größer die Anwendung wird, desto schwieriger ist es, die Dateien und Namenskonventionen einzuhalten. Ich würde gerne ähnliche Kollektionen/Modelle in 1 Datei zusammenfassen und die Modularität beibehalten.

Was ist ein guter Weg, dies zu erreichen? Oder sollte ich mit ihnen in separaten Dateien bleiben und eine bessere Namenskonvention erhalten? Wenn ja, was nennst du für deine Namenskonvention zwischen ähnlichen Sammlungen/Modellen?

Answer 1

Dies ist die Art, wie ich meine Anwendung strukturieren:

ich eine Javascript-Pfad haben, der auf Anforderung durch den Server, wenn Client-Zugriff „/ javascript“ Ich bin minifying, so habe ich nur eine Skriptzeile in meinem index.html:

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

Meine Verzeichnisstruktur/javascript ist folgende:

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 diese Dateien werden minimieren und vom Client in der ersten Anforderung geladen. Dadurch habe ich viel Code in meinem Browser geladen, bevor die Anwendung RequireJS anfordert.

Auf meinem Server habe ich ein Verzeichnis, das auch öffentlich ist, aber ist für das dynamische Laden von Javascript und Vorlagen (es wird durch Nachfrage von der Anwendung jederzeit zugegriffen). Das Verzeichnis sieht wie folgt aus:

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 

Wenn mein Server Anfragen "/templates/pages/articles.hb" gibt der Server JSON-Objekt, das wie folgt aussieht:

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

Und wenn mein Client-Anwendung erhält "javascript" Eigenschaft in dem Objekt JSON zurückgegeben es löst eine RequireJS anfordern

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

in dem dynamisch/javascript/pages/articles.js habe ich so etwas wie:

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; 

}); 

So ziemlich das ist es. Ich habe Mindestanforderungen mit RequireJS, da jedes Mal, wenn Sie require ('something.js') drücken, eine Anfrage an den Server gestellt wird, was nicht gut für Ihre Anwendungsgeschwindigkeit ist.

Also die genaue Antwort Ihrer Frage (meiner Meinung nach) ist: Sie sollten Ihre initial geladenen Dateien so weit wie möglich getrennt, aber später geladene Dateien mit requireJS sollten so klein wie möglich sein, um Verkehr zu speichern.