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

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

高洛峰オリジナル: 2016-12-28 14:22:521423ブラウズ

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 サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：angularJS の ui-router モジュールと ng-grid モジュールの簡単な分析次の記事：angularJS の ui-router モジュールと ng-grid モジュールの簡単な分析

続きを見る

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

関連記事

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