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打包造成浏览器能够解析的语言