複数のファイルを使用する場合、どのように関数をグローバル名前空間から除外しますか？

Question

私はJSで大規模なアプリケーションを構築しましたが、require.jsを使用しました。これは素晴らしいことですが、ファイルを非同期でロードしたくない場合はかなりのオーバーヘッドになる可能性があります。それ。

今回は純粋なJSで書いています。Gruntを使ってすべてを連結して縮小しています（私はGrunt n00bです）。私はすべての関数を別々のファイルに保存しているので、1つのファイルを使用していた場合と同様に、すべてをクロージャでラップすることはできません。すべての機能をグローバル名前空間から守る最良の解決策は何ですか？

私は完全な依存関係管理ソリューションが必要かどうかはわかりませんが、軽量でシンプルであれば1つ考えます。

Answer 1

共通して、CommonJS（require.jsで使用される仕様）またはES2015 module specificationを実装する（ベンジャミンが示唆したように）Webpackを含め、Browserifyのいずれかにより、アプリケーション全体の依存関係を管理するためのJavaScriptツールを使用して簡単に数がありますが、およびRollup。

Answer 2

あなたはどのような依存性管理ツールなしでそれをしたい場合は、たとえばRevealing Module Patternと名前空間、簡単な例を使用することができます。

トップ/アプリケーションファイル

window.SomeApplication = (function() { 
    // Add functions you want to expose to this 
    this.require= function (path) { // Creates namespace if not already existing, otherwise returns reference to lowest level object in path 
     var current = window, 
       i; 

     path = path.split('.'); 
     for (i = 0; i < path.length; ++i) { 
      if (!current[path[i]]) { 
       current[path[i]] = {}; 
      } 
      current = current[path[i]]; 
     } 

     return current; 
    }; 

    return this; 
})(); 

他のいくつかのファイル

SomeApplication.require('SomeApplication.SomeSubNamespace').SomeModule = (function() { 
    // Module code 

    return this; 
})(); 

最初にトップファイルを指定します。これにより、ウィンドウオブジェクトに1つのアイテムしか公開されず、モジュールはwindow.SomeApplication.SomeSubNamespace.SomeModuleからアクセス可能になります。