RequireJS を使用して JavaScript アプリケーションで遅延読み込みを実装する

ホームページ

ウェブフロントエンド

jsチュートリアル

RequireJS を使用して JavaScript アプリケーションで遅延読み込みを実装する_基本

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:52 PM

javascript

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

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

201571120734678.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 フレームワークは 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 関数の最初のパラメーターの値は空の配列です。

define([],
function () {
function Customer(name) {
this.name = name;
}
return Customer;
}
);

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

201571120754519.png (300×172)

概要

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

声明

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

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか？Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1）ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2）node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。