胖蔡叨叨叨
你听我说

RequireJs加载程序插件

RequireJS支持加载程序插件。这是一种支持依赖关系的方法,该依赖关系不是普通的JS文件,但对于脚本在执行工作之前已加载仍然很重要。RequireJS Wiki有一个插件列表。本节讨论与RequireJS一起维护的一些特定插件:

指定文本文件依赖性

使用常规HTML标记构建HTML很好,而不是在脚本中构建DOM结构。但是,没有很好的方法将HTML嵌入JavaScript文件中。最好的方法是使用HTML字符串,但这可能很难管理,尤其是对于多行HTML。

RequireJS有一个插件text.js,可以帮助解决此问题。如果文本将自动加载!前缀用于依赖项。有关更多信息,请参见 text.js自述文件

页面加载事件支持/ DOM准备就绪

使用RequireJS足够快地加载脚本以使其在DOM准备好之前完成时,这是可能的。任何尝试与DOM交互的工作都应等待DOM准备就绪。对于现代浏览器,这是通过等待DOMContentLoaded事件来完成的。

但是,并非所有使用中的浏览器都支持DOMContentLoaded。domReady模块实现了跨浏览器方法来确定DOM准备就绪的时间。下载模块,并在您的项目中使用它,如下所示:

require(['domReady'], function (domReady) {
  domReady(function () {
    //This function is called once the DOM is ready.
    //It will be safe to query the DOM and manipulate
    //DOM nodes in this function.
  });
});

由于DOM ready是常见的应用程序需求,因此理想情况下可以避免上面API中的嵌套函数。domReady模块还实现了Loader Plugin API,因此您可以使用loader插件语法(注意domReady依赖项中的)来强制require()回调函数在执行之前等待DOM准备就绪。

domReady

用作加载程序插件时,将返回当前文档:

require(['domReady!'], function (doc) {
    //This function is called once the DOM is ready,
    //notice the value for 'domReady!' is the current
    //document.
});

注意:如果文档加载时间较长(可能是非常大的文档,或者HTML脚本标签加载了大型JS文件,这些文件会阻止DOM完成直到完成),那么将domReady用作加载程序插件可能会导致RequireJS“超时”错误。如果这是一个问题,请增加waitSeconds配置,或者仅使用domReady作为模块并在require()回调内调用domReady()。

定义一个I18N捆绑

一旦您的Web应用达到了一定的大小和受欢迎程度,在界面中本地化字符串并提供其他特定于语言环境的信息就变得更加有用。但是,制定一个可以很好地扩展以支持多个语言环境的方案可能很麻烦。

RequireJS允许您设置具有本地化信息的基本模块,而无需强制您预先提供所有特定于语言环境的信息。它可以随时间添加,并且只能在特定于语言环境的文件中定义在语言环境之间更改的字符串/值。

i18n.js插件提供了对i18n包的支持。当模块或依赖项指定i18n时,它将自动加载!前缀(下面有更多信息)。下载插件,并将其放在应用程序的主JS文件所在的目录中。

要定义包,请将其放在名为“ nls”的目录中-i18n!插件假定模块名称中带有“ nls”,表示一个i18n软件包。名称中的“ nls”标记告诉i18n插件在哪里可以看到语言环境目录(它们应该是nls目录的直接子级)。如果要在“我的”模块集中提供一组颜色名称,请按以下方式创建目录结构:

  • 我/nls/colors.js

该文件的内容应如下所示:

//my/nls/colors.js contents:
define({
    "root": {
        "red": "red",
        "blue": "blue",
        "green": "green"
    }
});

属性为“ root”的对象文字定义了此模块。您要做的就是为以后的本地化工作奠定基础。

然后,可以在另一个模块(例如,my / lamps.js文件)中使用上述模块:

//Contents of my/lamps.js
define(["i18n!my/nls/colors"], function(colors) {
    return {
        testMessage: "The name for red in this locale is: " + colors.red
    }
});

my / lamps模块具有一个名为“ testMessage”的属性,该属性使用colors.red来显示红色的本地化值。

稍后,当您想向文件添加特定的翻译时,例如使用fr-fr语言环境,请将my / nls / colors更改为如下所示:

//Contents of my/nls/colors.js
define({
    "root": {
        "red": "red",
        "blue": "blue",
        "green": "green"
    },
    "fr-fr": true
});

然后在my / nls / fr-fr / colors.js定义一个文件,该文件包含以下内容:

//Contents of my/nls/fr-fr/colors.js
define({
    "red": "rouge",
    "blue": "bleu",
    "green": "vert"
});

RequireJS将使用浏览器的navigator.languages,navigator.language或navigator.userLanguage属性来确定要用于my / nls / colors的语言环境值,因此您的应用程序不必更改。如果您希望设置语言环境,则可以使用模块配置将语言环境传递给插件:

requirejs.config({
    config: {
        //Set the config for the i18n
        //module ID
        i18n: {
            locale: 'fr-fr'
        }
    }
});

请注意,RequireJS将始终使用小写版本的语言环境,以避免出现大小写问题,因此,i18n软件包的磁盘上的所有目录和文件都应使用小写语言环境。

RequireJS也足够聪明,可以选择正确的语言环境包,该语言包与my / nls / colors提供的语言包最匹配。例如,如果语言环境是“ en-us”,则将使用“ root”捆绑软件。如果区域设置为“ fr-fr-paris”,则将使用“ fr-fr”捆绑包。

RequireJS还将捆绑包合并在一起,因此,例如,如果法式捆绑包是这样定义的(将红色值省略):

//Contents of my/nls/fr-fr/colors.js
define({
    "blue": "bleu",
    "green": "vert"
});

然后将使用“ root”中的red值。这适用于所有语言环境。如果定义了下面列出的所有捆绑包,那么RequireJS将按照以下优先级顺序使用值(顶部的优先级最高):

  • 我/nls/fr-fr-paris/colors.js
  • 我/nls/fr-fr/colors.js
  • 我/nls/fr/colors.js
  • 我/nls/colors.js

如果您不希望在顶级模块中包含根包,则可以像普通的语言环境包一样定义它。在这种情况下,顶层模块如下所示:

//my/nls/colors.js contents:
define({
    "root": true,
    "fr-fr": true,
    "fr-fr-paris": true
});

根束看起来像:

//Contents of my/nls/root/colors.js
define({
    "red": "red",
    "blue": "blue",
    "green": "green"
});
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » RequireJs加载程序插件
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