ウェブサイトが徐々に豊かになるにつれて、WebページのJSはますます複雑で肥大化しています。スクリプトタグを介してJSファイルをインポートする元の方法は、現在のインターネット開発モデルを満たすことができなくなりました。チームのコラボレーション、モジュールの再利用、ユニットテストなど、一連の複雑なニーズが必要です。
requirejsは非常に小さなJavaScriptモジュールロードフレームワークであり、AMD仕様の最高の実装者の1つです。 requirejsの最新バージョンは、圧縮後わずか14kで、これは非常に軽量です。また、他のフレームワークと組み合わせて動作する可能性があり、requirejsを使用すると、フロントエンドコードの品質が確実に向上します。
何が必要かを必要とする可能性があります
requirejsの公式説明：
requirejsはJavaScriptファイルとモジュールローダーです。ブラウザー内の使用に最適化されていますが、RhinoやNodeなどの他のJavaScript環境で使用できます。 requirejsのようなモジュラースクリプトローダーを使用すると、コードの速度と品質が向上します。
一般的な意味：
ブラウザでは、JSファイルのモジュールローダーとして使用できます。または、ノードおよびRhino環境、バラバラで使用できます。モジュラーロードとは何ですか？次のページから1つずつ説明します
まず一般的なシナリオを見て、例を介してrequirejsを使用する方法を説明しましょう
通常の書き込み方法
index.html：
<！doctype html> <html> <head> <script type = "text/javascript" src = "a.js"> </script> </head> <body> <span> body </span> </body> </html> </html>
A.JS：
function fun1（）{alert（ "works"）;} fun1（）;多分あなたはこれを書くことを好むでしょう
（function（）{function fun1（）{alert（ "works"）;} fun1（）;}）（）（）2番目の方法では、ブロックスコープを使用して、関数がグローバル変数の汚染を防ぐことを宣言します。エッセンスはまだ同じです。上記の2つの例を実行すると、アラートが実行されたときにHTMLコンテンツが空白であること、つまり<span> body </span>が表示されず、確認後にのみ表示されることに気付いたかどうかはわかりません。これは、JSがブラウザレンダリングをブロックした結果です。
requirejs書き込み方法
もちろん、まず第一に、js-> requirejs.rogをダウンロードするには、requirejsのWebサイトにアクセスする必要があります
index.html：
<！doctype html> <html> <head> <script type = "text/javascript" src = "require.js"> </script> <script = "text/javascript"> require（["a"]）; </script> </head> <body> <span> body </span> </body> </html>
A.JS：
define（function（）{function fun1（）{alert（ "works"）;} fun1（）;}）ブラウザは「動作する」というプロンプトをプロンプトします。つまり、正しく実行されますが、少し違いがあります。今回はブラウザが空白ではなく、ボディがページに表示されています。これまでのところ、requirejsには次の利点があることを知ることができます。
1. JSロードがページレンダリングをブロックするのを防ぎます
2。プログラムコールを使用してJSをロードして、次の醜いシーンを防止します
<script type = "text/javascript" src = "a.js"> </script> <script = "text/javascript" src = "b.js"> </script> <script type = "text/javascript" src = " src = "d.js"> </scrip> <script = "text/javascript" src = "e.js"> </script> <script> <script> <script type = "text/javascript" src = "f.js"> </script> <script = "text/javascript" src = "f.js" src = "g.js"> </scrip> <script type = "text/javascript" src = "h.js"> </script> <script> <text/javascript "src =" i.js "> </script> <script =" text/javascript "src =" j.js "> </script>
上記はこの記事に関するすべてです。必要な.jsモジュラーツールを理解することは、誰にとっても役立つことを願っています。