ʹÓà § 1

insulse § 1.1

RequireJSµÄÄ¿±êÊǹÄÀø´úÂëµÄÄ£¿é»¯£¬ËüʹÓÃÁ˲»Í¬ÓÚ´«Í³<script>±êÇ©µÄ½Å±¾¼ÓÔز½Öè¡£¿ÉÒÔÓÃËüÀ´¼ÓËÙ¡¢ÓÅ»¯´úÂ룬µ«ÆäÖ÷ҪĿµÄ»¹ÊÇΪÁË´úÂëµÄÄ£¿é»¯¡£Ëü¹ÄÀøÔÚʹÓýű¾Ê±ÒÔmodule IDÌæ´úURLµØÖ·¡£

RequireJSÒÔÒ»¸öÏà¶ÔÓÚbaseUrlµÄµØÖ·À´¼ÓÔØËùÓеĴúÂë¡£ Ò³Ã涥²ã<script>±êÇ©º¬ÓÐÒ»¸öÌØÊâµÄÊôÐÔdata-main£¬require.jsʹÓÃËüÀ´Æô¶¯½Å±¾¼ÓÔعý³Ì£¬¶øbaseUrlÒ»°ãÉèÖõ½Óë¸ÃÊôÐÔÏàÒ»ÖµÄĿ¼¡£ÏÂÁÐʾÀýÖÐչʾÁËbaseUrlµÄÉèÖãº

<!--This sets the baseUrl to the "scripts" directory, and
    loads a script that will have a module ID of 'main'-->
<script data-main="scripts/main.js" src="scripts/require.js"></script>

baseUrlÒà¿Éͨ¹ý(507) 406-2572ÊÖ¶¯ÉèÖá£Èç¹ûûÓÐÏÔʽָ¶¨config¼°data-main£¬ÔòĬÈϵÄbaseUrlΪ°üº¬RequireJSµÄÄǸöHTMLÒ³ÃæµÄËùÊôĿ¼¡£

RequireJSĬÈϼٶ¨ËùÓеÄÒÀÀµ×ÊÔ´¶¼ÊÇjs½Å±¾£¬Òò´ËÎÞÐèÔÚmodule IDÉÏÔÙ¼Ó".js"ºó׺£¬RequireJSÔÚ½øÐÐmodule IDµ½pathµÄ½âÎöʱ»á×Ô¶¯²¹ÉϺó׺¡£Äã¿ÉÒÔͨ¹ýpaths configÉèÖÃÒ»×é½Å±¾£¬ÕâЩÓÐÖúÓÚÎÒÃÇÔÚʹÓýű¾Ê±Âë¸üÉÙµÄ×Ö¡£

ÓÐʱºòÄãÏë±Ü¿ª"baseUrl + paths"µÄ½âÎö¹ý³Ì£¬¶øÊÇÖ±½ÓÖ¸¶¨¼ÓÔØijһ¸öĿ¼ÏµĽű¾¡£´Ëʱ¿ÉÒÔÕâÑù×ö£ºÈç¹ûÒ»¸ömodule ID·ûºÏÏÂÊö¹æÔòÖ®Ò»£¬ÆäID½âÎö»á±Ü¿ª³£¹æµÄ"baseUrl + paths"ÅäÖ㬶øÊÇÖ±½Ó½«Æä¼ÓÔØΪһ¸öÏà¶ÔÓÚµ±Ç°HTMLÎĵµµÄ½Å±¾£º

  • ÒÔ ".js" ½áÊø.
  • ÒÔ "/" ¿ªÊ¼.
  • °üº¬ URL ЭÒé, Èç "" or "".

Ò»°ãÀ´Ëµ£¬×îºÃ»¹ÊÇʹÓÃbaseUrl¼°"paths" configÈ¥ÉèÖÃmodule ID¡£Ëü»á¸øÄã´øÀ´¶îÍâµÄÁé»îÐÔ£¬Èç±ãÓڽű¾µÄÖØÃüÃû¡¢Öض¨Î»µÈ¡£ ͬʱ£¬ÎªÁ˱ÜÃâÁèÂÒµÄÅäÖã¬×îºÃ²»ÒªÊ¹Óö༶ǶÌ×µÄĿ¼²ã´ÎÀ´×éÖ¯´úÂ룬¶øÊÇҪô½«ËùÓеĽű¾¶¼·ÅÖõ½baseUrlÖУ¬ÒªÃ´·ÖÖÃΪÏîÄ¿¿â/µÚÈý·½¿âµÄÒ»¸ö±âƽ½á¹¹£¬ÈçÏ£º

  • www/
    • index.html
    • js/
      • app/
        • sub.js
      • lib/
        • jquery.js
        • canvas.js
      • app.js

index.html:

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

app.js:

requirejs.config({
    /By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    /except, if the module ID starts with "app",
    /load it from the js/app directory. paths
    /config is relative to the baseUrl, and
    /never includes a ".js" extension since
    /the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});

/ Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    /jQuery, canvas and the app/sub module are all
    /loaded and can be used here now.
});

×¢ÒâÔÚʾÀýÖУ¬Èý·½¿âÈçjQueryûÓн«°æ±¾ºÅ°üº¬ÔÚËûÃǵÄÎļþÃûÖС£ÎÒÃǽ¨Ò齫°æ±¾ÐÅÏ¢·ÅÖÃÔÚµ¥¶ÀµÄÎļþÖÐÀ´½øÐиú×Ù¡£Ê¹ÓÃÖîÈçvoloÕâÀàµÄ¹¤¾ß£¬¿ÉÒÔ½«package.json´òÉÏ°æ±¾ÐÅÏ¢£¬²¢ÔÚ´ÅÅÌÉϱ£³ÖÎļþÃûΪ"jquery.js"¡£ÕâÓÐÖúÓÚÄã±£³ÖÅäÖõÄ×îС»¯£¬±ÜÃâΪÿ¸ö¿â°æ±¾ÉèÖÃÒ»Ìõpath¡£ÀýÈ磬½«"jquery"ÅäÖÃΪ"jquery-1.7.2"¡£

ÀíÏë×´¿öÏ£¬Ã¿¸ö¼ÓÔصĽű¾¶¼ÊÇͨ¹ý(418) 729-1544À´¶¨ÒåµÄÒ»¸öÄ£¿é£»µ«ÓÐЩ"ä¯ÀÀÆ÷È«¾Ö±äÁ¿×¢Èë"Ð͵Ĵ«Í³/ÒÅÁô¿â²¢Ã»ÓÐʹÓÃdefine()À´¶¨ÒåËüÃǵÄÒÀÀµ¹Øϵ£¬Äã±ØÐëΪ´ËʹÓÃshim configÀ´Ö¸Ã÷ËüÃǵÄÒÀÀµ¹Øϵ¡£ Èç¹ûÄãûÓÐÖ¸Ã÷ÒÀÀµ¹Øϵ£¬¼ÓÔØ¿ÉÄܱ¨´í¡£ÕâÊÇÒòΪ»ùÓÚËٶȵÄÔ­Òò£¬RequireJS»áÒì²½µØÒÔÎÞÐòµÄÐÎʽ¼ÓÔØÕâЩ¿â¡£

data-main Èë¿Úµã § 1.2

require.js ÔÚ¼ÓÔصÄʱºò»á¼ì²ìdata-main ÊôÐÔ:

<!--when require.js loads it will inject another script tag
    (with async attribute) for scripts/main.js-->
<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µÄÄ£¿éÓï·¨ÔÊÐíËü¾¡¿ìµØ¼ÓÔضà¸öÄ£¿é£¬ËäÈ»¼ÓÔصÄ˳Ðò²»¶¨£¬µ«ÒÀÀµµÄ˳Ðò×îÖÕÊÇÕýÈ·µÄ¡£Í¬Ê±ÒòΪÎÞÐè´´½¨È«¾Ö±äÁ¿£¬ÉõÖÁ¿ÉÒÔ×öµ½ÔÚͬһ¸öÒ³ÃæÉÏͬʱ¼ÓÔØͬһģ¿éµÄ²»Í¬°æ±¾¡£

(Èç¹ûÄãÊìϤConmmonJS£¬¿É²Î¿´CommonJSµÄ×¢ÊÍÐÅÏ¢ÒÔÁ˽âRequireJSÄ£¿éµ½CommonJSÄ£¿éµÄÓ³Éä¹Øϵ)¡£

Ò»¸ö´ÅÅÌÎļþÓ¦¸ÃÖ»¶¨Òå 1 ¸öÄ£¿é¡£¶à¸öÄ£¿é¿ÉÒÔʹÓÃÄÚÖÃÓÅ»¯¹¤¾ß½«Æä×éÖ¯´ò°ü¡£

¼òµ¥µÄÖµ¶Ô § 1.3.1

Èç¹ûÒ»¸öÄ£¿é½öº¬Öµ¶Ô£¬Ã»ÓÐÈκÎÒÀÀµ£¬ÔòÔÚdefine()Öж¨ÒåÕâЩֵ¶Ô¾ÍºÃÁË£º

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

(360) 352-6442 § 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

Èç¹ûÄ£¿é´æÔÚÒÀÀµ£ºÔòµÚÒ»¸ö²ÎÊýÊÇÒÀÀµµÄÃû³ÆÊý×飻µÚ¶þ¸ö²ÎÊýÊǺ¯Êý£¬ÔÚÄ£¿éµÄËùÓÐÒÀÀµ¼ÓÔØÍê±Ïºó£¬¸Ãº¯Êý»á±»µ÷ÓÃÀ´¶¨Òå¸ÃÄ£¿é£¬Òò´Ë¸ÃÄ£¿éÓ¦¸Ã·µ»ØÒ»¸ö¶¨ÒåÁ˱¾Ä£¿éµÄobject¡£ÒÀÀµ¹Øϵ»áÒÔ²ÎÊýµÄÐÎʽעÈëµ½¸Ãº¯ÊýÉÏ£¬²ÎÊýÁбíÓëÒÀÀµÃû³ÆÁбíÒ»Ò»¶ÔÓ¦¡£

/my/shirt.js now has some dependencies, a cart and inventory
/module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
        /return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

±¾Ê¾Àý´´½¨ÁËÒ»¸ömy/shirtÄ£¿é£¬ËüÒÀÀµÓÚmy/cart¼°my/inventory¡£´ÅÅÌÉϸ÷Îļþ·Ö²¼ÈçÏ£º

  • my/cart.js
  • my/inventory.js
  • my/shirt.js

