Requirejs-plugins

RequireJS-プラグイン

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

• text
• domReady
• i18n
• CSSの読み込み

text

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

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

require(["mymodule", "text!mymodulel", "text!mymodule.css"],

   function(mymodule, html, css) {
     //the html and css variables will be the text
     //of the mymodulel file and mymodule.css files respectively
   }
);

domReady

RequireJSを使用すると、DOMの準備が整う前にスクリプトをロードでき、スクリプトが完全にロードされた場合にのみ開発者がDOMと対話できます。 DOMの準備ができる前にスクリプトをロードできる場合があります。 したがって、この問題を克服するために、RequireJSは、DOMの準備ができたらdomReady関数を呼び出すhttps://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded[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」というディレクトリに配置します。

たとえば、次のコンテンツを持つ_country.js_という名前のjsファイルが1つあり、_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ファイルをロードできます。

以下に示すように、独自の関数を使用して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);
}