2

require を使用してモジュールをロードする必要がある小さなアプリ ( initApp.js、initApp.routinj.js、 ) を作成しています。 これが私のコードです（*）。 各モジュールで使用すると、モジュールがロードされる順序は次のようになります。initApp.controller.js

console.log

1) initController 
2) initRouting 
3) initApp

これは正しい順序ですか？

さて、別の質問です。
ではand (で定義)initApp.controller.jsのような関数にアクセスする必要があります。しかし、私のコード ( ) からわかるように、 を返します。 この問題を修正するために、 で関数を定義しました。 しかし、確かに、このタスクを達成するためのより良い方法があります。 何か案が？ ありがとうinitHeaderinitSidebarinitApp.js
initApp.controller.jsconsole.log('initController', app);undefined
getAppinitApp.controller.js


(*)

** main.js **

define([
    'js/app',
    'js/init/initApp',
//    'js/tasks/tasksApp'
],
function (App)
{
    "use strict";
    App.initialize();
});

** initApp.js **

/*global define*/
define([
    'backbone',
    'js/app',
    'js/init/initApp.routing',
    'js/init/views/sidebarView',
    'js/init/views/headerView',
],
function (Backbone, App, Router, SidebarView, HeaderView)
{
    "use strict";
    console.log('initApp', Router)
    var initApp = new Backbone.Marionette.Application({

        initHeader: function ()
        {
            var headerView = new HeaderView();
            App.header.show(headerView);
        },

        initSidebar: function ()
        {
            var sidebarView = new SidebarView();
            App.sidebar.show(sidebarView);
        }

    });

    return initApp;
});

** initApp.routin,js **

/*global define*/
define([
    'backbone',
    'marionette',
    'js/init/initApp.controller'
],
function(Backbone, Marionette, controller)
{
    "use strict";
    console.log('initRouting', controller)
    var Router = Backbone.Marionette.AppRouter.extend({

        appRoutes: {
            '*defaults': 'index'
        }

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

});

** initApp.controller.js **

/*global define*/
define([
    'js/init/initApp'
],
function(app)
{
    "use strict";
    console.log('initController', app); // undefined
    var getApp = function () {
        var initApp;
        require(['js/init/initApp'], function (app) {
            initApp = app;
        });
        return initApp;
    };

    var controller = {
        index: function ()
        {
            var app = getApp();
            app.initHeader();
            app.initSidebar();
        }
    }

    return controller;

});
4

2 に答える 2

2

それが物事を実装する正しい方法になるかどうかはわかりませんが、あなたの場合、この順序でモジュールをロードするとうまくいきます。 

1) initApp
2) initController
3) initRouting

つまり、次のようにするmain.js必要があります。

define([
    'js/app',
    'js/init/initApp.routing'
],
function (App)
{
    "use strict";
    App.initialize();
});
于 2012-06-17T09:35:22.187 に答える
1

ファイルに循環依存関係があります: initApp -> initApp.routing -> initApp.controller -> initApp. これがあなたが得ている理由ですundefined。

宣言時に、クラス/オブジェクトを定義するとき、コードに依存関係がある場合にのみ順序が重要になります。私の場合、initApp.js でルーターとコントローラーを初期化したので、次のようになりました。

initApp.js

define(['backbone', 'js/init/initController', 'js/init/initApp.initRouting', ...],
function(Backbone, controller, Router, ...) {
  return {
    initialize: function() {
      // Store a namespaced global reference to my app.
      window.MyApp = new Backbone.Marionette.Application();
      MyApp.addRegions({...});
      MyApp.addInitializers(function(options) {
        MyApp.router =  new Router({controller: controller});
        // Other init stuff...
      });
      MyApp.start();
    }
  };
});

アプリへの参照を window.MyApp に保存しているため、追加のロジックを必要とせずに、JS ファイル全体でアクセスできるようになりました。たとえば、コントローラーまたは任意のビューからリージョンに直接アクセスできます。

MyApp.myRegion.show(someView);

したがって、私の main.js は非常に最小限です。

require(['app', 'backbone', 'json2'], function(app){
  window.console = window.console || {log: function() {}}; // Needed for IE.
  app.initialize();
});

ルーターまたはコントローラーの JS ファイルは、相互に依存したり、App ファイルに依存したりしません。

initApp.Routing.js

define([
  'jquery',
  'underscore',
  'backbone'
  ], function($, _, Backbone) {
  var Router = Backbone.Marionette.AppRouter.extend({
    appRoutes: {
      // My routes go here...
    }
  });
  return Router;
});

つまり、アプリでルーターを初期化することで、JS ファイル間の依存関係を減らします。

同様に、私のコントローラーは、さまざまなビューとコレクションに対して下向きの依存関係しかありません。

initApp.Routing.js

define([
  'jquery',
  'underscore',
  'backbone',
  'myview',
  'mycollection'
  ], function($, _, Backbone, View, Collection) {
  var controller = {
    showMyView: function() {
      // ...
    }
  });
  return controller;
});

理解するのに時間がかかったのは、宣言と実行の違いでした。JS ファイルで何かを宣言する (つまり、オブジェクトをラップするか、extend を呼び出す) だけである限り、main.js' を介して実行するための単一のエントリポイントがあり、安全で、どこからでもオブジェクトapp.initialize()にアクセスできます。 MyApp.

アップデート

他の JS ファイルでアプリケーション インスタンスにアクセスする別の方法については、更新された Backbone.Marionette wiki のAccess Your Application Instance From Other Modulesを参照してください。

于 2012-06-19T02:40:21.357 に答える