详解RequireJs官方使用教程(14)

§ 5.加载插件

RequireJS支持加载器插件。使用它们能够加载一些对于脚本正常工作很重要的非JS文件。RequireJS的wiki有一个插件的列表。本节讨论一些由RequireJS一并维护的特定插件:

§ 5.1 指定文本文件依赖

如果都能用HTML标签而不是基于脚本操作DOM来构建HTML,是很不错的。但没有好的办法在JavaScript文件中嵌入HTML。所能做的仅是在js中使用HTML字串,但这一般很难维护,特别是多行HTML的情况下。.

RequireJS有个text.js插件可以帮助解决这个问题。如果一个依赖使用了text!前缀,它就会被自动加载。参见text.js的README文件。

§ 5.2 页面加载事件及DOM Ready

RequireJS加载模块速度很快,很有可能在页面DOM Ready之前脚本已经加载完毕。需要与DOM交互的工作应等待DOM Ready。现代的浏览器通过DOMContentLoaded事件来知会。

但是,不是所有的浏览器都支持DOMContentLoaded。domReady模块实现了一个跨浏览器的方法来判定何时DOM已经ready。下载并在你的项目中如此用它:

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

基于DOM Ready是个常规需求,像上述API中的嵌套调用方式,理想情况下应避免。domReady模块也实现了Loader Plugin API,因此你可以使用loader plugin语法(注意domReady依赖的!前缀)来强制require()回调函数在执行之前等待DOM Ready。当用作loader plugin时,domReady会返回当前的document:

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

注意: 如果document需要一段时间来加载(也许是因为页面较大,或加载了较大的js脚本阻塞了DOM计算),使用domReady作为loader plugin可能会导致RequireJS“超时”错。如果这是个问题,则考虑增加waitSeconds配置项的值,或在require()使用domReady()调用(将其当做是一个模块)。

总结

以上所述是小编给大家介绍的RequireJs官方使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对黑区网络网站的支持!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1271.html