RequireJS-プラグイン

RequireJSには、さまざまなタイプのリソースを依存関係としてロードできるプラグインの小さなセットが含まれています。以下は、RequireJSで利用可能なプラグインのリストです-

text
domReady
i18n
CSSの読み込み

テキスト

テキストプラグインは、主にJavaScriptファイル内のHTMLコンテンツを挿入するために使用される非同期ロードのテキストベースのリソースのために使用されています。テキストを使用するとロードできます！requireまたはdefineモジュール呼び出しのプレフィックスを付け、ファイル拡張子をプラグインに渡します。通常のモジュールロードと比較して、テキストプラグインはXHRを使用してモジュールをロードし、ヘッダーにコードを追加しません。script 鬼ごっこ。

テキストファイルリソースは、依存関係としてコードに-として含めることができます。

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

RequireJSは、スクリプトが完全にロードされた場合にのみ、DOMの準備が整う前にスクリプトをロードするために使用でき、開発者はDOMと対話できます。DOMの準備が整う前にスクリプトをロードできる場合があります。したがって、この問題を克服するために、RequireJSは、DOMの準備ができたらdomReady関数を呼び出すDOMContentLoadedイベントと呼ばれる最新のアプローチを提供します。

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

を提供する複数のロケールで使用できます i18nモジュールまたは依存関係で「i18n！」が指定されたときに自動的にロードされるバンドルサポート。プレフィックス。これを利用するには、ダウンロードして、メインのJavaScriptファイルが存在するのと同じディレクトリに配置します。このプラグインを「nls」というディレクトリに配置して、ローカリゼーションファイルを見つけます。

例えば、我々は1つのjsファイルと呼ばれていることを前提とcountry.jsなどのディレクトリに以下の内容と場所、それを持つmydirectoryなど/ NLS / country.jsを-

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

fr-frロケールを使用してファイルに特定の翻訳を追加すると、上記のコードは次のように変更されます。

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

次に、mydirectory / nls / es-es /country.jsにあるファイルを次の内容で指定します-

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

以下に示すように、main.jsファイルのモジュール構成を使用してプラグインにロケールを渡すことでロケールを設定できます-

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

RequireJSを使用したCSSの読み込み

一部のプラグインを使用して、ヘッダーリンクに追加するだけでCSSファイルをロードできます。

CSSは、以下に示すように独自の関数を使用してロードできます。

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}