JavaScriptアプリケーションで遅延読み込みを実装する方法

JavaScriptアプリケーションで遅延読み込みを実装する方法_基礎知識

WBOY

リリース： 2016-05-16 15:53:08

オリジナル

1257 人が閲覧しました

単純であろうと複雑であろうと、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;
}

ログイン後にコピー

ブラウザでこのページを開くと、次の情報が表示されます。

201562590347564.png (300×172) 上記のコードは出力を表示できますが、まだいくつかの問題があります。

Common.JS ファイルには、定義する必要があるすべての関数 (write、showData) が含まれていますが、モジュール (Order、Customer) は保守および再利用が困難です。他のページで write 関数を再利用し、上記の JavaScript ファイルを参照する場合は、このページには必要のない他の関数やモジュールもインポートしていることになります。

Order モジュール (オブジェクト指向の用語では「クラス」) は、初期化プロセス中に Customer モジュールのインスタンスを作成します。これは、Order モジュールが Customer モジュールに依存していることを意味します。これらのモジュール間の結合が密接であるため、将来の最適化中にリファクタリングや維持が困難になります。
クライアントがこのページをリクエストするたびに、Common.JS ファイルが DOM にロードされます。上記の例では、ページに情報を出力するだけで済みますが、不要なモジュール (Customer、Order) はメモリにロードされます。不要なアプリケーションリソース (JavaScript、CSS、画像ファイルなど) を読み込むと、アプリケーションのパフォーマンスが低下する可能性があります。
Common.JS ファイル内のモジュールは複数の JavaScript ファイルに分離できますが、アプリケーションが複雑になると、JavaScript ファイル間の依存関係や、ロードする必要があるファイルのロード順序を判断することが困難になります。。

RequireJS を使用してアプリケーションを構築する

次に、リファクタリングされたコードを見てみましょう。以下の 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>

ログイン後にコピー

Main.JS

このファイルは 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);
});

ログイン後にコピー

Order.JS

RequireJS フレームワークは、JavaScript ファイル間の依存関係を定義および維持するための簡単な方法を提供します。以下のコードの定義関数は、Order コールバック関数を処理する前に Customer.JS をロードする必要があることを宣言します。

define(["Customer"],
function (Customer) {
function Order(id, custName) {
this.id = id;
this.customer = new Customer(custName);
}
return Order;
}
);

ログイン後にコピー

Customer.JS

このファイルは他の JavaScript ファイルに依存しないため、define 関数の最初のパラメーターの値は空の配列です。

それでは、ブラウザでこのアプリケーションを開くと、次の出力が表示されます。 RequireJS は必要な JavaScript ファイルのみをロードすることに注意してください。

201562590435120.png (300×172)

概要

この記事では、RequireJS フレームワークが JavaScript ファイル間の依存関係をどのように処理し、必要に応じてロードするかを分析します。これは、開発者がより疎結合でモジュール化され、保守しやすいコードを作成するのに役立ちます。

ありがとう

ソースコードのダウンロード: RequireJS を使用した遅延読み込み (Prasad Honrao、Codetails)