Ä£¿éº¯ÊýÒÔ²ÎÊý"cart"¼°"inventory"ʹÓÃÕâÁ½¸öÒÔ"./cart"¼°"./inventory"Ãû³ÆÖ¸¶¨µÄÄ£¿é¡£ÔÚÕâÁ½¸öÄ£¿é¼ÓÔØÍê±Ï֮ǰ£¬Ä£¿éº¯Êý²»»á±»µ÷Óá£

ÑÏÖز»¹ÄÀøÄ£¿é¶¨ÒåÈ«¾Ö±äÁ¿¡£×ñÑ­´Ë´¦µÄ¶¨Òåģʽ£¬¿ÉÒÔʹµÃͬһģ¿éµÄ²»Í¬°æ±¾²¢´æÓÚͬһ¸öÒ³ÃæÉÏ(²Î¼û ¸ß¼¶Ó÷¨ )¡£ÁíÍ⣬º¯²ÎµÄ˳ÐòÓ¦ÓëÒÀÀµË³Ðò±£´æÒ»Ö¡£

·µ»ØµÄobject¶¨ÒåÁË"my/shirt"Ä£¿é¡£ÕâÖÖ¶¨ÒåģʽÏ£¬"my/shirt"²»×÷Ϊһ¸öÈ«¾Ö±äÁ¿¶ø´æÔÚ¡£

½«Ä£¿é¶¨ÒåΪһ¸öº¯Êý§ 1.3.4

¶ÔÄ£¿éµÄ·µ»ØÖµÀàÐͲ¢Ã»ÓÐÇ¿ÖÆΪһ¶¨ÊǸöobject£¬Èκκ¯ÊýµÄ·µ»ØÖµ¶¼ÊÇÔÊÐíµÄ¡£´Ë´¦ÊÇÒ»¸ö·µ»ØÁ˺¯ÊýµÄÄ£¿é¶¨Ò壺

/A module definition inside foo/title.js. It uses
/my/cart and my/inventory modules from before,
/but since foo/title.js is in a different directory than
/the "my" modules, it uses the "my" in the module dependency
/name to find them. The "my" part of the name can be mapped
/to any directory, but by default, it is assumed to be a
/sibling to the "foo" directory.
define(["my/cart", "my/inventory"],
    function(cart, inventory) {
        /return a function to define "foo/title".
        /It gets or sets the window title.
        return function(title) {
            return title ? (window.title = title) :
                   inventory.storeName + ' ' + cart.name;
        }
    }
);

440-622-7997§ 1.3.5

Èç¹ûÄãÏÖÓÐһЩÒÔCommonJSÄ£¿é¸ñʽ±àдµÄ´úÂ룬¶øÕâЩ´úÂëÄÑÓÚʹÓÃÉÏÊöÒÀÀµÃû³ÆÊý×é²ÎÊýµÄÐÎʽÀ´Öع¹£¬Äã¿ÉÒÔ¿¼ÂÇÖ±½Ó½«ÕâЩÒÀÀµ¶ÔÓ¦µ½Ò»Ð©±¾µØ±äÁ¿ÖнøÐÐʹÓá£Äã¿ÉÒÔʹÓÃÒ»¸öCommonJSµÄ¼òµ¥°ü×°À´ÊµÏÖ£º

define(function(require, exports, module) {
        var a = require('a'),
            b = require('b');

        /Return the module value
        return function () {};
    }
);

¸Ã°ü×°·½·¨ÒÀ¿¿Function.prototype.toString()½«º¯ÊýÄÚÈݸ³ÓèÒ»¸öÓÐÒâÒåµÄ×Ö´®Öµ£¬µ«ÔÚһЩÉ豸ÈçPS3¼°Ò»Ð©ÀϵÄOperaÊÖ»úä¯ÀÀÆ÷Öв»Æð×÷Ó᣿¼ÂÇÔÚÕâЩÉ豸ÉÏʹÓÃÓÅ»¯Æ÷½«ÒÀÀµµ¼³öΪÊý×éÐÎʽ¡£

¸ü¶àµÄÐÅÏ¢¿É²Î¿´CommonJS NotesÒ³Ã棬ÒÔ¼°"Why AMD"Ò³ÃæµÄ"Sugar"¶ÎÂä¡£

¶¨ÒåÒ»¸öÃüÃûÄ£¿é§ 1.3.6

Äã¿ÉÄܻῴµ½Ò»Ð©define()Öаüº¬ÁËÒ»¸öÄ£¿éÃû³Æ×÷ΪÊ׸ö²ÎÊý£º

    /Explicitly defines the "foo/title" module:
    define("foo/title",
        ["my/cart", "my/inventory"],
        function(cart, inventory) {
            /Define foo/title object in here.
       }
    );

ÕâЩ³£ÓÉÓÅ»¯¹¤¾ßÉú³É¡£ÄãÒ²¿ÉÒÔ×Ô¼ºÏÔʽָ¶¨Ä£¿éÃû³Æ£¬µ«Õâʹģ¿é¸ü²»¾ß±¸ÒÆÖ²ÐÔ¡ª¡ª¾ÍÊÇ˵ÈôÄ㽫ÎļþÒƶ¯µ½ÆäËûĿ¼Ï£¬Äã¾ÍµÃÖØÃüÃû¡£Ò»°ã×îºÃ±ÜÃâ¶ÔÄ£¿éÓ²±àÂ룬¶øÊǽ»¸øÓÅ»¯¹¤¾ßÈ¥Éú³É¡£ÓÅ»¯¹¤¾ßÐèÒªÉú³ÉÄ£¿éÃûÒÔ½«¶à¸öÄ£¿é´ò³ÉÒ»¸ö°ü£¬¼Ó¿ìµ½ä¯ÀÀÆ÷µÄÔØÈËËٶȡ£

heroner§ 1.3.7

Ò»¸öÎļþÒ»¸öÄ£¿é: ÿ¸öJavascriptÎļþÓ¦¸ÃÖ»¶¨ÒåÒ»¸öÄ£¿é£¬ÕâÊÇÄ£¿éÃû-ÖÁ-ÎļþÃû²éÕÒ»úÖƵÄ×ÔȻҪÇ󡣶à¸öÄ£¿é»á±»ÓÅ»¯¹¤¾ß×éÖ¯ÓÅ»¯£¬µ«ÄãÔÚʹÓÃÓÅ»¯¹¤¾ßʱӦ½«¶à¸öÄ£¿é·ÅÖõ½Ò»¸öÎļþÖС£

define()ÖеÄÏà¶ÔÄ£¿éÃû: ΪÁË¿ÉÒÔÔÚdefine()ÄÚ²¿Ê¹ÓÃÖîÈçrequire("./relative/name")µÄµ÷ÓÃÒÔÕýÈ·½âÎöÏà¶ÔÃû³Æ£¬¼ÇµÃ½«"require"±¾Éí×÷Ϊһ¸öÒÀÀµ×¢È뵽ģ¿éÖУº

define(["require", "./relative/name"], function(require) {
    var mod = require("./relative/name");
});

»òÕ߸üºÃµØ£¬Ê¹ÓÃÏÂÊöΪת»»CommonJSÄ£¿éËùÉèµÄ¸ü¶ÌµÄÓï·¨£º

define(function(require) {
    var mod = require("./relative/name");
});

Ïà¶Ô·¾¶ÔÚһЩ³¡¾°Ï¸ñÍâÓÐÓã¬ÀýÈ磺ΪÁËÒÔ±ãÓÚ½«´úÂë¹²Ïí¸øÆäËûÈË»òÏîÄ¿£¬ÄãÔÚij¸öĿ¼Ï´´½¨ÁËһЩģ¿é¡£Äã¿ÉÒÔ·ÃÎÊÄ£¿éµÄÏàÁÚÄ£¿é£¬ÎÞÐèÖªµÀ¸ÃĿ¼µÄÃû³Æ¡£

Éú³ÉÏà¶ÔÓÚÄ£¿éµÄURLµØÖ·: Äã¿ÉÄÜÐèÒªÉú³ÉÒ»¸öÏà¶ÔÓÚÄ£¿éµÄURLµØÖ·¡£Äã¿ÉÒÔ½«"require"×÷Ϊһ¸öÒÀÀµ×¢Èë½øÀ´£¬È»ºóµ÷ÓÃrequire.toUrl()ÒÔÉú³É¸ÃURL:

define(["require"], function(require) {
    var cssUrl = require.toUrl("./style.css");
});

¿ØÖÆ̨µ÷ÊÔ:Èç¹ûÄãÐèÒª´¦ÀíÒ»¸öÒÑͨ¹ýrequire(["module/name"], function(){})µ÷ÓüÓÔØÁ˵ÄÄ£¿é£¬¿ÉÒÔʹÓÃÄ£¿éÃû×÷Ϊ×Ö·û´®²ÎÊýµÄrequire()µ÷ÓÃÀ´»ñÈ¡Ëü:

require("module/name").callSomeFunction()

×¢ÒâÕâÖÖÐÎʽ½öÔÚ"module/name"ÒѾ­ÓÉÆäÒì²½ÐÎʽµÄrequire(["module/name"])¼ÓÔØÁ˺ó²ÅÓÐЧ¡£Ö»ÄÜÔÚdefineÄÚ²¿Ê¹ÓÃÐÎÈç"./module/name"µÄÏà¶Ô·¾¶¡£

Ñ­»·ÒÀÀµ§ 1.3.8

IÈç¹ûÄ㶨ÒåÁËÒ»¸öÑ­»·ÒÀÀµ(aÒÀÀµb£¬bͬʱÒÀÀµa)£¬ÔòÔÚÕâÖÖÇéÐÎϵ±bµÄÄ£¿éº¯Êý±»µ÷ÓõÄʱºò£¬Ëü»áµÃµ½Ò»¸öundefinedµÄa¡£b¿ÉÒÔÔÚÄ£¿éÒѾ­¶¨ÒåºÃºóÓÃrequire()·½·¨ÔÙ»ñÈ¡(¼ÇµÃ½«require×÷ΪÒÀÀµ×¢Èë½øÀ´)£º

/Inside b.js:
define(["require", "a"],
    function(require, a) {
        /"a" in this case will be null if a also asked for b,
        /a circular dependency.
        return function(title) {
            return require("a").doSomething();
        }
    }
);

Ò»°ã˵À´ÄãÎÞÐèʹÓÃrequire()È¥»ñÈ¡Ò»¸öÄ£¿é£¬¶øÊÇÓ¦µ±Ê¹ÓÃ×¢È뵽ģ¿éº¯Êý²ÎÊýÖеÄÒÀÀµ¡£Ñ­»·ÒÀÀµ±È½Ïº±¼û£¬ËüÒ²ÊÇÒ»¸öÖع¹´úÂëÖØÐÂÉè¼ÆµÄ¾¯Ê¾µÆ¡£µ«²»¹ÜÔõÑù£¬ÓÐʱºò»¹ÊÇÒªÓõ½Ñ­»·ÒÀÀµ£¬ÕâÖÖÇéÐÎϾÍʹÓÃÉÏÊöµÄrequire()·½Ê½À´½â¾ö¡£

Èç¹ûÄãÊìϤCommonJS£¬Äã¿ÉÒÔ¿¼ÂÇʹÓÃexportsΪģ¿é½¨Á¢Ò»¸ö¿Õobject£¬¸Ãobject¿ÉÒÔÁ¢¼´±»ÆäËûÄ£¿éÒýÓá£ÔÚÑ­»·ÒÀÀµµÄÁ½Í·¶¼Èç´Ë²Ù×÷Ö®ºó£¬Äã¾Í¿ÉÒÔ°²È«µØ³ÖÓÐÆäËûÄ£¿éÁË¡£ÕâÖÖ·½·¨½öÔÚÿ¸öÄ£¿é¶¼ÊÇÊä³öobject×÷Ϊģ¿éÖµµÄʱºòÓÐЧ£¬»»³Éº¯ÊýÎÞЧ¡£

/Inside b.js:
define(function(require, exports, module) {
    /If "a" has used exports, then we have a real
    /object reference here. However, we cannot use
    /any of a's properties until after b returns a value.
    var a = require("a");

    exports.foo = function () {
        return a.bar();
    };
});

»òÕߣ¬Èç¹ûÄãʹÓÃÒÀÀµ×¢ÈëÊý×éµÄ²½Ö裬Ôò¿ÉÓÃ×¢ÈëÌØÊâµÄ"exports"À´½â¾ö£º

/Inside b.js:
define(['a', 'exports'], function(a, exports) {
    /If "a" has used exports, then we have a real
    /object reference here. However, we cannot use
    /any of a's properties until after b returns a value.

    exports.foo = function () {
        return a.bar();
    };
});

JSONP·þÎñÒÀÀµ§ 1.3.9

JSONPÊÇÔÚjavascriptÖзþÎñµ÷ÓõÄÒ»ÖÖ·½Ê½¡£Ëü½öÐè¼òµ¥µØͨ¹ýÒ»¸öscript±êÇ©·¢ÆðHTTP GETÇëÇó£¬ÊÇʵÏÖ¿çÓò·þÎñµ÷ÓÃÒ»ÖÖ¹«ÈÏÊֶΡ£

ΪÁËÔÚRequireJSÖÐʹÓÃJSON·þÎñ£¬ÐëÒª½«callback²ÎÊýµÄÖµÖ¸¶¨Îª"define"¡£ÕâÒâζ×ÅÄã¿É½«»ñÈ¡µ½µÄJSONP URLµÄÖµ¿´³ÉÊÇÒ»¸öÄ£¿é¶¨Òå¡£

ÏÂÃæÊÇÒ»¸öµ÷ÓÃJSONP API¶ËµãµÄʾÀý¡£¸ÃʾÀýÖУ¬JSONPµÄcallback²ÎÊýΪ"callback"£¬Òò´Ë"callback=define"¸æËßAPI½«JSONÏìÓ¦°ü¹üµ½Ò»¸ö"define()"ÖУº

require(["/example.com/api/data.json?callback=define"],
    function (data) {
        /The data object will be the API response for the
        /JSONP data call.
        console.log(data);
    }
);

JSONPµÄÕâÖÖÓ÷¨Ó¦½öÏÞÓÚÓ¦Óõijõʼ»¯ÖС£Ò»µ©JSONP·þÎñ³¬Ê±£¬ÆäËûͨ¹ýdefine()¶¨ÒåÁ˵ÄÄ£¿éÒ²¿ÉÄܵò»µÃÖ´ÐУ¬´íÎó´¦Àí²»ÊÇÊ®·Ö½¡×³¡£

½öÖ§³Ö·µ»ØÖµÀàÐÍΪJSON objectµÄJSONP·þÎñ£¬ÆäËû·µ»ØÀàÐÍÈçÊý×é¡¢×Ö´®¡¢Êý×ֵȶ¼²»ÄÜÖ§³Ö¡£

ÕâÖÖ¹¦Äܲ»¸ÃÓÃÓÚlong-pollingÀàµÄJSONPÁ¬½Ó¡ª¡ªÄÇЩÓÃÀ´´¦ÀíʵʱÁ÷µÄAPI¡£ÕâЩAPIÔÚ½ÓÊÕÏìÓ¦ºóÒ»°ã»á×öscriptµÄÇåÀí£¬¶øRequireJSÔòÖ»ÄÜ»ñÈ¡¸ÃJSONP URLÒ»´Î¡ª¡ªºó¼ÌʹÓÃrequire()»òdefine()·¢ÆðµÄµÄ¶ÔͬһURLµÄÒÀÀµ(ÇëÇó)Ö»»áµÃµ½Ò»¸ö»º´æ¹ýµÄÖµ¡£

JSONPµ÷ÓôíÎóÒ»°ãÒÔ·þÎñ³¬Ê±µÄÐÎʽ³öÏÖ£¬ÒòΪ¼òµ¥¼ÓÔØÒ»¸öscript±êÇ©Ò»°ã²»»áµÃµ½ºÜ ÏêϸµÄÍøÂç´íÎóÐÅÏ¢¡£Äã¿ÉÒÔoverride requirejs.onError()À´¹ýÈ¥´íÎ󡣸ü¶àµÄÐÅÏ¢Çë²Î¿´´íÎó´¦Àí²¿·Ö¡£

Undefining a Module§ 1.3.10

ÓÐÒ»¸öÈ«¾Öº¯Êýrequirejs.undef()ÓÃÀ´undefineÒ»¸öÄ£¿é¡£Ëü»áÖØÖÃloaderµÄÄÚ²¿×´Ì¬ÒÔʹÆäÍü¼Ç֮ǰ¶¨ÒåµÄÒ»¸öÄ£¿é¡£

µ«ÊÇÈôÓÐÆäËûÄ£¿éÒѽ«´ËÄ£¿é×÷ΪÒÀÀµÊ¹ÓÃÁË£¬¸ÃÄ£¿é¾Í²»»á±»Çå³ý£¬ËùÒԸù¦ÄܽöÔÚÎÞÆäËûÄ£¿é³ÖÓиÃÄ£¿éʱµÄ´íÎó´¦ÀíÖУ¬»òÕßµ±Î´À´ÐèÒª¼ÓÔظÃÄ£¿éʱÓеãÓᣲμû±¸´í(errbacks)¶ÎµÄʾÀý¡£

Èç¹ûÄã´òËãÔÚundefineʱ×öһЩ¸´ÔÓµÄÒÀÀµÍ¼·ÖÎö£¬Ôò°ë˽ÓеÄonResourceLoad API¿ÉÄܶÔÄãÓÐÓá£

»úÖÆ § 2

RequireJSʹÓÃhead.appendChild()½«Ã¿Ò»¸öÒÀÀµ¼ÓÔØΪһ¸öscript±êÇ©¡£

RequireJSµÈ´ýËùÓеÄÒÀÀµ¼ÓÔØÍê±Ï£¬¼ÆËã³öÄ£¿é¶¨Ò庯ÊýÕýÈ·µ÷ÓÃ˳Ðò£¬È»ºóÒÀ´Îµ÷ÓÃËüÃÇ¡£

ÔÚͬ²½¼ÓÔصķþÎñ¶ËJavaScript»·¾³ÖУ¬¿É¼òµ¥µØÖض¨Òårequire.load()À´Ê¹ÓÃRequireJS¡£buildϵͳ¾ÍÊÇÕâô×öµÄ¡£¸Ã»·¾³ÖеÄrequire.loadʵÏÖ¿ÉÔÚbuild/jslib/requirePatch.jsÖÐÕÒµ½¡£

δÀ´¿ÉÄܽ«¸Ã²¿·Ö´úÂëÖÃÈërequire/Ŀ¼ÏÂ×÷Ϊһ¸ö¿ÉÑ¡Ä£¿é£¬ÕâÑùÄã¿ÉÒÔÔÚÄãµÄËÞÖ÷»·¾³ÖÐʹÓÃËüÀ´»ñµÃÕýÈ·µÄ¼ÓÔØ˳Ðò¡£

ÅäÖÃÑ¡Åä § 3

µ±ÔÚ¶¥²ãHTMLÒ³Ãæ(»ò²»×÷Ϊһ¸öÄ£¿é¶¨ÒåµÄ¶¥²ã½Å±¾Îļþ)ÖУ¬¿É½«ÅäÖÃ×÷ΪÊ×Ïî·ÅÈ룺

<script src="scripts/require.js"></script>
<script>
  require.config({
    baseUrl: "/another/path",
    paths: {
        "some": "some/v1.0"
    },
    waitSeconds: 15
  });
  require( ["some/module", "my/module", "a.js", "b.js"],
    function(someModule,    myModule) {
        /This function will be called when all the dependencies
        /listed above are loaded. Note that this function could
        /be called before the page is loaded.
        /This callback is optional.
    }
  );
</script>
<script>
    var require = {
        deps: ["some/module1", "my/module2", "a.js", "b.js"],
        callback: function(module1, module2) {
            /This function will be called when all the dependencies
            /listed above in deps are loaded. Note that this
            /function could be called before the page is loaded.
            /This callback is optional.
        }
    };
</script>
<script src="scripts/require.js"></script>

