require.jsの、requireとdefineの違い

require.jsのことがよく分かってなかったので、コード読んで調べてみた。

require と define

• requireは、名前の通り実行すると、ファイルを読み込む。
• defineは、名前の通り定義をすると、キューに突っ込まれるだけで読み込みはしない。

requireを実行すると、<scirpt>でファイルを読み込む。

読み込んだファイル内にはdefine([‘foo/bar’], function() { .. }) とか書いてるのでdefineされてるものはキューに突っ込まれる。

require完了後setTimeout(4ms)したらキューを処理するので、defineしたものも読み込まれる。

読み込んだものは、グローバルなオブジェクトで管理されて同じものは読み込まれないようになっている。

例

foo.js

define([‘bar1’, 'fuga2'], function() { … })

bar1.js

define([‘piyo3’], function() { … }) 

があるとして、

require(“foo”)

を実行する。

fooが読み込まれ、defineのものがキューに入る。[bar1, fuga2]

キューが処理される。最初はbar1。bar1にはpiyo3がdefineされているので、またキューに入る。[fuga2, piyo3]

キューがなくなるまで読み込み続ける。

幅優先探索のようになっている。