さまざまなAMDモジュールでリソースを共有します

StackOverflow https://stackoverflow.com/questions/8842223

  •  27-10-2019
  •  | 
  •  

質問

現在、新しいWebアプリケーションを開発しています。

AMDモジュールを使用してrequireJSを使用しているのはこれが初めてです。

私が理解しているように、グローバルネームスペースに変数はありません。

以前のWebアプリケーションでは、さまざまなモジュールでいくつかのリソースを共有するために使用できるグローバルネームスペースに常に1つの変数がありました。

必要に応じて、AMDモジュールが必要になり、backbone.jsとjQuery（両方ともAMDバージョン-JQuery 1.7.1およびBackbone.js 0.5.3 -OPTAMD3）を使用します。

アプリケーションのどこかで、サーバー（ユーザーオブジェクト）からbackbone.jsモジュールを取得します。さまざまなAMDモジュールからこのモジュールにアクセスしたいと思います。また、アプリケーションワイドイベントオブジェクトも持ちたいです。

教えてください：さまざまなモジュールでリソースを共有するための要求JS AMDの正しい方法は何ですか？

役に立ちましたか？

解決

自分で解決策を見つけました。

Intothevoid、あなたの答えをありがとう。しかし、私はAMDのような解決策を望んでいました。これは、再びグローバルネームスペースを「汚染」することではないことを意味します。

私のソリューションには2つの鍵がありました。

"https://github.com/addyosmani/backbone-aura「Addy Osmaniと」https://github.com/amdjs/amdjs-api/wiki/amd「非同期モジュール定義（AMD）API仕様。

仕様によると、「工場が関数である場合、1回しか実行されません。」

したがって、AMDモジュールがWebアプリケーションの依存関係として複数回指定されている場合、依存関係はだけではありません 複数回ロードされていません, 、 それも 複数回実行されていません, 、そしてこれは私にとって新しいことです。 1回だけ実行され、工場関数の返品値が保持されます。同じパスの各依存関係には同じオブジェクトがあります。そして、これはすべてを変えます。

したがって、次のAMDモジュールを定義するだけです。

define([], function() {
    var app_registry = {};
    app_registry.global_event_obj = _.extend({}, Backbone.Events);
    app_registry.models = {};
    return app_registry;
});

これで、リソースを共有したいモジュールでは、このapp_registryモジュールを依存関係として宣言し、次のことを書き込みます。

define(['jquery','underscore','backbone','app_registry'], 
  function ($, _, Backbone, app_registry){
    var firstView = Backbone.View.extend({
    initialize: function() {
        _.bindAll (this, 'methodOne'); 
        this.model.bind ('change', this.methodOne);   
        this.model.fetch();
    },  
    methodOne: function() {
        app_registry.models.abc = this.model;
    }
    ...

そしてもう一方：

define(['jquery','underscore','backbone','app_registry'], 
  function ($, _, Backbone, app_registry){
    var secondView = Backbone.View.extend({
    initialize: function() {
       _.bindAll (this, 'methodTwo'); 
        app_registry.global_event_obj.bind ('special', this.methodTwo);
    },  
    methodTwo: function() {
        app_registry. ...
    }
    ...

他のヒント

アプリケーションワイドイベントオブジェクトの提供方法に関する質問に答えるには、GlobalContextというAMDモジュールを作成し、main.jsにインスタンス化できます。
その後、GlobalContextに設定を添付し、グローバルコンテキストを使用してサブコンポーネントなどを作成できます。

    //main.js file
    require([ "./global-context" ], function( GlobalContext) {
             new GlobalContext();
    });

Global-Context.jsファイルでは、子のモジュールをロードするなどのタスクを実行できます

    define(["Boiler", "./settings", "./modules/modules"], 
           function (Boiler, settings, modules) {
                  var GlobalContext = function () {

                //here we use a template javascript class called Boiler.Context
                var globalContext = new Boiler.Context("GlobalModule");

                //add settings to the context which can be obtained globally throughout                    the application
                globalContext.addSettings(settings);

                //here we load the sub modules of the global context
                globalContext.loadChildModules(modules);
};

これが私たちが実装したものです ボイラープレートJS, 、大規模なJavaScript製品開発のための参照アーキテクチャ。

初期化パターンを使用して、任意の値をrequireJSモジュール（別名「依存関係インジェクション」）に注入できます。

コードのどこでも必要な電話をかけます：

var MyBackboneModule;

MyBackboneModule = someWayToGetAReferenceToIt();

require("module", function(Module) { 
  Module.initialize(MyBackboneModule);
});

module.jsファイルがasを定義します

define([], function(){
   var BackboneModuleDoingThisAndThat;

   function initialize(pBackboneModule) {
      BackboneModuleDoingThisAndThat = pBackboneModule ;
   };

   function doSomething() {
      var x = BackboneModuleDoingThisAndThat.computeThis(42);
   };


   return { 
      initialize: initialize
   };
});

単一のグローバルを定義できます APP エントリポイントAMDモジュール。 APP 他の共有モジュールへの参照を作成して保持できます。

APP = {
    this.settings : function() {
        if(settingsModule == undefined){
            //require, create and return it
        } else {
            return settingsModule;
        }
    }
}

あなた自身の答えに関するコメント - app_registryモジュールで関数を定義する必要はありません。

define({
  global_event_obj: _.extend({}, Backbone.Events);
  models: {}
});

十分である必要があります。

見る： ドキュメント

ただし、これらのことに注意してください。共有データモジュールが理にかなっているユーザーケースがあります。しかし、それを擬似グローバルネームスペースとして使用することになった場合、それは単にグローバルを使用するよりもはるかに良いことではありません（それがあなたがしていることだと言っているのではありません）。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top