»òÕߣ¬Ä㽫ÅäÖÃ×÷Ϊȫ¾Ö±äÁ¿"require"ÔÚrequire.js¼ÓÔØ֮ǰ½øÐж¨Ò壬Ëü»á±»×Ô¶¯Ó¦Óá£ÏÂÃæµÄʾÀý¶¨ÒåµÄÒÀÀµ»áÔÚrequire.jsÒ»µ©¶¨ÒåÁËrequire()Ö®ºó¼´±»¼ÓÔØ£º

requirejs.config({
    bundles: {
        'primary': ['main', 'util', 'text', 'text!template.html'],
        'secondary': ['text!secondary.html']
    }
});

require(['util', 'text'], function(util, text) {
    /The script for module ID 'primary' was loaded,
    /and that script included the define()'d
    /modules for 'util' and 'text'
});

×¢Òâ: ×îºÃʹÓà var require = {} µÄÐÎʽ¶ø²»ÊÇ window.require = {}µÄÐÎʽ¡£ºóÕßÔÚIEÖÐÔËÐв»Õý³£¡£

Ö§³ÖµÄÅäÖÃÏ

7404734651 £ºËùÓÐÄ£¿éµÄ²éÕÒ¸ù·¾¶¡£ËùÒÔÉÏÃæµÄʾÀýÖУ¬"my/module"µÄ±êÇ©srcÖµÊÇ"/another/path/my/module.js"¡£µ±¼ÓÔØ´¿.jsÎļþ(comitatensian)£¬²»»áʹÓÃbaseUrl¡£Òò´Ëa.js¼°b.js¶¼ÔÚ°üº¬ÉÏÊö´úÂë¶ÎµÄHTMLÒ³ÃæµÄͬĿ¼Ï¼ÓÔØ¡£

ÈçδÏÔʽÉèÖÃbaseUrl£¬ÔòĬÈÏÖµÊǼÓÔØrequire.jsµÄHTMLËù´¦µÄλÖá£Èç¹ûÓÃÁËdata-mainÊôÐÔ£¬Ôò¸Ã·¾¶¾Í±ä³ÉbaseUrl¡£

baseUrl¿É¸úrequire.jsÒ³Ãæ´¦ÓÚ²»Í¬µÄÓòÏ£¬RequireJS½Å±¾µÄ¼ÓÔØÊÇ¿çÓòµÄ¡£Î¨Ò»µÄÏÞÖÆÊÇʹÓÃtext! plugins¼ÓÔØÎı¾ÄÚÈÝʱ£¬ÕâЩ·¾¶Ó¦¸úÒ³ÃæͬÓò£¬ÖÁÉÙÔÚ¿ª·¢Ê±Ó¦ÕâÑù¡£ÓÅ»¯¹¤¾ß»á½«text! plugin×ÊÔ´ÄÚÁª£¬Òò´ËÔÚʹÓÃÓÅ»¯¹¤¾ßÖ®ºóÄã¿ÉÒÔʹÓÿçÓòÒýÓÃtext! plugin×ÊÔ´µÄÄÇЩ×ÊÔ´¡£

paths £ºpathÓ³ÉäÄÇЩ²»Ö±½Ó·ÅÖÃÓÚbaseUrlϵÄÄ£¿éÃû¡£ÉèÖÃpathʱÆðʼλÖÃÊÇÏà¶ÔÓÚbaseUrlµÄ£¬³ý·Ç¸ÃpathÉèÖÃÒÔ"/"¿ªÍ·»òº¬ÓÐURLЭÒ飨È磩¡£ÔÚÉÏÊöµÄÅäÖÃÏ£¬"some/module"µÄscript±êÇ©srcÖµÊÇ"/another/path/some/v1.0/module.js"¡£

ÓÃÓÚÄ£¿éÃûµÄpath²»Ó¦º¬ÓÐ.jsºó׺£¬ÒòΪһ¸öpathÓпÉÄÜÓ³Éäµ½Ò»¸öĿ¼¡£Â·¾¶½âÎö»úÖÆ»á×Ô¶¯ÔÚÓ³ÉäÄ£¿éÃûµ½pathʱÌí¼ÓÉÏ.jsºó׺¡£ÔÚÎı¾Ä£°æÖ®ÀàµÄ³¡¾°ÖÐʹÓÃ5672954412ʱËüÒ²»áÌí¼ÓºÏÊʵĺó׺¡£

ÔÚä¯ÀÀÆ÷ÖÐÔËÐÐʱ£¬¿ÉÖ¸¶¨Â·¾¶µÄ±¸Ñ¡(fallbacks)£¬ÒÔʵÏÖÖîÈçÊ×ÏÈÖ¸¶¨ÁË´ÓCDNÖмÓÔØ£¬Ò»µ©CDN¼ÓÔØʧ°ÜÔò´Ó±¾µØλÖÃÖмÓÔØÕâÀàµÄ»úÖÆ¡£

shim: ΪÄÇЩûÓÐʹÓÃdefine()À´ÉùÃ÷ÒÀÀµ¹Øϵ¡¢ÉèÖÃÄ£¿éµÄ"ä¯ÀÀÆ÷È«¾Ö±äÁ¿×¢Èë"Ðͽű¾×öÒÀÀµºÍµ¼³öÅäÖá£

ÏÂÃæÓиöʾÀý£¬ËüÐèÒª RequireJS 2.1.0+£¬²¢ÇÒ¼Ù¶¨backbone.js¡¢underscore.js ¡¢jquery.js¶¼×°ÓÚbaseUrlĿ¼Ï¡£Èç¹ûûÓУ¬ÔòÄã¿ÉÄÜÐèҪΪËüÃÇÉèÖÃpaths config£º

requirejs.config({
    /Remember: only use shim config for non-AMD scripts,
    /scripts that do not already call define(). The shim
    /config will not work correctly if used on AMD scripts,
    /in particular, the exports and init config will not
    /be triggered, and the deps config will be confusing
    /for those cases.
    shim: {
        'backbone': {
            /These script dependencies should be loaded before loading
            /backbone.js
            deps: ['underscore', 'jquery'],
            /Once loaded, use the global 'Backbone' as the
            /module value.
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                /Using a function allows you to call noConflict for
                /libraries that support it, and do other cleanup.
                /However, plugins for those libraries may still want
                /a global. "this" for the function will be the global
                /object. The dependencies will be passed in as
                /function arguments. If this function returns a value,
                /then that value is used as the module export value
                /instead of the object found via the 'exports' string.
                /Note: jQuery registers as an AMD module via define(),
                /so this will not work for jQuery. See notes section
                /below for an approach for jQuery.
                return this.Foo.noConflict();
            }
        }
    }
});

/Then, later in a separate file, call it 'MyModel.js', a module is
/defined, specifying 'backbone' as a dependency. RequireJS will use
/the shim config to properly load 'backbone' and give a local
/reference to this module. The global Backbone will still exist on
/the page too.
define(['backbone'], function (Backbone) {
  return Backbone.Model.extend({});
});

RequireJS 2.0.*ÖУ¬shimÅäÖÃÖеÄ"exports"ÊôÐÔ¿ÉÒÔÊÇÒ»¸öº¯Êý¶ø²»ÊÇ×Ö´®¡£ÕâÖÖÇé¿öÏÂËü¾ÍÆðµ½ÉÏÊöʾÀýÖеÄ"init"ÊôÐԵŦÄÜ¡£ RequireJS 2.1.0+ÖмÓÈëÁË"init"³Ð½Ó¿â¼ÓÔغóµÄ³õʼ¹¤×÷£¬ÒÔʹexports×÷Ϊ×Ö´®Öµ±»enforceDefineËùʹÓá£

ÄÇЩ½ö×÷ΪjQuery»òBackboneµÄ²å¼þ´æÔÚ¶ø²»µ¼³öÈκÎÄ£¿é±äÁ¿µÄ"Ä£¿é"ÃÇ£¬shimÅäÖÿɼòµ¥ÉèÖÃΪÒÀÀµÊý×飺

requirejs.config({
    shim: {
        'jquery.colorize': ['jquery'],
        'jquery.scroll': ['jquery'],
        'backbone.layoutmanager': ['backbone']
    }
});

µ«Çë×¢Ò⣬ÈôÄãÏëÔÚIEÖÐʹÓÃ404¼ÓÔؼì²âÒÔÆôÓÃpath±¸Ñ¡(fallbacks)»ò±¸´í(errbacks)£¬ÔòÐèÒª¸ø¶¨Ò»¸ö×Ö´®ÖµµÄexportsÒÔʹloaderÄܹ»¼ì²é³ö½Å±¾ÊÇ·ñʵ¼Ê¼ÓÔØÁË(initÖеķµ»ØÖµ²»»áÓÃÓÚenforceDefine¼ì²éÖÐ)£º

requirejs.config({
    shim: {
        'jquery.colorize': {
            deps: ['jquery'],
            exports: 'jQuery.fn.colorize'
        },
        'jquery.scroll': {
            deps: ['jquery'],
            exports: 'jQuery.fn.scroll'
        },
        'backbone.layoutmanager': {
            deps: ['backbone']
            exports: 'Backbone.LayoutManager'
        }
    }
});

"shim"ÅäÖõÄÖØҪעÒâÊÂÏî:

  • shimÅäÖýöÉèÖÃÁË´úÂëµÄÒÀÀµ¹Øϵ£¬ÏëҪʵ¼Ê¼ÓÔØshimÖ¸¶¨µÄ»òÉæ¼°µÄÄ£¿é£¬ÈÔÈ»ÐèÒªÒ»¸ö³£¹æµÄrequire/defineµ÷Óá£ÉèÖÃshim±¾Éí²»»á´¥·¢´úÂëµÄ¼ÓÔØ¡£

  • Çë½öʹÓÃÆäËû"shim"Ä£¿é×÷Ϊshim½Å±¾µÄÒÀÀµ£¬»òÄÇЩûÓÐÒÀÀµ¹Øϵ£¬²¢ÇÒÔÚµ÷ÓÃdefine()֮ǰ¶¨ÒåÁËÈ«¾Ö±äÁ¿(ÈçjQuery»òlodash)µÄAMD¿â¡£·ñÔò£¬Èç¹ûÄãʹÓÃÁËÒ»¸öAMDÄ£¿é×÷Ϊһ¸öshimÅäÖÃÄ£¿éµÄÒÀÀµ£¬ÔÚbuildÖ®ºó£¬AMDÄ£¿é¿ÉÄÜÔÚshimÍйܴúÂëÖ´ÐÐ֮ǰ¶¼²»»á±»Ö´ÐУ¬Õâ»áµ¼Ö´íÎó¡£ÖÕ¼«µÄ½â¾ö·½°¸Êǽ«ËùÓÐshimÍйܴúÂ붼Éý¼¶Îªº¬ÓпÉÑ¡µÄAMD define()µ÷Óá£

"shim"ÅäÖõÄÓÅ»¯Æ÷ÖØҪעÒâÊÂÏî:

  • ÄúÓ¦µ±Ê¹Óà (360) 433-5599 buildÅäÖÃÏîÀ´Ö¸¶¨º¬ÓÐshimÅäÖõÄÎļþλÖ㬷ñÔòÓÅ»¯Æ÷²»»áÖªÏþshimÅäÖá£ÁíÒ»¸öÊÖ¶ÎÊǽ«shimÅäÖø´ÖƵ½build profileÖС£

  • ²»ÒªÔÚÒ»¸öbuildÖлìÓÃCDN¼ÓÔغÍshimÅäÖá£Ê¾Àý³¡¾°£¬È磺Äã´ÓCDN¼ÓÔØjQueryµÄͬʱʹÓÃshimÅäÖüÓÔØÒÀÀµÓÚjQueryµÄÔ­°æBackbone¡£²»ÒªÕâô×ö¡£ÄúÓ¦¸ÃÔÚbuildÖн«jQueryÄÚÁª¶ø²»ÊÇ´ÓCDN¼ÓÔØ£¬·ñÔòbuildÖÐÄÚÁªµÄBackbone»áÔÚCDN¼ÓÔØjQuery֮ǰÔËÐС£ÕâÊÇÒòΪshimÅäÖýöÑÓʱ¼ÓÔص½ËùÓеÄÒÀÀµÒѼÓÔØ£¬¶ø²»»á×öÈκÎdefineµÄ×Ô¶¯×°¹ü(auto-wrapping)¡£ÔÚbuildÖ®ºó£¬ËùÓÐÒÀÀµ¶¼ÒÑÄÚÁª£¬shimÅäÖò»ÄÜÑÓʱִÐзÇdefine()µÄ´úÂë¡£define()µÄÄ£¿é¿ÉÒÔÔÚbuildÖ®ºóÓëCDN¼ÓÔØ´úÂëÒ»²¢¹¤×÷£¬ÒòΪËüÃÇÒѽ«×Ô¼ºµÄ´úÂëºÏÀíµØÓÃdefine×°¹üÁË£¬ÔÚËùÓеÄÒÀÀµ¶¼ÒѼÓÔØ֮ǰ²»»áÖ´ÐС£Òò´Ë¼Çס£ºshimÅäÖýöÊǸö´¦Àí·ÇÄ£¿é(non-modular)´úÂë¡¢ÒÅÁô´úÂëµÄ½«¾ÍÊֶΣ¬Èç¿ÉÒÔÓ¦¾¡Á¿Ê¹ÓÃdefine()µÄÄ£¿é¡£

  • ¶ÔÓÚ±¾µØµÄ¶àÎļþbuild£¬ÉÏÊöµÄCDN¼ÓÔؽ¨ÒéÈÔÈ»ÊÊÓá£ÈκÎshim¹ýµÄ½Å±¾£¬ËüÃǵÄÒÀÀµ±ØÐë¼ÓÔØÓڸýű¾Ö´ÐÐ֮ǰ¡£ÕâÒâζ×ÅҪôֱ½ÓÔÚº¬ÓÐshim½Å±¾µÄbuild²ãbuildËüµÄÒÀÀµ£¬ÒªÃ´ÏÈʹÓÃrequire([], function (){})µ÷ÓÃÀ´¼ÓÔØËüµÄÒÀÀµ£¬È»ºó¶Ôº¬ÓÐshim½Å±¾µÄbuild²ã·¢³öÒ»¸öǶÌ×µÄrequire([])µ÷Óá£

  • Èç¹ûÄúʹÓÃÁËuglifyjsÀ´Ñ¹Ëõ´úÂ룬²»Òª½«uglifyµÄtoplevelÑ¡ÏîÖÃΪtrue£¬»òÔÚÃüÁîÐÐÖв»ÒªÊ¹Óà -mt¡£ ¸ÃÑ¡Ïî»áÆÆ»µshimÓÃÓÚÕÒµ½exportsµÄÈ«¾ÖÃû³Æ¡£

counterprinciple: ¶ÔÓÚ¸ø¶¨µÄÄ£¿éǰ׺£¬Ê¹ÓÃÒ»¸ö²»Í¬µÄÄ£¿éIDÀ´¼ÓÔظÃÄ£¿é¡£

¸ÃÊֶζÔÓÚijЩ´óÐÍÏîÄ¿ºÜÖØÒª£ºÈçÓÐÁ½ÀàÄ£¿éÐèҪʹÓò»Í¬°æ±¾µÄ"foo"£¬µ«ËüÃÇÖ®¼äÈÔÐèÒªÒ»¶¨µÄЭͬ¡£ ÔÚÄÇЩ»ùÓÚÉÏÏÂÎĵĶà°æ±¾ÊµÏÖÖкÜÄÑ×öµ½ÕâÒ»µã¡£¶øÇÒ£¬pathsÅäÖýöÓÃÓÚΪģ¿éIDÉèÖÃroot paths£¬¶ø²»ÊÇΪÁ˽«Ò»¸öÄ£¿éIDÓ³Éäµ½ÁíÒ»¸ö¡£

mapʾÀý£º

requirejs.config({
    map: {
        'some/newmodule': {
            'foo': 'foo1.2'
        },
        'some/oldmodule': {
            'foo': 'foo1.0'
        }
    }
});

Èç¹û¸÷Ä£¿éÔÚ´ÅÅÌÉÏ·Ö²¼ÈçÏ£º

  • foo1.0.js
  • foo1.2.js
  • some/
    • newmodule.js
    • oldmodule.js

