Erstellen Sie eine lose gekoppelte & multi-page-JS-Anwendung mit Core(Mediator) / Sandbox(Fassade) / Modul-Muster — Beratung?

Eine Sache, die wir getan haben, um zu halten die Geschichte reibungslos funktioniert, wurde zunächst die änderung der URL. Bei änderung der URL ein Ereignis hätte ausgelöst werden, der router würde die url analysiert, dann herauszufinden, was zu tun ist. In diesem Fall würde automatisch ausgelöst, die beim laden der Seite als auch. Wenn Sie auf einen link geklickt, es würde ändern Sie einfach die URL, die ist ziemlich einfach und vollständig entkoppelt links/buttons aus der Anwendungslogik. Dies schien zu funktionieren gut für unsere Anwendung. Wir verwendet JQM, aber wir ließen die meisten Ihren router, da Lesen wir die meisten unserer Instruktionen von einigen XML-Datei und nicht ein Haufen von HTML-Seiten laden, in dem hauptansichtsfenster Bereich.

Habe ich oft gesehen, backbone-Anwendungen benutze den router als Kern/Vermittler. Das ist eine gute Idee. Sie können hören Sie einfach auf change-Ereignisse für die URL, und ändern Sie dann die Seite entsprechend. Dieser Vermittler muss wohl ein singleton, obwohl singletons sind schwerer zu unit-test.

Die Sache, die ich nicht unbedingt einer Meinung mit Rückgrat war seine definition von "Ansichten". Die Ansicht irgendwie scheint eine Aktion in einem controller (auch aus einigen Perspektiven). Wir Hinzugefügt eine weitere Stufe der Trennung in unserer Anwendung an diesem Punkt. Unsere Meinung ajax-Anfragen-Vorlage-Dateien, die gefüllt waren mit einigen JSON und handlebars.js. Ich würde sagen, dein header/sidebar sollte nur auf Vorlagen. Wenn Sie aktualisieren müssen Sie dann sehen, wie Sie tun könnte extrem einfach anders Ihr schaut auf die Schaffung von 4 neuen Module: Sammlung für eine Liste, Modell für jedes Element, collection view-und model-Ansicht. Ich würde paar Vorlagen mehr eng mit einigen der höheren Ebene anzeigen, bis Sie müssen weiter unterteilt werden, (zB. einige "Application/Main View").

Dass diese Vorlage Schicht ermöglicht es Ihnen, änderungen an der Oberfläche, ohne neu zu kompilieren, das ist schön. Jederzeit können Sie die Dinge in die "meta" es ist ein Gewinn (auch wenn es erfordert, dass Sie zum Lesen von XML (ha)). Als bonus kann man dann den cache der Vorlage separat als gut (oder cache-Büste, es separat für diese Angelegenheit).

Ihre Architektur scheint gut, obwohl, und ist ein Gültiger Ansatz für Ihr problem. Ein Tipp, den ich geben würde ist, dass Sie nicht über design-up-front. Iteration ist am besten. Sie müssen umgestalten. Es ist unmöglich vorauszusehen, was wäre Ihre Anwendung mehr reibungslos fließen 3-6 Monate im Voraus.

Update am Dez 18th, 2013

Nun wird ein Tag sind wir mit marionette und mehr addy osmani tricks. Auf der Oberseite der oben genannten Elemente, wir sind mit der AMD-Alternative format:

define(function(require) {
    var myTemplate = require('hb!mytemplate.handlebars'),
        view = require('myview');
    ...
});

Sind wir auch mit der marionette Anwendung der Klasse in Verbindung mit wreqr die eine Anforderung/Antwort-Schicht. Diese können Breite Anwendung Objekte sauber. Es erlaubt uns auch Klassen definieren, ohne explizit den Namen der Klasse. Dies ist ein ziemlich guter Weg, um in der sandbox. EG:

this.app.setHandler('CanvasClass', function() {
    return RaphaelCanvasView;
});

//elsewhere

this.app.request('CanvasClass').text('123', {x:1, y:2});

Dies alles scheint zu funktionieren ziemlich gut.

Sollten Sie auch Kasse aura js-und web-Komponenten. Unsere directory-Struktur, die Art der mimik/rechnet diese Konzepte, ohne in Sie investieren noch.