RequireJSを使ってJavaScriptリファレンスコードを最適化する方法_基礎知識

RequireJS は、JavaScript コードの速度と品質を向上させる効果的な方法であると同時に、コードを読みやすく、保守しやすくします。

この記事では、RequireJS とその使用方法を紹介します。ファイルのインポートとモジュールの定義について説明し、最適化の側面についても触れます。

簡単に言えば、require.js は、各モジュール間の依存関係を管理しながら、JavaScript コードをファイルとモジュールに分離できるようにするスクリプト ローダーです。

ファイルをインポートする

RequireJS の使用を開始する前に、そのライブラリと非同期モジュール定義 (AMD) ファイルをダウンロードする必要があります。次に、ドキュメントの先頭にある require.js ファイルに次のようにリンクします。

 
<script src="require.js" data-main="main"></script>

data-main 属性とは何なのかと尋ねられるかもしれません。RequireJS を使用すると、ドキュメントの先頭で require を呼び出すときに、JavaScript アプリケーションのメイン ファイル (この例では main ) にもリンクすることになります。 js (RequireJS はファイル名の末尾に .js 接尾辞を自動的に追加することに注意してください)

main.js ファイルで、RequireJS を構成し、モジュールをロードし、ファイルのインポート時に使用するベース パスを定義する必要があります。

必須関数

RequireJS は、単純な require 関数を使用してスクリプトをインポートします。この例では、RequireJS は JQuery をインポートします。

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

RequireJS の利点の 1 つは、非常に読みやすいことです。上記のコードでは、require 関数が最初に jquery.js という名前のファイルを取得し、次に $ をパラメータとして匿名関数に渡していることがわかります。このアクションが完了すると、JQuery コードを自由に使用できるようになります。

通常、コードには jquery.js ファイルの jQuery ライブラリが含まれていません。ほとんどのプラグインやフレームワークと同様に、通常は GitHub または Google CDN からインポートすることを選択するため、実際のパスを設定する必要があります。 :

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

これは、Google 経由で jquery をインポートできることを意味します (この例では「jquery」という名前を使用していることに注意してください。好きな名前を使用できます)

モジュールの定義

AMD モードを使用すると、コードをモジュールに構造化でき、これらのモジュールはアプリケーションに特定の機能を実装できます。モジュールにはわずか 2 行のコードを含めることも、100 行のコードを含めることもできます。すべては、モジュールを通じて何を達成したいかによって異なります。

モジュールを定義するには、次のように記述できます:

define(function () {
 function add (x,y) {
  return x + y;
 }
});

ここでは、依存関係なしで add 関数を定義しましたが、この関数が適切に動作するために jquery が必要な場合、定義コードは次のようになります。

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

この構文を使用して、最初に jquery をインポートしてからコードを実行するように JavaScript に指示し、いつでも jquery を使用できるようにします。フレームワークやプラグインだけでなく、JavaScript ファイルで定義されたモジュールも使用できます。

最適化

ご覧のとおり、RequireJS はファイルをモジュールに整理し、必要な場合にのみインポートするための強力なツールです。欠点は、多数の JavaScript ファイルのインポートに多くの時間がかかることです。そのため、RequireJS には、すべてのファイルのデータを収集して圧縮ファイルに入れるオプティマイザーが含まれています。

全体として、RequireJS は Web アプリケーションで Javascript を整理し、最適化するための優れたツールです。