6

私は新しい会社で働き始めたばかりで、多くのJSで私には完全に間違っているように見える何かに気づきました。私はかなり後輩で、JSの専門家ではなく、2日目であり、愚かに見えたくないので、これが間違っていることを確認せずにそれを持ち出すのは少し躊躇しています。

したがって、通常、モジュールパターンは次のようになります。

MODULENAME = MODULENAME || {};

MODULENAME.SUBMODULENAME = (function() {
    var bla = {};

    bla.somefunction = function() {
        //do stuff
    };

    //add more stuff to bla
    return bla;
}());

彼らがコード全体に持っているのは：

MODULENAME = MODULENAME || {};

MODULENAME.SUBMODULENAME = (function() {
    var that = this;

    that.somefunction = function() {
        //do stuff
    };

    //add more stuff to that
    return that;
}());

もちろん、関数はnewキーワードを使用したコンストラクターとしてもメソッドとしても呼び出されていないため、thisにバインドされ、としてwindow定義thatされていますthis。したがって、基本的にすべてをグローバルオブジェクトにダンプし、すべてのサブモジュール名は実際にはのエイリアスですwindow。誰かがこれをしたいと思う理由はありますか？それとも、これは私が思うほど本当に間違っているのでしょうか？

編集：

サブモジュール定義の前に置くのを間違えましたvar。元々、少し違うものを書き、を削除するのを忘れていましたvar。私も例をもう少し明確にしようとしましたが、うまくいけば、私が今何を意味しているのかがより明確になります。

編集2：

また、Firebugで実行されているスクリプトを見てきましたが、それらは間違いなくすべてを追加してwindowいます。そのオブジェクトは完全に混乱しています。

4

2 に答える 2

3

はい、それは間違っているように見えます。

MODULENAME = MODULENAME || {}; // missing var

var MODULENAME.SUBMODULENAME = (function() { // probably the missing var from above...
    var that = this;
    //add some stuff to that
    return that; // that is the WINDOW- wrong.
}());

それが与えることができるダメージのデモ：

var x = function() {
    alert('out');
}
var MODULENAME = MODULENAME || {};

MODULENAME.SUBMODULENAME = (function() {
    var that = this;
    that.x = function() {
        alert('DAMAGE');
    }
}());

x();​ // alert DAMAGE and not "out" - messed up with the global object!
于 2012-05-09T01:18:30.763 に答える
0

モジュールパターンが誤って使用されており、関数式を使用して関数宣言に何も提供されない場合に関数式を使用しない理由の1つです。グローバル関数を作成することを意図している場合（これは疑わしいですが）、次を使用する必要があります。

function somefuncion() {
  ...
}

それらの意図がオブジェクト（この場合はメソッド）をオブジェクトに追加することである場合（この場合はより可能性が高い）、次のようになります。

MODULENAME.SUBMODULENAME.somemethod = function() { /* do stuff */ };

特徴検出に基づいて、条件付きでメソッドを作成する必要がある場合は、次のことが適しています。

(function(global, undefined) {

  // In here global is the global object
  global.MODULENAME = global.MODULENAME || {};
  global.MODULENAME.SUBMODULENAME = global.MODULENAME.SUBMODULENAME || {};

  // and undefined is undefined, belt and braces approach
  undefined = void 0;

  // Direct assignment
  function somemethod() {
      //do stuff      
  };

  // Assign directly to the "namespace" object
  MODULENAME.SUBMODULENAME.somemethod = somemethod;

  // Conditional assignment
  if ( sometest ) {
    MODULENAME.SUBMODULENAME.anothermethod = function(){...};

  // Try another way...
  } else if (someOtherTest) {
    MODULENAME.SUBMODULENAME.anothermethod = function(){...};

  // Default
  } else {
    MODULENAME.SUBMODULENAME.anothermethod = function(){...};
  }

  // Clean up 
  global = null;

}(this));

上記の問題の1つは、外部関数内で宣言されたすべての関数が関数オブジェクトとその環境へのクロージャを持っているため、リソースを少し浪費することです。シンプルに保ち、本当に必要な場合にのみモジュールパターンを使用し、そうでない場合は単純な関数宣言と割り当てを使用する方がはるかに効率的です。ファンキーではありませんが、より実用的です。

于 2012-05-09T03:04:26.193 に答える