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

理想状况下,每个加载的脚本都是通过define()来定义的一个模块;但有些"浏览器全局变量注入"型的传统/遗留库并没有使用define()来定义它们的依赖关系,你必须为此使用shim config来指明它们的依赖关系。 如果你没有指明依赖关系,加载可能报错。这是因为基于速度的原因,RequireJS会异步地以无序的形式加载这些库。

§ 1.2 data-main 入口点

require.js 在加载的时候会检察data-main 属性:

<script data-main="scripts/main" src="scripts/require.js"></script>

你可以在data-main指向的脚本中设置模板加载 选项,然后加载第一个应用模块。.注意:你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。例如:

<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>
// contents of main.js:
require.config({
  paths: {
    foo: 'libs/foo-1.1.3'
  }
});
// contents of other.js:
// This code might be called before the require.config() in main.js has executed. 
// When that happens, require.js will attempt to load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require( ['foo'], function( foo ) {
});

§ 1.3 定义模块

模块不同于传统的脚本文件,它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系,并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入,而无需引用全局变量。RequireJS的模块是模块模式的一个扩展,其好处是无需全局地引用其他模块。

RequireJS的模块语法允许它尽快地加载多个模块,虽然加载的顺序不定,但依赖的顺序最终是正确的。同时因为无需创建全局变量,甚至可以做到在同一个页面上同时加载同一模块的不同版本。

一个磁盘文件应该只定义 1 个模块。多个模块可以使用内置优化工具将其组织打包。

§ 1.3.1 简单的值对

如果一个模块仅含值对,没有任何依赖,则在define()中定义这些值对就好了:

//Inside file my/shirt.js:
define({
  color: "black",
  size: "unisize"
});

§ 1.3.2 函数式定义

如果一个模块没有任何依赖,但需要一个做setup工作的函数,则在define()中定义该函数,并将其传给define():

//my/shirt.js now does setup work
//before returning its module definition.
define(function () {
  //Do setup work here
  return {
    color: "black",
    size: "unisize"
  }
});

§ 1.3.3 存在依赖的函数式定义

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

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