详解RequireJs官方使用教程

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

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

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.
});

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

<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 ) {
});

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

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

//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/cart.js
my/inventory.js
my/shirt.js

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

define(function(require, exports, module) {
    var a = require('a'),
      b = require('b');
    //Return the module value
    return function () {};
  }
);

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

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

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

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

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

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

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

//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 useany of a's properties until after b returns a value.
  exports.foo = function () {
    return a.bar();
  };
});

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

<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>

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'
});

requirejs.config({
  //Remember: only use shim config for non-AMD scripts,scripts that do not already call define().
  //The shimconfig will not work correctly if used on AMD scripts,
  //in particular, the exports and init config will notbe triggered, and the deps config will be confusingfor those cases.
  shim: {
    'backbone': {
      //These script dependencies should be loaded before loadingbackbone.js|译|在加载backbone.js之前应先加载它的依赖函数underscore.js和jquery.js
      deps: ['underscore', 'jquery'],
      //Once loaded, use the global 'Backbone' as themodule value.|译|加载完毕后该模块使用的引用名
      exports: 'Backbone'
    },
    'underscore': {
      exports: '_'
    },
    'foo': {
      deps: ['bar'],
      exports: 'Foo',
      init: function (bar) {
        //Using a function allows you to call noConflict forlibraries 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 valueinstead 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 sectionbelow for an approach for jQuery.
        return this.Foo.noConflict();
      }
    }
  }
});
//Then, later in a separate file, call it 'MyModel.js', a module is defined,specifting '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.config({
  shim: {
    'jquery.colorize': ['jquery'],
    'jquery.scroll': ['jquery'],
    'backbone.layoutmanager': ['backbone']
  }
});

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'
    }
  }
});

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

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

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

requirejs.config({
  config: {
    'bar': {
      size: 'large'
    },
    'baz': {
      color: 'blue'
    }
  }
});
//bar.js, which uses simplified CJS wrapping:
//http://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':
//https://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;
});

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

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

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

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

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

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

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

<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>

requirejs.config({
  enforceDefine: true,
  paths: {
    jquery: 'http://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 jQuerydoes 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.config({
  //To get timely, correct error triggers in IE, force a define/shim exports check.
  enforceDefine: true,
  paths: {
    jquery: [
      'http://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 ($) {
});

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

require(['domReady'], function (domReady) {
 domReady(function () {
  //This function is called once the DOM is ready.
  //It will be safe to query the DOM and manipulateDOM nodes in this function.
 });
}); 

require(['domReady!'], function (doc) {
  //This function is called once the DOM is ready,
  //notice the value for 'domReady!' is the currentdocument.
});