ホームページ > ウェブフロントエンド > jsチュートリアル > JS require.js モジュラー ツールとの最初の接続

JS require.js モジュラー ツールとの最初の接続

高洛峰
リリース: 2016-12-28 14:22:52
オリジナル
1441 人が閲覧しました

Web サイトの機能が徐々に豊富になるにつれて、Web ページ内の JS はますます複雑になり、スクリプト タグを介して JS ファイルを 1 つずつインポートする本来の方法では、現在のインターネット開発モデルに対応できなくなりました。チームワークが必要、モジュールの再利用、単体テストなどの一連の複雑な要件。

第一次接触JS require.js模块化工具

RequireJS は、非常に小さな JavaScript モジュール読み込みフレームワークであり、AMD 仕様の最良の実装者の 1 つです。 RequireJS の最新バージョンはわずか 14K 圧縮されており、非常に軽量です。他のフレームワークとも連携できます。RequireJS を使用すると、フロントエンド コードの品質が確実に向上します。

requirejs はどのようなメリットをもたらしますか?

requirejs の公式説明:

RequireJS はブラウザ内での使用に最適化されていますが、Rhino や Node などの他の JavaScript 環境でも使用できます。 RequireJS のようなモジュラー スクリプト ローダーを使用すると、コードの速度と品質が向上します。

おおよその意味:

ブラウザで js ファイルのモジュール ローダーとして使用でき、Node および Rhino 環境でも使用できます。バラバラ..この項ではrequirejsの基本機能「モジュラーローディング」について説明します。次のページで一つずつ説明していきます

まずは一般的なシナリオを見て、例を通して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();
ログイン後にコピー

たぶんあなたも2 番目のメソッドは、グローバル変数の汚染を防ぐためにブロック スコープを使用して関数を宣言しますが、上記の 2 つの例を実行したときに、アラート時にそれに気づいたかどうかはわかりません。これは、JS がブラウザのレンダリングをブロックした結果です。

requirejs の書き方

もちろん、js をダウンロードするには、まず requirejs Web サイトにアクセスする必要があります -> requirejs.rog

index.html:

(function(){
 function fun1(){
  alert("it works");
 }
  
 fun1();
})()
ログイン後にコピー

a.js:

<!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>
ログイン後にコピー

ブラウザーに「it works」というメッセージが表示されます。これは正しく実行されていることを示していますが、今回はブラウザーが空白ではありません。これまでのところ、requirejs には次の利点があることがわかります。ページのレンダリングをブロックする

2. 以下のような醜いシーンを防ぐために、プログラム呼び出し js を使用して読み込みます

define(function(){
 function fun1(){
  alert("it works");
 }
  
 fun1();
})
ログイン後にコピー
上記がこの記事の全内容です。require.js モジュラー ツールを理解するのに役立つことを願っています。


初めての JS require.js モジュラー ツールに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート