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