2017-03-01 9 views
0

私はRequireJSとAMDモジュール定義で作業しようとしています。 (私はjqueryのから行ってもjavascriptのOOPを勉強していない)requirejsで複数のモジュールインスタンスを持つにはどうすればいいですか

myModule.js

define([ 
    jquery, 
    datepicker, 
], function ($, datepicker) { 
    var myModule = { 
     debug: true, 
     lang: 'auto', 

     initModule: function (element) { 
      myModule.element = element; 
     }, 

     // ... other methods 
    } 

    return myModule; 
}); 

そして、それはうまく動作しますが、私は複数の要素/時間、それオーバーライドのためにそれを使用しようとした場合彼自身は、私は同じページで複数回使用することはできません。私のモジュールは彼に自己をオーバーライドしているので、

main.js

requirejs(['MyModule'], 
    function (MyModule) { 

     // all the elements on page 
     $elements = $('.element'); 

     $elements.each(function() { 
      MyModule.initModule($(this)); 
     }); 
}); 

私はページ上の複数の<div class="element">最後のものだけ仕事を持っている

は、私は思います。私はどのような場合には、コンストラクタ、または何か他のものを追加する必要があると思う私は new MyModule()を追加しますが、エラーに TypeError: MyModule is not a constructor

を持ってしようとした

は、オブジェクトの代わりに使用するように私のモジュールのインスタンスを持っている(私はいると思うことrequirejsによってプリコンパイルされ、作業の準備ができました)。どんな助けも良い、多くのおかげで前に!

答えて

0

それのために!私は完全に私のコードをリファクタリングし、代わりに私のモジュール定義にオブジェクトを返す私は彼のインスタンスの後に取得する機能を試作し、プロパティをリセットするために、私はコンストラクタを作成/ varsの:

myModule.js

define([ 
    jquery, 
    datepicker, 
], function ($, datepicker) { 
    // constructor 
    var myModule = function() { 
     // reset lang because it maybe was changed in previous instance, 
     // i think because javascript share this thing trough objects? 
     myModule.prototype.lang = 'auto'; 
    } 

    myModule.prototype.debug = true 
    myModule.prototype.lang = 'auto'; 

    myModule.prototype.initModule = function (element) { 
     myModule.element = element; 
    }; 

    // ... other methods with `myModule.prototype.` prefix 


    return myModule; 
}); 

素晴らしい、今私はmyModuleトラフnew myModuel()構文を呼び出すことができ、ページ上のさまざまな要素に対して同じ機能を持っています。私にとって

main.js

requirejs(['MyModule'], 
    function (MyModule) { 

     // all the elements on page 
     $elements = $('.element'); 

     var p = 1, _mod = []; 
     $elements.each(function() { 
      _mod[p] = new MyModule(); 

      _mod[p].initModule($(this)); 
      p++; 
     }); 
}); 

この作品、私は完全に私が何をするかまだ理解していないが、私の目的はsatisfatedされ、私は、ページ上の異なるelemntsに同じモジュール機能を再利用することができます。

私に読書を提案する: OOP Javascript、プロトタイプ、およびjavascriptがメモリと名前空間でinstance/class/object/varを管理する方法について、何かを安全に読む必要があります。

関連する問題