Tworzenie luźno połączonej i wielostronicowej aplikacji JS przy użyciu Core ( Mediator) / Sandbox(Fasada) / Module pattern - porady?

Jedną z rzeczy, które zrobiliśmy, aby Historia działała płynnie, była pierwsza zmiana adresu URL. Po zmianie adresu URL zdarzenie zostanie wywołane, router przetworzy adres url, a następnie wykona co zrobić. To zdarzenie zostanie automatycznie wywołane również podczas ładowania strony. Jeśli klikniesz link, po prostu zmienisz adres URL, który jest dość prosty i całkowicie oddziela linki / przyciski od logiki aplikacji. To wydawało się działać dobrze dla naszej aplikacji. Użyliśmy JQM, ale zrzuciliśmy większość ich router ponieważ przeczytaliśmy większość naszych instrukcji z jakiegoś pliku XML i nie mieliśmy kilku stron HTML do załadowania do głównego obszaru widoku.

Często widziałem aplikacje szkieletowe używające routera jako rdzenia / mediatora. To dobry pomysł. Możesz po prostu słuchać zmian zdarzeń dla adresu URL, a następnie odpowiednio zmienić stronę. Ten Mediator powinien być prawdopodobnie singletonem, chociaż singletony są trudniejsze do testu jednostkowego.

Rzecz, z którą niekoniecznie się zgadzałem, to jej definicja "widoków". Widok wydaje się jakby akcją w kontrolerze (dobrze z niektórych perspektyw). W tym momencie dodaliśmy jeszcze jeden poziom separacji w naszej aplikacji. Nasze poglądy sprawiły, że żądania ajax do plików szablonów, które zostały wypełnione niektórymi JSONAMI i kierownicami.js. Powiedziałbym, że Twój nagłówek / pasek boczny powinien być tylko szablonami. Jeśli chcesz je odświeżyć, zobacz, jak możesz zrobić bardzo prosto, w przeciwnym razie patrzysz na utworzenie 4 nowych modułów: kolekcja dla listy, model dla każdego widok elementu, kolekcji i modelu. Chciałbym kilka szablonów bardziej ściśle z jakiegoś widoku wyższego poziomu, aż trzeba je dalej rozbić (np. niektóre "Application/Main View").

Posiadanie tej warstwy szablonu pozwala na wprowadzanie powierzchownych zmian bez rekompilacji, co jest miłe. Za każdym razem, gdy możesz umieścić rzeczy w "meta", jest to wygrana (no chyba, że wymaga to odczytu XML (ha)). Jako bonus Możesz również buforować szablon osobno (lub buforować go osobno Materia).

Twoja Architektura wydaje się jednak w porządku i jest poprawnym podejściem do twojego problemu. Jedna rada, którą bym dał, to nie przesadzaj z projektowaniem z góry. Iteracja jest najlepsza. Trzeba będzie refaktor. Nie można przewidzieć, co sprawi, że Twoja aplikacja będzie płynniejsza z 3-6-miesięcznym wyprzedzeniem.

Aktualizacja 18 grudnia 2013

Teraz używamy marionetki i więcej sztuczek addy osmani. Oprócz powyższych elementów używamy alternatywnego formatu AMD:

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

We korzystają również z klasy aplikacji marionette w połączeniu z wreqr, który zapewnia warstwę żądania / odpowiedzi. Pozwala nam to na czyste ustawianie obiektów aplikacji. Pozwala nam również definiować klasy bez jawnego podawania nazwy klasy. To całkiem dobry sposób na piaskownicę. EG:

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

// elsewhere

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

Należy również zamówić Aura js i web components. Nasza struktura katalogów naśladuje / antycypuje te pojęcia bez inwestowania jeszcze w nich.