単純であろうと複雑であろうと、Web アプリケーションはいくつかの HTML、JavaScript、CSS ファイルで構成されます。通常、開発者は開発速度を向上させるために、JQuery、Knockout、Underscore などのサードパーティの JavaScript フレームワークを使用します。これらの JavaScript フレームワークは特定の目的のために開発され、「実証」されているため、必要な機能を最初から実装するよりも、直接使用する方が適切です。ただし、アプリケーションの複雑さが増し続けるにつれて、クリーンで結合度が低く、保守しやすいコードを作成することがますます重要になっています。この記事では、RequireJS フレームワークがアプリケーション開発者によるより多くのモジュール型コードの記述にどのように役立つか、また、JavaScript ファイルを遅延ロードすることでアプリケーションのパフォーマンスをどのように向上させるかを説明します。
RequireJS フレームワークを使用せずに開始し、次の章で RequireJS を使用してフレームワークをリファクタリングします。
次の HTML ページには、ID が「message」の
要素が含まれています。ユーザーがこのページにアクセスすると、注文 ID と顧客名の情報が表示されます。
Common.JS ファイルには、Order と Customer という 2 つのモジュールの定義が含まれています。 showData 関数はページの本体と結合され、write 関数を呼び出して出力する情報をページに配置します。例として、showData 関数で ID を 1、顧客名を Prasad にハードコーディングしました。
<!DOCTYPE html> <html> <head> <title>JavaScript NonRequireJS</title> <script src="common.js" type="text/javascript"></script> </head> <body> <strong>Display data without RequireJS</strong> <p id="message" /> <script type="text/javascript"> showData(); </script> </body> </html> Common.JS
function write(message) {
document.getElementById('message').innerHTML += message + '</br>';
}
function showData() {
var o = new Order(1, "Prasad");
write("Order Id : " + o.id + " Customer Name : " + o.customer.name);
}
function Customer(name) {
this.name = name;
return this;
}
function Order(id, customerName) {
this.id = id;
this.customer = new Customer(customerName);
return this;
}
上記のコードは出力を表示できますが、まだいくつかの問題があります。
Common.JS ファイルには、定義する必要があるすべての関数 (write、showData) が含まれていますが、モジュール (Order、Customer) は保守および再利用が困難です。他のページで write 関数を再利用し、上記の JavaScript ファイルを参照する場合は、このページには必要のない他の関数やモジュールもインポートしていることになります。
次に、リファクタリングされたコードを見てみましょう。以下の HTML コードは、Require.JS ファイルを参照します。 data-main 属性は、このページの唯一のエントリ ポイントを定義します。以下のシナリオでは、起動時に Main.js をロードするように RequireJS に指示します。
<!DOCTYPE html> <html> <head> <title>JavaScript RequireJS</title> <script src="Require.Js" type="text/javascript" data-main="Main.js"></script> </head> <body> <strong>Display data using RequireJS</strong> <p id="message" /> </body> </html>
このファイルは data-main 属性を介して指定されているため、RequireJS はできるだけ早くファイルをロードします。このファイルは、RequireJS フレームワークの関数を使用して、他の JavaScript ファイルへの依存関係を決定および定義します。以下のコード スニペットでは、最初のパラメーターは依存関係 (Order.JS ファイルに応じて) を表し、2 番目のパラメーターはコールバック関数です。 RequireJS はすべての依存関係を分析してロードし、このコールバック関数を実行します。最初のパラメータ (Order) の値は、ファイル名 (Order.JS) と一致している必要があることに注意してください。
require(["Order"], function (Order) {
var o = new Order(1, "Prasad");
write(o.id + o.customer.name);
});
RequireJS フレームワークは、JavaScript ファイル間の依存関係を定義および維持するための簡単な方法を提供します。以下のコードの定義関数は、Order コールバック関数を処理する前に Customer.JS をロードする必要があることを宣言します。
define(["Customer"],
function (Customer) {
function Order(id, custName) {
this.id = id;
this.customer = new Customer(custName);
}
return Order;
}
);
このファイルは他の JavaScript ファイルに依存しないため、define 関数の最初のパラメーターの値は空の配列です。
それでは、ブラウザでこのアプリケーションを開くと、次の出力が表示されます。 RequireJS は必要な JavaScript ファイルのみをロードすることに注意してください。
概要
この記事では、RequireJS フレームワークが JavaScript ファイル間の依存関係をどのように処理し、必要に応じてロードするかを分析します。これは、開発者がより疎結合でモジュール化され、保守しやすいコードを作成するのに役立ちます。
ありがとう
ソース コードのダウンロード: RequireJS を使用した遅延読み込み (Prasad Honrao、Codetails)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
