JavaSript模块化
AMD 与 RequireJS
AMD
define( id?, dependencies?, factory );
-
define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
-
export.verb = function(){
-
return beta.verb();
-
// or:
-
return require("beta").verb();
-
}
- });
-
define(["alpha"], function( alpha ){
-
return {
-
verb : function(){
-
return alpha.verb() + 1 ;
-
}
-
}
- });
-
define( {
-
add : function( x, y ){
-
return x + y ;
-
}
- } );
-
define( function( require, exports, module){
-
var a = require('a'),
-
b = require('b');
-
-
exports.action = function(){};
- } );
require();
局部 与 全局 的require
-
define( ['require'], function( require ){
-
// ...
-
} );
-
or:
-
define( function( require, exports, module ){
-
// ...
- } );
-
require(String)
-
define( function( require ){
-
var a = require('a'); //
加载模块a
-
} );
-
-
require(Array, Function)
-
define( function( require ){
-
require( ['a', 'b'], function( a,b ){ //
加载模块a b 使用
-
// 依赖 a b 模块的运行代码
-
} );
-
} );
-
-
require.toUrl( Url )
-
define( function( require ){
-
var temp = require.toUrl('./temp/a.html'); //
加载页面
- } );
RequireJS
- <script data-main='scripts/main' src='scripts/require.js'></script>
-
define({
-
method1: function(){},
-
method2: function(){}
- });
-
define(function(){
-
return{
-
method1: function(){},
-
method2: function(){}
-
}
- });
-
define([ 'module1', 'module2' ], function(m1, m2){
-
...
- });
-
define( function( require ){
-
var m1 = require( 'module1' ),
-
m2 = require( 'module2' );
-
...
- });
-
require( ['foo', 'bar'], function( foo, bar ){
-
foo.func();
-
bar.func();
- } );
-
define( function( require ){
-
var m1 = require( 'module1' ),
-
m2 = require( 'module2' );
-
...
- });
CMD 与 seaJS
CMD
- define({ "foo": "bar" });
- define('this is {{data}}.');
-
define( function(require, exports, module) {
-
// 模块代码
- });
-
define( 'module', ['module1', 'module2'], function( require, exports, module ){
-
// 模块代码
- } );
-
define(function( require, exports ){
-
var a = require('./a');
-
a.doSomething();
- });
-
define( function(require, exports, module) {
-
require.async('.a', function(a){
-
a.doSomething();
-
});
- });
-
define(function( require, exports ){
-
exports.foo = 'bar'; //
向外提供的属性
-
exports.do = function(){}; //
向外提供的方法
- });
-
define(function( require, exports ){
-
return{
-
foo : 'bar', //
向外提供的属性
-
do : function(){} //
向外提供的方法
-
}
- });
-
define({
-
foo : 'bar', //
向外提供的属性
-
do : function(){} //
向外提供的方法
- });
-
define(function( require, exports ){
-
exports = {
-
foo : 'bar', //
向外提供的属性
-
do : function(){} //
向外提供的方法
-
}
- });
-
define(function( require, exports, module ){
-
module.exports = {
-
foo : 'bar', //
向外提供的属性
-
do : function(){} //
向外提供的方法
-
}
- });
seaJS
-
// 加载一个模块
-
seajs.use('./a');
-
// 加载模块,加载完成时执行回调
-
seajs.use('./a',function(a){
-
a.doSomething();
-
});
-
// 加载多个模块执行回调
-
seajs.use(['./a','./b'],function(a , b){
-
a.doSomething();
-
b.doSomething();
- });
AMD 与 CMD 区别到底在哪里?
-
// CMD
-
define(function(require, exports, module) {
-
var a = require('./a')
-
a.doSomething()
-
// 此处略去 100 行
-
var b = require('./b') //
依赖可以就近书写
-
b.doSomething()
-
// ...
-
})
-
-
// AMD 默认推荐的是
-
define(['./a', './b'], function(a, b) { //
依赖必须一开始就写好
-
a.doSomething()
-
// 此处略去 100 行
-
b.doSomething()
-
// ...
- })
总结
amdjs 的 require 接口文档 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
RequireJS和AMD规范 http://javascript.ruanyifeng.com/tool/requirejs.html
知乎 AMD 和 CMD 的区别有哪些? http://www.zhihu.com/question/20351507
JavaScript模块化开发 - AMD规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd
模块化设计 http://baike.baidu.com/view/189730.htm
模块化 http://baike.baidu.com/view/182267.htm