ホームページ >ウェブフロントエンド >jsチュートリアル >JS との最初のコンタクト require.js モジュラー ツール_JavaScript スキル
JS との最初のコンタクト require.js モジュラー ツール_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:04:591629ブラウズ
Web サイトの機能が徐々に充実するにつれて、Web ページ内の JS はますます複雑になり、肥大化してきました。スクリプト タグを使用して JS ファイルを 1 つずつインポートするという元の方法では、現在のインターネット開発モデルには対応できなくなりました。チームが必要です。コラボレーション、モジュールの再利用、単体テストなどの一連の複雑な要件があります。
RequireJS は、非常に小さな JavaScript モジュール読み込みフレームワークであり、AMD 仕様の最良の実装者の 1 つです。 RequireJS の最新バージョンはわずか 14K 圧縮されており、非常に軽量です。他のフレームワークとも連携できます。RequireJS を使用すると、フロントエンド コードの品質が確実に向上します。
requirejs にはどのような利点がありますか?
requirejs の公式説明:
RequireJS は JavaScript ファイルおよびモジュール ローダーです。ブラウザ内での使用に最適化されていますが、Rhino や Node などの他の JavaScript 環境でも使用できます。RequireJS のようなモジュール式スクリプト ローダーを使用すると、速度と品質が向上します。コード。
おおよその意味:
ブラウザーで js ファイルのモジュール ローダーとして使用でき、Node および Rhino 環境でも使用できます。この項ではrequirejsの基本機能「モジュラーローディング」について説明します。次の章で 1 つずつ説明します
まず一般的なシナリオを見て、例を通して requirejs の使用方法を説明しましょう
通常の書き方
index.html:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="a.js"></script> </head> <body> <span>body</span> </body> </html>
a.js:
function fun1(){
alert("it works");
}
fun1();
このように書く方が良いかもしれません
(function(){
function fun1(){
alert("it works");
}
fun1();
})()
2 番目のメソッドは、グローバル変数の汚染を防ぐためにブロック スコープを使用して関数を宣言します。上記の 2 つの例を実行するときに、アラートが実行されるときに HTML が変更されることに気づいたかどうかはわかりません。 content は空白です。つまり、45a2772a6b6107b401db3c9b82c049c2body54bdf357c58b8a65c66d7c19c8e4d114 は表示されません。これは、JS がブラウザーのレンダリングをブロックした結果です。
JS 記述メソッドが必要です
もちろん、まず requirejs Web サイトにアクセスして js をダウンロードする必要があります -> requirejs.rog
インデックス.html:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["a"]); </script> </head> <body> <span>body</span> </body> </html>
a.js:
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
ブラウザーは「it works」というメッセージを表示し、正しく実行されていることを示しますが、今回はブラウザーの本文がページに表示されていないことがわかります。次の利点:
1. js の読み込みによるページのレンダリングのブロックを防止します
2. 以下のような醜いシーンを防ぐために、プログラム呼び出しを使用して js をロードします
<script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> <script type="text/javascript" src="e.js"></script> <script type="text/javascript" src="f.js"></script> <script type="text/javascript" src="g.js"></script> <script type="text/javascript" src="h.js"></script> <script type="text/javascript" src="i.js"></script> <script type="text/javascript" src="j.js"></script>
上記がこの記事の全内容であり、皆さんが require.js モジュラー ツールを理解するのに役立つことを願っています。