简单的例子使用require.js

Question

我想学习如何使用require.js。所以我制作了一个HTML页面，内含以下标签。

<script type="text/javascript" data-main="../js/shirt" src="../js/require.js"></script> 
<script type="text/javascript"> 
    alert("Shirt color is " + shirt.color); 
</script> 

的../js/shirt.js具有下面的代码

define({ 
    color: "black", 
    size : "large" 
}); 

如何我可以在HTML中使用这种简单的值对？

Answer 1

主文件内容should be a require call。例如，您有一个包含values.js模块：

define({ 
    color: "black", 
    size : "large" 
}); 

在你的主文件（shirt.js）

，加载values.js作为依赖（假设他们是在同一个目录）：

require(['values'],function(values){ 
    //values.color 
    //values.size 
}); 

Answer 2

除了Joseph的回答，您还可以编写其他模块，这些模块取决于shirt（这是RequireJS的真正实力来自哪里）。

// shirt.js 
define({ 
    color: "black", 
    size : "large" 
}); 

// logger.js 
define(function (require) { 
    var shirt = require("./shirt"); 

    return { 
     logTheShirt: function() { 
      console.log("color: " + shirt.color + ", size: " + shirt.size); 
     } 
    }; 
}); 

// main.js 
define(function (require) { 
    var shirt = require("./shirt"); 
    var logger = require("./logger"); 

    alert("Shirt color is: " + shirt.color); 
    logger.logTheShirt(); 
}); 

那么你的HTML可以只是

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

Answer 3

除了Domenic的答案也许你喜欢用的定义功能，而无需使用需要的模块内部功能的这种方式。

// shirt.js 
define({ 
    color: "black", 
    size : "large" 
}); 

// logger.js 
define(["shirt"], function (shirt) { 
    return { 
     logTheShirt: function() { 
      console.log("color: " + shirt.color + ", size: " + shirt.size); 
     } 
    }; 
}); 

// main.js 
define(["shirt", "logger"],function (shirt, logger) {  
    alert("Shirt color is: " + shirt.color); 
    logger.logTheShirt(); 
}); 

我更喜欢这种方式，但这只是我猜想的味道问题。 （我假设所有的脚本都在同一个文件夹中。）