/** * 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打包形成瀏覽器可以解析的語言