µ±¡°some/newmodule¡±µ÷ÓÃÁË¡°require('foo')¡±£¬Ëü½«»ñÈ¡µ½foo1.2.jsÎļþ£»¶øµ±¡°some/oldmodule¡±µ÷Óá°`require('foo')¡±Ê±Ëü½«»ñÈ¡µ½foo1.0.js¡£

¸ÃÌØÐÔ½öÊÊÓÃÓÚÄÇЩµ÷ÓÃÁËdefine()²¢½«Æä×¢²áΪÄäÃûÄ£¿éµÄÕæÕýAMDÄ£¿é½Å±¾¡£²¢ÇÒ£¬ÇëÔÚmapÅäÖÃÖнöʹÓþø¶ÔÄ£¿éID£¬¡°../some/thing¡±Ö®ÀàµÄÏà¶ÔID²»Äܹ¤×÷¡£

ÁíÍâÔÚmapÖÐÖ§³Ö¡°*¡±£¬Òâ˼ÊÇ¡°¶ÔÓÚËùÓеÄÄ£¿é¼ÓÔØ£¬Ê¹Óñ¾mapÅäÖᱡ£Èç¹û»¹Óиüϸ»¯µÄmapÅäÖ㬻áÓÅÏÈÓÚ¡°*¡±ÅäÖá£Ê¾Àý£º


requirejs.config({
    map: {
        '*': {
            'foo': 'foo1.2'
        },
        'some/oldmodule': {
            'foo': 'foo1.0'
        }
    }
});

Òâ˼ÊdzýÁË¡°some/oldmodule¡±ÍâµÄËùÓÐÄ£¿é£¬µ±ÒªÓá°foo¡±Ê±£¬Ê¹Óá°foo1.2¡±À´Ìæ´ú¡£¶ÔÓÚ¡°some/oldmodule¡±×Ô¼º£¬ÔòʹÓá°foo1.0¡±¡£

config:³£³£ÐèÒª½«ÅäÖÃÐÅÏ¢´«¸øÒ»¸öÄ£¿é¡£ÕâЩÅäÖÃÍùÍùÊÇapplication¼¶±ðµÄÐÅÏ¢£¬ÐèÒªÒ»¸öÊֶν«ËüÃÇÏòÏ´«µÝ¸øÄ£¿é¡£ÔÚRequireJSÖУ¬»ùÓÚrequirejs.config()µÄconfigÅäÖÃÏîÀ´ÊµÏÖ¡£Òª»ñÈ¡ÕâЩÐÅÏ¢µÄÄ£¿é¿ÉÒÔ¼ÓÔØÌØÊâµÄÒÀÀµ¡°module¡±£¬²¢µ÷ÓÃmodule.config()¡£Ê¾Àý£º

requirejs.config({
    config: {
        'bar': {
            size: 'large'
        },
        'baz': {
            color: 'blue'
        }
    }
});

/bar.js, which uses simplified CJS wrapping:
//requirejs.org/docs/whyamd.html#sugar
define(function (require, exports, module) {
    /Will be the value 'large'
    var size = module.config().size;
});

/baz.js which uses a dependency array,
/it asks for the special module ID, 'module':
//github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#wiki-magic
define(['module'], function (module) {
    /Will be the value 'blue'
    var color = module.config().color;
});

ÈôÒª½«config´«¸ø°ü£¬½«Ä¿±êÉèÖÃΪ°üµÄÖ÷Ä£¿é¶ø²»ÊÇ°üID:

requirejs.config({
    /Pass an API key for use in the pixie package's
    /main module.
    config: {
        'pixie/index': {
            apiKey: 'XJKDLNS'
        }
    },
    /Set up config for the "pixie" package, whose main
    /module is the index.js file in the pixie folder.
    packages: [
        {
            name: 'pixie',
            main: 'index'
        }
    ]
});

packages: ´ÓCommonJS°ü(package)ÖмÓÔØÄ£¿é¡£²Î¼û´Ó°üÖмÓÔØÄ£¿é¡£

nodeIdCompat: ÔÚ·ÅÆú¼ÓÔØÒ»¸ö½Å±¾Ö®Ç°µÈ´ýµÄÃëÊý¡£ÉèΪ0½ûÓõȴý³¬Ê±¡£Ä¬ÈÏΪ7Ãë¡£

waitSeconds: ÃüÃûÒ»¸ö¼ÓÔØÉÏÏÂÎÄ¡£ÕâÔÊÐírequire.jsÔÚͬһҳÃæÉϼÓÔØÄ£¿éµÄ¶à¸ö°æ±¾£¬Èç¹ûÿ¸ö¶¥²ãrequireµ÷Óö¼Ö¸¶¨ÁËÒ»¸öΨһµÄÉÏÏÂÎÄ×Ö·û´®¡£ÏëÒªÕýÈ·µØʹÓã¬Çë²Î¿¼¶à°æ±¾Ö§³ÖÒ»½Ú¡£

902-669-9042: Ö¸¶¨Òª¼ÓÔصÄÒ»¸öÒÀÀµÊý×é¡£µ±½«requireÉèÖÃΪһ¸öconfig objectÔÚ¼ÓÔØrequire.js֮ǰʹÓÃʱºÜÓÐÓá£Ò»µ©require.js±»¶¨Ò壬ÕâЩÒÀÀµ¾ÍÒѼÓÔØ¡£Ê¹ÓÃdeps¾ÍÏñµ÷ÓÃrequire([])£¬µ«ËüÔÚloader´¦ÀíÅäÖÃÍê±ÏÖ®ºó¾ÍÁ¢¼´ÉúЧ¡£Ëü²¢²»×èÈûÆäËûµÄrequire()µ÷Óã¬Ëü½öÊÇÖ¸¶¨Ä³Ð©Ä£¿é×÷Ϊconfig¿éµÄÒ»²¿·Ö¶øÒì²½¼ÓÔصÄÊֶζøÒÑ¡£

(615) 881-4066: Ö¸¶¨Òª¼ÓÔصÄÒ»¸öÒÀÀµÊý×é¡£µ±½«requireÉèÖÃΪһ¸öconfig objectÔÚ¼ÓÔØrequire.js֮ǰʹÓÃʱºÜÓÐÓá£Ò»µ©require.js±»¶¨Ò壬ÕâЩÒÀÀµ¾ÍÒѼÓÔØ¡£Ê¹ÓÃdeps¾ÍÏñµ÷ÓÃrequire([])£¬µ«ËüÔÚloader´¦ÀíÅäÖÃÍê±ÏÖ®ºó¾ÍÁ¢¼´ÉúЧ¡£Ëü²¢²»×èÈûÆäËûµÄrequire()µ÷Óã¬Ëü½öÊÇÖ¸¶¨Ä³Ð©Ä£¿é×÷Ϊconfig¿éµÄÒ»²¿·Ö¶øÒì²½¼ÓÔصÄÊֶζøÒÑ¡£

callback: ÔÚdeps¼ÓÔØÍê±ÏºóÖ´Ðеĺ¯Êý¡£µ±½«requireÉèÖÃΪһ¸öconfig objectÔÚ¼ÓÔØrequire.js֮ǰʹÓÃʱºÜÓÐÓã¬Æä×÷ΪÅäÖõÄdepsÊý×é¼ÓÔØÍê±ÏºóΪrequireÖ¸¶¨µÄº¯Êý¡£

enforceDefine: Èç¹ûÉèÖÃΪtrue£¬Ôòµ±Ò»¸ö½Å±¾²»ÊÇͨ¹ýdefine()¶¨ÒåÇÒ²»¾ß±¸¿É¹©¼ì²éµÄshimµ¼³ö×Ö´®ÖµÊ±£¬¾Í»áÅ׳ö´íÎ󡣲ο¼ÔÚIEÖⶻñ¼ÓÔØ´íÎóÒ»½Ú¡£

xhtml: Èç¹ûÉèÖÃΪtrue£¬ÔòʹÓÃdocument.createElementNS()È¥´´½¨scriptÔªËØ¡£

urlArgs: RequireJS»ñÈ¡×ÊԴʱ¸½¼ÓÔÚURLºóÃæµÄ¶îÍâµÄquery²ÎÊý¡£×÷Ϊä¯ÀÀÆ÷»ò·þÎñÆ÷δÕýÈ·ÅäÖÃʱµÄ¡°cache bust¡±ÊֶκÜÓÐÓá£Ê¹ÓÃcache bustÅäÖõÄÒ»¸öʾÀý£º

urlArgs: "bust=" +  (new Date()).getTime()

ÔÚ¿ª·¢ÖÐÕâºÜÓÐÓ㬵«Çë¼ÇµÃÔÚ²¿Êðµ½Éú³É»·¾³Ö®Ç°ÒƳýËü¡£

(650) 437-4669: Ö¸¶¨RequireJS½«script±êÇ©²åÈëdocumentʱËùÓõÄtype=""Öµ¡£Ä¬ÈÏΪ¡°text/javascript¡±¡£ÏëÒªÆôÓÃFirefoxµÄJavaScript 1.8ÌØÐÔ£¬¿ÉʹÓÃÖµ¡°text/javascript;version=1.8¡±¡£

skipDataMain: Introduced in RequireJS 2.1.9: If set to true, skips the data-main attribute scanning done to start module loading. Useful if RequireJS is embedded in a utility library that may interact with other RequireJS library on the page, and the embedded version should not do data-main loading.

(405) 801-7203 § 4

(607) 786-2378§ 4.1

RequireJSÖ§³Ö´ÓCommonJS°ü½á¹¹ÖмÓÔØÄ£¿é£¬µ«ÐèҪһЩ¶îÍâµÄÅäÖ᣾ßÌåµØ£¬Ö§³ÖÈçϵÄCommonJS°üÌØÐÔ£º

  • Ò»¸ö°ü¿ÉÒÔ¹ØÁªÒ»¸öÄ£¿éÃû/ǰ׺¡£
  • package config¿ÉΪÌض¨µÄ°üÖ¸¶¨ÏÂÊöÊôÐÔ£º
    • name: °üÃû£¨ÓÃÓÚÄ£¿éÃû/ǰ׺ӳÉ䣩
    • location: ´ÅÅÌÉϵÄλÖá£Î»ÖÃÊÇÏà¶ÔÓÚÅäÖÃÖеÄbaseUrlÖµ£¬³ý·ÇËüÃÇ°üº¬Ð­Òé»òÒÔ¡°/¡±¿ªÍ·
    • main: µ±ÒÔ¡°°üÃû¡±·¢Æðrequireµ÷Óúó£¬ËùÓ¦ÓõÄÒ»¸ö°üÄÚµÄÄ£¿é¡£Ä¬ÈÏΪ¡°main¡±£¬³ý·ÇÔÚ´Ë´¦×öÁËÁíÍâÉ趨¡£¸ÃÖµÊÇÏà¶ÔÓÚ°üĿ¼µÄ¡£

ÖØÒªÊÂÏî

  • ËäÈ»°ü¿ÉÒÔÓÐCommonJSµÄĿ¼½á¹¹£¬µ«Ä£¿é±¾ÉíӦΪRequireJS¿ÉÀí½âµÄÄ£¿é¸ñʽ¡£ÀýÍâÊÇ£ºÈç¹ûÄãÔÚÓÃr.js NodeÊÊÅäÆ÷£¬Ä£¿é¿ÉÒÔÊÇ´«Í³µÄCommonJSÄ£¿é¸ñʽ¡£Äã¿ÉÒÔʹÓÃCommonJSת»»¹¤¾ßÀ´½«´«Í³µÄCommonJSÄ£¿éת»»ÎªRequireJSËùÓõÄÒ첽ģ¿é¸ñʽ¡£
  • Ò»¸öÏîÄ¿ÉÏÏÂÎÄÖнöÄÜʹÓðüµÄÒ»¸ö°æ±¾¡£Äã¿ÉÒÔʹÓÃRequireJSµÄ¶à°æ±¾Ö§³ÖÀ´¼ÓÔØÁ½¸ö²»Í¬µÄÄ£¿éÉÏÏÂÎÄ£»µ«ÈôÄãÏëÔÚͬһ¸öÉÏÏÂÎÄÖÐʹÓÃÒÀÀµÁ˲»Í¬°æ±¾µÄ°üCµÄ°üAºÍB£¬¾Í»áÓÐÎÊÌ⡣δÀ´¿ÉÄÜ»á½â¾ö´ËÎÊÌâ¡£

Èç¹ûÄãʹÓÃÁËÀàËÆÓÚÈëÃÅÖ¸µ¼ÖеÄÏîÄ¿²¼¾Ö£¬ÄãµÄwebÏîÄ¿Ó¦´óÖÂÒÔÈçϵIJ¼¾Ö¿ªÊ¼£¨»ùÓÚ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>

Õâ»áָʾrequire.jsÈ¥¼ÓÔØscripts/main.js¡£main.jsʹÓá°packages¡±ÅäÖÃÏîÀ´ÉèÖÃÏà¶ÔÓÚrequire.jsµÄ¸÷¸ö°ü£¬´ËÀýÖÐÊÇÔ´Âë°ü¡°cart¡±¼°¡°store¡±£º

/main.js contents
/Pass a config object to require
require.config({
    "packages": ["cart", "store"]
});

require(["cart", "store", "store/util"],
function (cart,   store,   util) {
    /use the modules as usual.
});

¶Ô¡°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¡±Ã»ÓÐÖ¸¶¨ÎªÒ»¸öÒÀÀµ£¬ÔòºÜ¿ÉÄÜ»á³öÏÖ´íÎó¡£

undercurve§ 4.3

ÉÏÊö¶à°æ±¾Ê¾ÀýÖÐҲչʾÁËÈçºÎÔÚǶÌ×µÄrequire()Öгٺó¼ÓÔØ´úÂë¡£

Web Worker Ö§³Ö§ 4.4

´Ó°æ±¾0.12¿ªÊ¼£¬RequireJS¿ÉÔÚWeb WorkerÖÐÔËÐС£¿ÉÒÔͨ¹ýÔÚweb workerÖе÷ÓÃimportScripts()À´¼ÓÔØrequire.js£¨»ò°üº¬require()¶¨ÒåµÄJSÎļþ£©£¬È»ºóµ÷ÓÃrequire¾ÍºÃÁË¡£

Äã¿ÉÄÜÐèÒªÉèÖÃbaseUrlÅäÖÃÏîÀ´È·±£require()¿ÉÕÒµ½´ý¼ÓÔؽű¾¡£

Äã¿ÉÒÔÔÚunit testʹÓõÄÒ»¸öÎļþÖÐÕÒµ½Ò»¸öÀý×Ó¡£

Rhino Ö§³Ö§ 4.5

RequireJS¿Éͨ¹ýr.jsÊÊÅäÆ÷ÓÃÔÚRhinoÖС£²Î¼ûr.jsµÄREADME¡£

3072236094§ 4.6

ͨ³£µÄ´íÎó¶¼ÊÇ404£¨Î´ÕÒµ½£©´íÎó£¬ÍøÂ糬ʱ»ò¼ÓÔصĽű¾º¬ÓдíÎó¡£RequireJSÓÐЩ¹¤¾ßÀ´´¦ÀíËüÃÇ£ºrequireÌض¨µÄ´íÎó»Øµ÷£¨errback£©£¬Ò»¸ö¡°paths¡±Êý×éÅäÖã¬ÒÔ¼°Ò»¸öÈ«¾ÖµÄrequirejs.onErrorʼþ¡£

´«Èëerrback¼°requirejs.onErrorÖеÄerror objectͨ³£°üº¬Á½¸ö¶¨ÖƵÄÊôÐÔ£º

  • requireType: º¬ÓÐÀà±ðÐÅÏ¢µÄ×Ö´®Öµ£¬Èç¡°timeout¡±£¬¡°nodefine¡±£¬ ¡°scripterror¡±
  • requireModules: ³¬Ê±µÄÄ£¿éÃû/URLÊý×é¡£

Èç¹ûÄãµÃµ½ÁËrequireModules´í£¬¿ÉÄÜÒâζ×ÅÒÀÀµÓÚrequireModulesÊý×éÖеÄÄ£¿éµÄÆäËûÄ£¿é䶨Òå¡£

ÔÚIEÖⶻñ¼ÓÔØ´í § 4.6.1

Internet ExplorerÓÐһϵÁÐÎÊÌâµ¼Ö¼ì²âerrbacks/paths fallbacksÖеļÓÔØ´í ±È½ÏÀ§ÄÑ£º

  • IE 6-8ÖеÄscript.onerrorÎÞЧ¡£Ã»Óа취ÅжÏÊÇ·ñ¼ÓÔØÒ»¸ö½Å±¾»áµ¼ÖÂ404´í£»¸üÉõµØ£¬ÔÚ404ÖÐÒÀÈ»»á´¥·¢stateΪcompleteµÄonreadystatechangeʼþ¡£
  • IE 9+ÖÐscript.onerrorÓÐЧ£¬µ«ÓÐÒ»¸öbug£ºÔÚÖ´Ðнű¾Ö®ºóËü²¢²»´¥·¢script.onloadʼþ¾ä±ú¡£Òò´ËËüÎÞ·¨Ö§³ÖÄäÃûAMDÄ£¿éµÄ±ê×¼·½·¨¡£ËùÒÔscript.onreadystatechangeʼþÈÔ±»Ê¹Óᣵ«ÊÇ£¬stateΪcompleteµÄonreadystatechangeʼþ»áÔÚscript.onerrorº¯Êý´¥·¢Ö®Ç°´¥·¢¡£

Òò´ËIE»·¾³ÏºÜÄÑÁ½È«ÆäÃÀ£ºÄäÃûAMD£¨AMDÄ£¿é»úÖƵĺËÐÄÓÅÊÆ£©ºÍ¿É¿¿µÄ´íÎó¼ì²â¡£

µ«Èç¹ûÄãµÄÏîÄ¿ÀïʹÓÃÁËdefine()À´¶¨ÒåËùÓÐÄ£¿é£¬»òÕßΪÆäËû·Çdefine()µÄ½Å±¾Ê¹ÓÃshimÅäÖÃÖ¸¶¨Á˵¼³ö×Ö´®£¬ÔòÈç¹ûÄ㽫enforceDefineÅäÖÃÏîÉèΪtrue£¬loader¾Í¿ÉÒÔͨ¹ý¼ì²édefine()µ÷ÓûòshimÈ«¾Öµ¼³öÖµÀ´È·ÈϽű¾µÄ¼ÓÔØÎÞÎó¡£

Òò´ËÈç¹ûÄã´òËãÖ§³ÖInternet Explorer£¬²¶»ñ¼ÓÔØ´í£¬²¢Ê¹ÓÃÁËdefine()»òshim£¬Ôò¼ÇµÃ½«enforceDefineÉèÖÃΪtrue¡£²Î¼ûϽڵÄʾÀý¡£

×¢Òâ: Èç¹ûÄãÉèÖÃÁËenforceDefine: true£¬¶øÇÒÄãʹÓÃdata-main=""À´¼ÓÔØÄãµÄÖ÷JSÄ£¿é£¬Ôò¸ÃÖ÷JSÄ£¿é±ØÐëµ÷ÓÃdefine()¶ø²»ÊÇrequire()À´¼ÓÔØÆäËùÐèµÄ´úÂë¡£Ö÷JSÄ£¿éÈÔÈ»¿Éµ÷ÓÃrequire/requirejsÀ´ÉèÖÃconfigÖµ£¬µ«¶ÔÓÚÄ£¿é¼ÓÔرØÐëʹÓÃdefine()¡£

Èç¹ûÄãʹÓÃÁËalmond¶ø²»ÊÇrequire.jsÀ´buildÄãµÄ´úÂ룬¼ÇµÃÔÚbuildÅäÖÃÏîÖÐʹÓÃinsertRequireÀ´ÔÚÖ÷Ä£¿éÖвåÈëÒ»¸örequireµ÷Óà ¡ª¡ª Õâ¸údata-mainµÄ³õʼ»¯require()µ÷ÓÃÆðµ½ÏàͬµÄÄ¿µÄ¡£

require([]) errbacks § 4.6.2

µ±Óërequirejs.undef()һͬʹÓÃerrbackʱ£¬ÔÊÐíÄã¼ì²âÄ£¿éµÄÒ»¸ö¼ÓÔØ´í£¬È»ºóundefine¸ÃÄ£¿é£¬²¢ÖØÖÃÅäÖõ½ÁíÒ»¸öµØÖ·À´½øÐÐÖØÊÔ¡£

Ò»¸ö³£¼ûµÄÓ¦Óó¡¾°ÊÇÏÈÓÿâµÄÒ»¸öCDN°æ±¾£¬Èç¹ûÆä¼ÓÔسö´í£¬ÔòÇл»µ½±¾µØ°æ±¾£º

requirejs.config({
    enforceDefine: true,
    paths: {
        jquery: '/ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min'
    }
});

/Later
require(['jquery'], function ($) {
    /Do something with $ here
}, function (err) {
    /The errback, error callback
    /The error has a list of modules that failed
    var failedId = err.requireModules && err.requireModules[0];
    if (failedId === 'jquery') {
        /undef is function only on the global requirejs object.
        /Use it to clear internal knowledge of jQuery. Any modules
        /that were dependent on jQuery and in the middle of loading
        /will not be loaded yet, they will wait until a valid jQuery
        /does load.
        requirejs.undef(failedId);

        /Set the path to jQuery to local path
        requirejs.config({
            paths: {
                jquery: 'local/jquery'
            }
        });

        /Try again. Note that the above require callback
        /with the "Do something with $ here" comment will
        /be called if this new attempt to load jQuery succeeds.
        require(['jquery'], function () {});
    } else {
        /Some other error. Maybe show message to the user.
    }
});

ʹÓá°requirejs.undef()¡±£¬Èç¹ûÄãÅäÖõ½²»Í¬µÄλÖò¢ÖØг¢ÊÔ¼ÓÔØͬһģ¿é£¬Ôòloader»á½«ÒÀÀµÓÚ¸ÃÄ£¿éµÄÄÇЩģ¿é¼Ç¼ÏÂÀ´²¢ÔÚ¸ÃÄ£¿éÖØмÓÔسɹ¦ºóÈ¥¼ÓÔØËüÃÇ¡£

×¢Òâ: errback½öÊÊÓÃÓڻص÷·ç¸ñµÄrequireµ÷Ó㬶ø²»ÊÇdefine()µ÷Óá£define()½öÓÃÓÚÉùÃ÷Ä£¿é¡£

paths±¸´íÅäÖà § 4.6.3

ÉÏÊöģʽ£¨¼ì´í£¬undef()Ä£¿é£¬ÐÞ¸Äpaths£¬ÖؼÓÔØ£©ÊÇÒ»¸ö³£¼ûµÄÐèÇó£¬Òò´ËÓÐÒ»¸ö¿ì½ÝÉèÖ÷½Ê½¡£pathsÅäÖÃÏîÔÊÐíÊý×éÖµ£º

requirejs.config({
    /To get timely, correct error triggers in IE, force a define/shim exports check.
    enforceDefine: true,
    paths: {
        jquery: [
            '/ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
            /If the CDN location fails, load from this location
            'lib/jquery'
        ]
    }
});

/Later
require(['jquery'], function ($) {
});

ÉÏÊö´úÂëÏȳ¢ÊÔ¼ÓÔØCDN°æ±¾£¬Èç¹û³ö´í£¬ÔòÍ˻ص½±¾µØµÄlib/jquery.js¡£

×¢Òâ: paths±¸´í½öÔÚÄ£¿éID¾«È·Æ¥Åäʱ¹¤×÷¡£ÕⲻͬÓÚ³£¹æµÄpathsÅäÖ㬳£¹æÅäÖÿÉÆ¥ÅäÄ£¿éIDµÄÈÎÒâǰ׺²¿·Ö¡£±¸´íÖ÷ÒªÓÃÓڷdz£µÄ´íÎó»Ö¸´£¬¶ø²»Êdz£¹æµÄpath²éÕÒ½âÎö£¬ÒòΪÄÇÔÚä¯ÀÀÆ÷ÖÐÊǵÍЧµÄ¡£

818-872-3851 § 4.6.4

ΪÁ˲¶»ñÔÚ¾ÖÓòµÄerrbackÖÐ䲶»ñµÄÒì³££¬Äã¿ÉÒÔÖØÔØrequirejs.onError()£º

requirejs.onError = function (err) {
    console.log(err.requireType);
    if (err.requireType === 'timeout') {
        console.log('modules: ' + err.requireModules);
    }

    throw err;
};

¼ÓÔزå¼þ § 5

RequireJSÖ§³Ö¼ÓÔØÆ÷²å¼þ¡£Ê¹ÓÃËüÃÇÄܹ»¼ÓÔØһЩ¶ÔÓڽű¾Õý³£¹¤×÷ºÜÖØÒªµÄ·ÇJSÎļþ¡£RequireJSµÄwikiÓÐÒ»¸ö²å¼þµÄÁÐ±í¡£±¾½ÚÌÖÂÛһЩÓÉRequireJSÒ»²¢Î¬»¤µÄÌض¨²å¼þ£º

Ö¸¶¨Îı¾ÎļþÒÀÀµ§ 5.1

Èç¹û¶¼ÄÜÓÃHTML±êÇ©¶ø²»ÊÇ»ùÓڽű¾²Ù×÷DOMÀ´¹¹½¨HTML£¬ÊǺܲ»´íµÄ¡£µ«Ã»Óкõİ취ÔÚJavaScriptÎļþÖÐǶÈëHTML¡£ËùÄÜ×öµÄ½öÊÇÔÚjsÖÐʹÓÃHTML×Ö´®£¬µ«ÕâÒ»°ãºÜÄÑά»¤£¬ÌرðÊǶàÐÐHTMLµÄÇé¿öÏ¡£.

RequireJSÓиötext.js²å¼þ¿ÉÒÔ°ïÖú½â¾öÕâ¸öÎÊÌâ¡£Èç¹ûÒ»¸öÒÀÀµÊ¹ÓÃÁËtext!ǰ׺£¬Ëü¾Í»á±»×Ô¶¯¼ÓÔØ¡£²Î¼ûtext.jsµÄREADMEÎļþ¡£

Ò³Ãæ¼ÓÔØʼþ¼°DOM Ready§ 5.2

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 manipulate
    /DOM 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 current
    /document.
});

×¢Òâ: Èç¹ûdocumentÐèÒªÒ»¶Îʱ¼äÀ´¼ÓÔØ£¨Ò²ÐíÊÇÒòΪҳÃæ½Ï´ó£¬»ò¼ÓÔØÁ˽ϴóµÄjs½Å±¾×èÈûÁËDOM¼ÆË㣩£¬Ê¹ÓÃdomReady×÷Ϊloader plugin¿ÉÄܻᵼÖÂRequireJS¡°³¬Ê±¡±´í¡£Èç¹ûÕâÊǸöÎÊÌ⣬Ôò¿¼ÂÇÔö¼ÓwaitSecondsÅäÖÃÏîµÄÖµ£¬»òÔÚrequire()ʹÓÃdomReady()µ÷Ó㨽«Æäµ±×öÊÇÒ»¸öÄ£¿é£©¡£

(260) 241-6501§ 5.3

Ò»µ©ÄãµÄweb app´ïµ½Ò»¶¨µÄ¹æÄ£ºÍÁ÷Ðжȣ¬Ìṩ±¾µØ»¯µÄ½Ó¿ÚºÍÐÅÏ¢ÊÇÊ®·ÖÓÐÓõģ¬µ«ÊµÏÖÒ»¸öÀ©Õ¹Á¼ºÃµÄ±¾µØ»¯·½°¸ÓÖÊǺܷ±Ù˜µÄ¡£RequireJSÔÊÐíÄãÏȽöÅäÖÃÒ»¸öº¬Óб¾µØ»¯ÐÅÏ¢µÄ»ù±¾Ä£¿é£¬¶ø²»ÐèÒª½«ËùÓеı¾µØ»¯ÐÅÏ¢¶¼Ô¤ÏÈ´´½¨ÆðÀ´¡£ºóÃæ¿ÉÒÔ½«ÕâЩ±¾µØ»¯Ïà¹ØµÄ±ä»¯ÒÔÖµ¶ÔµÄÐÎʽÂýÂý¼ÓÈëµ½±¾µØ»¯ÎļþÖС£

i18n.js²å¼þÌṩi18n bundleÖ§³Ö¡£ÔÚÄ£¿é»òÒÀÀµÊ¹ÓÃÁËi18n!ǰ׺µÄÐÎʽ£¨Ïê¼ûÏ£©Ê±Ëü»á×Ô¶¯¼ÓÔØ¡£ÏÂÔظòå¼þ²¢½«Æä·ÅÖÃÓÚÄãappÖ÷JSÎļþµÄͬĿ¼Ï¡£

½«Ò»¸öÎļþ·ÅÖÃÓÚÒ»¸öÃû½Ð¡°nls¡±µÄĿ¼ÄÚÀ´¶¨ÒåÒ»¸öbundle¡ª¡ªi18n²å¼þµ±¿´µ½Ò»¸öÄ£¿éÃû×Öº¬ÓС°nls¡±Ê±»áÈÏΪËüÊÇÒ»¸öi18n bundle¡£Ãû³ÆÖеġ°nls¡±±ê¼Ç¸æËßi18n²å¼þ±¾µØ»¯Ä¿Â¼£¨ËüÃÇÓ¦µ±ÊÇnlsĿ¼µÄÖ±½Ó×ÓĿ¼£©µÄ²éÕÒλÖá£Èç¹ûÄãÏëҪΪÄãµÄ¡°my¡±Ä£¿é¼¯ÌṩÑÕÉ«ÃûµÄbundle£¬Ó¦ÏñÏÂÃæÕâÑù´´½¨Ä¿Â¼½á¹¹£º

  • my/nls/colors.js

¸ÃÎļþµÄÄÚÈÝÓ¦¸ÃÊÇ£º

/my/nls/colors.js contents:
define({
    "root": {
        "red": "red",
        "blue": "blue",
        "green": "green"
    }
});

ÒÔÒ»¸öº¬ÓС°root¡±ÊôÐÔµÄobjectÖ±½ÓÁ¿À´¶¨Òå¸ÃÄ£¿é¡£Õâ¾ÍÊÇΪÈÕºóÆôÓñ¾µØ»¯ËùÐèµÄÈ«²¿¹¤×÷¡£Äã¿ÉÒÔÔÚÁíÒ»¸öÄ£¿éÖУ¬Èçmy/lamps.jsÖÐʹÓÃÉÏÊöÄ£¿é£º

/Contents of my/lamps.js
define(["i18n!my/nls/colors"], function(colors) {
    return {
        testMessage: "The name for red in this locale is: " + colors.red
    }
});

my/lampsÄ£¿é¾ß±¸Ò»¸ö¡°testMessage¡±ÊôÐÔ£¬ËüʹÓÃÁËcolors.redÀ´ÏÔʾºìÉ«µÄ±¾µØ»¯Öµ¡£

Èպ󣬵±ÄãÏëҪΪÎļþÔÙÔö¼ÓÒ»¸öÌض¨µÄ·­Ò룬Èçfr-fr£¬¿ÉÒԸıämy/nls/colorsÄÚÈÝÈçÏ£º

/Contents of my/nls/colors.js
define({
    "root": {
        "red": "red",
        "blue": "blue",
        "green": "green"
    },
    "fr-fr": true
});

È»ºóÔÙ¶¨ÒåÒ»¸ömy/nls/fr-fr/colors.jsÎļþ£¬º¬ÓÐÈçÏÂÄÚÈÝ£º

/Contents of my/nls/fr-fr/colors.js
define({
    "red": "rouge",
    "blue": "bleu",
    "green": "vert"
});

RequireJS»áʹÓÃä¯ÀÀÆ÷µÄnavigator.language»ònavigator.userLanguageÊôÐÔÀ´Åж¨my/nls/colorsµÄ±¾µØ»¯Öµ£¬Òò´ËÄãµÄapp²»ÐèÒª¸ü¸Ä¡£Èç¹ûÄãÏëÖ¸¶¨Ò»¸ö±¾µØ»¯·½Ê½£¬Äã¿ÉʹÓÃÄ£¿éÅäÖý«¸Ã·½Ê½´«µÝ¸ø²å¼þ£º

requirejs.config({
    config: {
        /Set the config for the i18n
        /module ID
        i18n: {
            locale: 'fr-fr'
        }
    }
});

×¢Òâ RequireJS×ÜÊÇʹÓÃСд°æ±¾µÄlocaleÖµÀ´±ÜÃâ´óСдÎÊÌ⣬Òò´Ë´ÅÅÌÉÏi18nµÄËùÓÐĿ¼ºÍÎļþ¶¼Ó¦Ê¹ÓÃСдµÄ±¾µØ»¯Öµ¡£ RequireJSÓÐ×ã¹»ÖÇÄÜȥѡȡºÏÊʵı¾µØ»¯bundle£¬Ê¹Æ価Á¿½Ó½ümy/nls/colorsÌṩµÄÄÇÒ»¸ö¡£ÀýÈ磬Èç¹ûlocaleֵʱ¡°en-us¡±£¬Ôò»áʹÓá°root¡± bundle¡£Èç¹ûlocaleÖµÊÇ¡°fr-fr-paris¡±£¬Ôò»áʹÓá°fr-fr¡± bundle

RequireJSÒ²»á½«bundleºÏÀí×éºÏ£¬ÀýÈ磬Èôfrench bundleÈç϶¨Ò壨ºöÂÔredµÄÖµ£©£º

/Contents of my/nls/fr-fr/colors.js
define({
    "blue": "bleu",
    "green": "vert"
});

Ôò»áÓ¦Óá°root¡±ÏµÄredÖµ¡£ËùÓеÄlocale×é¼þÊÇÈç´Ë¡£Èç¹ûÈçϵÄËùÓÐbundle¶¼ÒѶ¨Ò壬ÔòRequireJS»á°´ÕÕÈçϵÄÓÅÏȼ¶Ë³Ðò£¨×µÄ×îÓÅÏÈ£©Ó¦ÓÃÖµ£º

  • my/nls/fr-fr-paris/colors.js
  • my/nls/fr-fr/colors.js
  • my/nls/fr/colors.js
  • my/nls/colors.js

Èç¹ûÄã²»ÔÚÄ£¿éµÄ¶¥²ãÖаüº¬root bundle£¬Äã¿ÉÏñÒ»¸ö³£¹æµÄlocale bundleÄÇÑù¶¨ÒåËü¡£ÕâÖÖÇéÐÎ϶¥²ãÄ£¿éÓ¦ÈçÏ£º

/my/nls/colors.js contents:
define({
    "root": true,
    "fr-fr": true,
    "fr-fr-paris": true
});

root bundleÓ¦¿´ÆðÀ´ÈçÏ£º

/Contents of my/nls/root/colors.js
define({
    "red": "red",
    "blue": "blue",
    "green": "green"
});