RequireJS - 插件

---

RequireJS 包含一小组插件，允许加载各种类型的资源作为依赖项。以下是 RequireJS 中可用插件的列表 -

• 文本
• 准备就绪
• 国际化
• CSS加载

文本

文本插件用于异步加载基于文本的资源，主要用于在 JavaScript 文件中插入 HTML 内容。使用文字的时候就可以加载了！在任何 require 或 Define 模块调用中添加前缀，并将文件扩展名传递给插件。与普通模块加载相比，文本插件使用 XHR 加载模块，并且不会将代码作为脚本标签添加到标头。

文本文件资源可以作为依赖项包含在代码中，如下所示：

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
   }
);

准备就绪

RequireJS 可用于在 DOM 准备好之前加载脚本，并且只有当脚本完全加载时，开发人员才能与 DOM 交互。有时可以在 DOM 准备好之前加载脚本。因此，为了克服这个问题，RequireJS 提供了称为DOMContentLoaded事件的现代方法，一旦 DOM 准备好，它就会调用 domReady 函数。

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！”时，该支持将自动加载。字首。要使用它，请下载它并将其放在主 JavaScript 文件所在的同一目录中。将此插件放置在名为“nls”的目录中以查找本地化文件。

例如，假设我们有一个名为country.js的js文件，其中包含以下内容，并将其放置在mydirectory/nls/country.js目录中：

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

您可以使用fr-fr locale 将特定翻译添加到文件中，上面的代码将更改为 -

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);
}