複数のファイルにまたがるIIFE

Question

同じIIFEで実行するために2つ以上の別々のファイルでjavascriptコードを定義する必要はありますか？私はgulpのようなビルドツールを使ってこれを実現しています。

ちょうどそのような平凡な問題のようです。私は自分のコードを整理して独自のファイルに分割したいと思っています（ところで、別々のノックアウトビューモデル）。しかし、私は彼ら全員が同じ機能で走り、地球を汚染しないようにしたい。

Answer 1

これを行う現代的な方法は、すべてをIIFEに入れようとするのではなく、モジュールを使用することです。現在、モジュールを使用するとは、RequireJS、SystemJS、Webpack、Browserifyなどのモジュールバンドラを使用することを意味します。中期的な将来、ブラウザで直接ES2015 +モジュールを使用したり、それらを1つのファイルにまとめます。 （あなたはバベルのようなtranspilersとES2015 +モジュール構文今日を使用することができますが、あなたはまだバンドラが必要です。）あなたは、現時点でRequireJSを使用しますが、そのdefine機能を使用していない言及した

。イラストの目的のために、およそモジュールを定義する方法（私はRequireの構文のファンではありませんが、Babelを使用してES2015の構文をトランスペアレントにすることができます）：

define("my-component", ["ko"], function(ko) { 
    // ...define the component... 

    // Return it 
    return MyComponent; 
}); 

：

1. アプリのトップレベルのモジュールが有する必要はなく、例えばように（モジュール名は、オプションであるモジュールがmy-component呼ばれる言うKOコンポーネントを定義モジュール名前）
2. モジュールko（これはKnockoutを提供します）に依存しています。

   define(["my-component", "another-component"], function(MyComponent, AnotherComponent) { 
       // use MyComponent and AnotherComponent here 
   }); 
   

   ：その依存関係は、あなたが私のアプリで

次にモジュールで定義されたトップレベルのものとして、あなたのモジュールにMyComponentを

戻り値を定義するために使用するコールバックの引数として提供されているかに注意してください

簡単にするために、一般的にグループで使用される他のモジュールをグループ化してモジュールを作成することもできます。

my-component.js：ES2015 +構文の代わりに

import ko from "./ko"; 
// ...define MyComponent... 
export default MyComponent; 

app.js：

import MyComponent from "./my-component"; 
import AnotherComponent from "./another-component"; 

// ...use them... 

は明らかに、両方の例は、非常にを簡素化しており、あなたが行うことができ、より多くのがあります。

Answer 2

これは2つの別の問題です。

1. 複数のファイルにまたがることはできますか？いいえ！
2. 複数のファイル内のクラス/関数/ etcはグローバルスコープをポーリングできません - はい！同じことを達成するために101個の方法があるその
非常に単純な例として

FILE1

var myNS = {}; 

FILE2

myNS.MyViewModel = function(){ ... } 

FILE3

myNS.OtherViewModel = function() { ... } 

、。