simple example for using require.js

问题:

I am trying to learn how to use require.js. So I made an HTML page with the following tags in the body.

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

The ../js/shirt.js has the following code

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

How can I use this simple value pairs in my html?

回答1:

the contents of the main file should be a require call. for example, you have a values.js module containing:

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

in your main file (shirt.js), load the values.js as a dependency (assuming they are in the same directory):

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

回答2:

In addition to Domenic's answer maybe you prefer this way of using the define function without using require functions inside the modules.

// 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();
});

I prefer this way, but it's only a matter of taste I guess. (I'm assuming that all the scripts are on the same folder.)

回答3:

In addition to Joseph's answer, you can also write other modules that depend on shirt (which is where the real power of RequireJS comes in).

// 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();
});

Then your HTML can just be

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