§ 4. 高级用法
§ 4.1. 从包加载模块
RequireJS支持从部分CommonJS包目录加载模块
可加载的commonjs包的特征
- A package can be associated with a module name/prefix.
- The package config can specify the following properties for a specific package:
- name: The name of the package (used for the module name/prefix mapping)
- location: The location on disk. Locations are relative to the baseUrl configuration value, unless they contain a protocol or start with a front slash (/).
- main: The name of the module inside the package that should be used when someone does a require for "packageName". The default value is "main", so only specify it if it differs from the default. The value is relative to the package folder.
英文不难,具体的还是直接看吧。。。下面简单列一下
- project-directory/
- project.html
- scripts/
- cart/
- main.js
- store/
- main.js
- util.js
- main.js
- require.js
- cart/
<script data-main="scripts/main" src="scripts/require.js"></script>
//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. });
默认加载main.js。
没有main.js时:
- project-directory/
- project.html
- scripts/
- cart/
- main.js
- store/
- store.js
- util.js
- main.js
- package.json
- require.js
- cart/
require.config({ packages: [ "cart", { name: "store", main: "store" } ] });
http://www.requirejs.org/docs/api.html#packages
§ 4.2. 多版本支持
<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>
http://www.requirejs.org/docs/api.html#multiversion
§ 4.3. 页面加载后加载模块
和多版本的例子相同
§ 4.4. Web Worker Support
§ 4.5. Rhino Support
§ 4.6. 错误处理
http://www.requirejs.org/docs/api.html#errors
RequireJS has a few tools to deal with them: require-specific errbacks, a "paths" array config, and a global requirejs.onError.
The error object passed to errbacks and the global requirejs.onError function will usually contain two custom properties:
requireType:A string value with a general classification, like "timeout", "nodefine", "scripterror".
requireModules: an array of module names/URLs that timed out.
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 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.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.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; };
§ 5. 加载插件
http://www.requirejs.org/docs/api.html#plugins