es6的模塊化--AMD/CMD/commonJS/ES6

/**

* AMC

* CMD

* CommonJS

* ES6模塊：總結的

*/

/**

* AMD的應用的

* script---data-main="vender/main" src="vender/require.js"

*/

// main.js,require.js爲全局添加了define函數，

require([ './add', './square'], function ( addModule, squareModule) {

addModule. add( 1, 1);

squareModule. square( 3);

})

define( function () {

var add = function ( x, y) {

return x + y;

}

return {

add: add

};

})

/**

* sea.js--CMD

* seajs.use("./vender/main");

*/

// main.js的引用

define( function ( require, exports, module) {

var addModule = require( './add');

console. log( addModule. add( 1, 1));

});

// add的

define( function ( require, exports, module) {

var add = function ( x, y) {

return x + y;

};

module. exports = {

add: add

}

});

/**

* AMD 與 CMD 的區別

* 1,CMD推崇依賴就近，AMD推崇依賴前置

* 2，AMD是提早執行，CMD是延遲執行

* 3，AMD是將須要將模塊加載完成再執行代碼，而CMD是在require的時候加載模塊，加載完成再去執行

*/

/**

* commonJS,AMD和CMD是採用瀏覽器端的，而服務器端node，採用的是CommonJS規範

* commonJS模塊加載模塊是同步，AMD加載模塊不是同步的

* */

// commonjs

var add = function ( x, y) {

return x + y;

};

module. exports. add = add;

// 引入模塊的方式

var add = require( './add.js');

console. log( add. add( 1, 1));

/**

* es6的模塊，commonJS對比

* 1，CommonJS是值拷貝，es6是輸出的值引用

* 2，CommonJS是模塊運行時加載，ES6是編譯時輸出接口

*/

// CommonJS是值拷貝，當內部的值發生變化，模塊內部變化就不會影響到這個值

// es6是是值引用，當內部的值發生變化的時候，模塊內部變化就會影響這個值

// ES6

var firstName = 'Michael';

var lastName = 'Jackson';

var year = 1958;

export { firstName, lastName, year };

// es6引用

import { firstName, lastName, year } from './profile';

// ES6的引用----Babel進行編譯--commonJS----webpack打包造成瀏覽器能夠解析的語言