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


如果你使用了类似于入门指导中的项目布局,你的web项目应大致以如下的布局开始(基于Node/Rhino的项目也是类似的,只不过使用scripts目录中的内容作为项目的顶层目录):

project-directory/
project.html
scripts/
require.js

而下面的示例中使用了两个包,cart及store:

project-directory/
project.html
scripts/
cart/
main.js
store/
main.js
util.js
main.js
require.js

project.html 会有如下的一个script标签:

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

对“cart”的依赖请求会从scripts/cart/main.js中加载,因为“main”是RequireJS默认的包主模块。对“store/util”的依赖请求会从scripts/store/util.js加载。

如果“store”包不采用“main.js”约定,如下面的结构:

project-directory/
project.html
scripts/
cart/
main.js
store/
store.js
util.js
main.js
package.json
require.js

则RequireJS的配置应如下:

require.config({
  packages: [
    "cart",
    {
      name: "store",
      main: "store"
    }
  ]
});

减少麻烦期间,强烈建议包结构遵从“main.js”约定。

§ 4.2 多版本支持

 如配置项一节中所述,可以在同一页面上以不同的“上下文”配置项加载同一模块的不同版本。require.config()返回了一个使用该上下文配置的require函数。下面是一个加载不同版本(alpha及beta)模块的示例(取自test文件中):

<script src="../require.js"></script>
<script>
var reqOne = require.config({
 context: "version1",
 baseUrl: "version1"
});
reqOne(["require", "alpha", "beta",],
function(require,  alpha,  beta) {
 log("alpha version is: " + alpha.version); //prints 1
 log("beta version is: " + beta.version); //prints 1

 setTimeout(function() {
  require(["omega"],
   function(omega) {
    log("version1 omega loaded with version: " +
       omega.version); //prints 1
   }
  );
 }, 100);
});
var reqTwo = require.config({
   context: "version2",
   baseUrl: "version2"
  });
reqTwo(["require", "alpha", "beta"],
function(require,  alpha,  beta) {
 log("alpha version is: " + alpha.version); //prints 2
 log("beta version is: " + beta.version); //prints 2
 setTimeout(function() {
  require(["omega"],
   function(omega) {
    log("version2 omega loaded with version: " +
      omega.version); //prints 2
   }
  );
 }, 100);
});
</script>

 注意“require”被指定为模块的一个依赖,这就允许传递给函数回调的require()使用正确的上下文来加载多版本的模块。如果“require”没有指定为一个依赖,则很可能会出现错误。

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

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