2

RequireJsとBackbone.Marionetteを使用している Web アプリのファイル構造を次のように整理しました。

|- main.js
|- app.js
|- /subapp1
    |- subapp1.js
    |- subapp1.router.js
|- /subapp2
    |- subapp2.js
    |- subapp2.router.js
|- /colections
|- /views

モジュールをロードするには、requireJs を使用します。
これが私のコードです。モジュールごとにいくつかの質問をしました。

// main.js
define([
    'app',
    'subapp1/subapp1.router',
    'subapp2/subapp2.router'
], function (app) {
    "use strict";
    app.start();
});

質問:
1) サブアプリにアプリが必要な場合でも、アプリとサブアプリを非同期にロードするのは正しいですか?
2）サブアプリの場合、アプリを必要とするルーターをロードするのは正しいですか？

// app.js
/*global define*/
define([
    'backbone',
    'marionette',
    'models/user'
], function (Backbone, Marionette, UserModel) {
    "use strict";

    var App = new Marionette.Application();

    App.addRegions({
        header: '#header',
        sidebar: '#sidebar',
        mainColumn: '#main-column',
        rightColumn: '#right-column'
    });

    App.on("initialize:before", function () {
        this.userModel = new UserModel();
        this.userModel.fetch();
    });

    App.on("initialize:after", function () {
        Backbone.history.start();
    });

    return App;
});

質問:
3)subAppsが必要になる可能性があるため、modelsにロードすることにしましたapp.js。このままでいいの？

// subapp1/subapp1.js
/*global define*/
define([
    'app',
    'subapp1/views/sidebarView',
    'subapp1/views/headerView'
], function (app, SidebarView, HeaderView) {
    "use strict";

    app.addInitializer(function(){
        app.header.show(new HeaderView({userModel: app.userModel}));
        app.sidebar.show(new SidebarView({userModel: app.userModel}));
    });

});

質問:
4) このモジュールについてapp.addInitializer. たとえば、実行時に がフェッチされる
かどうかはわかりません。大丈夫ですか？app.userModelapp.header.show

// subapp1/subapp1.router.js
/*global define*/
define([
    'marionette',
    'tasks/app'
], function (Marionette, app) {
    "use strict";
    var Router = Marionette.AppRouter.extend({

        appRoutes: {
            'tasks': 'tasks',
            'tasks/:id': 'taskDetail',
            '*defaults': 'tasks'
        }

    });

    return new Router({
        controller: app
    });
});

質問: 5)の代わりに
からロードしても問題ありませんか?main.jssubapp1/subapp1.routersubapp1/subapp1

4

1 に答える 1

1

1)サブアプリにアプリが必要な場合でも、アプリとサブアプリを非同期にロードするのは正しいですか?

あなたappとのいずれかを非同期にロードできるはずsub-appsです。sub-appsmain が必要な場合はapp、それを依存関係としてリストする必要があります。RequireJS が依存関係を解決します。

注意すべきことは循環依存関係だけですが、それは修正できないものであってはなりません。

2）サブアプリの場合、アプリを必要とするルーターをロードするのは正しいですか？

あなたの音の中routersのあなたのリストは私にぴったりです。sub-appsmain.js

3)subAppsが必要になる可能性があるため、modelsにロードすることにしましたapp.js。このままでいいの？

モジュールは、依存関係として使用する他のすべてのモジュールをリストする必要があります。したがって、両方が requireを必要とする場合app.js、両方とも依存関係の 1 つとしてリストする必要があります。subapp1/subapp1.jsmodels/user.jsmodels/user.js

このようにして、不要になった方法でモジュールのいずれかを変更した場合models/user.js、別のモジュールで依存関係が失われるリスクなしに、その特定のモジュールから依存関係を削除できます。

依存関係を管理するための最も簡単な方法であるだけでなく、将来コードを検討するときに、他の開発者や自分自身にとっても良いことです。

4) このモジュールについてapp.addInitializer.

app.userModelたとえば、実行時に がフェッチされるかどうかはわかりませんapp.header.show。大丈夫ですか？

データの取得は手動で開始する必要があります。でビューを表示するとレンダリングRegionがトリガーされますが、ビューのトリガーやデータのフェッチはトリガーされません。ViewModelCollection

できることは、orでviewイベントをリッスンし、 orが新しいデータを正常に取得したら、ビューを再レンダリングすることです。マリオネットはいくつかのイベントを に自動的にバインドし、そのイベントは何らかの変更があった場合に自動的に管理するようになっています。ModelCollectionModelCollectionCollectionViewaddchangeremoveCollectionItemViewsCollection

main.js5)のsubapp1/subapp1.router代わりにからロードしても問題ありsubapp1/subapp1ませんか?

質問 2 で既に述べたように、ルーターを にロードするとよいでしょうmain.js。

これを行う理由の 1 つは、事前にすべてをロードするのではsub-appsなく、実際に必要になったときにのみロードすることを決定できることです。そのような のルートがトリガーされる瞬間は、 のコア モジュールと、場合によってはその依存関係の一部sub-appをロードするのと同じくらい良い時期sub-appですが、もちろん、 がロードされる前に をアクティブにする必要sub-appがあります。Routersub-app

于 2013-01-02T19:38:58.257 に答える