RequireJS - 插件

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

• text
• domReady
• i18n
• CSS loading

text

text 插件用于异步加载基于文本的资源，主要用于在 JavaScript 文件中插入 HTML 内容。当您在任何 require 或 define 模块调用中使用 text! 前缀并将文件扩展名传递给插件时，即可加载它。与普通模块加载相比，text 插件使用 XHR 加载模块，不会将代码作为 script 标记添加到标题中。

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

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

    function(mymodule, html, css) {
        //html 和 css 变量将分别是 mymodule.html 文件和 mymodule.css 文件的文本
    }
);

domReady

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

require(['domReady'], function(domReady) {

    domReady(function() {
        //DOM 准备就绪时调用 domReady 函数
        //在此函数中操作 DOM 节点是安全的
    });
});

i18n

它可以与提供 i18n 包支持的多个语言环境一起使用，当模块或依赖项指定"i18n!"前缀时，将自动加载。要使用此功能，请下载它并将其放在主 JavaScript 文件所在的同一目录中。将此插件放在名为"nls"的目录中以查找您的本地化文件。

例如，假设我们有一个名为 country.js 的 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: {
      //设置 i18n 插件的配置
      
      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);
}