AMD 、CMD 、CommonJS 、es6的模块区别

1、AMD的应用
例子:

  // main.js,require.js为全局添加define函数
    require(['./afun', './square'], function (addModule, squareModule) {
        addModule.afun(1, 1);
        squareModule.square(3);
    })
define(function () {
    var afun= function (x, y) {
        return x + y;
    }
    return {
        afun: afun
    };
})
2、 sea.js--CMD
 seajs.use("./vender/main");

例子:

 // main.js的引用
    define(function (require, exports, module) {
        var addModule = require('./afun');
        console.log(addModule.add(1, 1));
    });
// add的
define(function (require, exports, module) {
    var afun= function (x, y) {
        return x + y;
    };
    module.exports = {
        afun: afun
    }
});
3、AMD 与 CMD 的区别
 	1,CMD推崇依赖就近,AMD推崇依赖前置
  	2,AMD是提前执行,CMD是延迟执行
 	3,AMD是将需要将模块加载完成再执行代码,CMD是在requir时加载模块,完成后再执行

4、AMD和CMD是采用浏览器端的,而服务器端node,采用的是CommonJS规范

commonJS模块加载模块是同步,AMD加载模块不是同步的

例如 commonjs
var afun= function (x, y) {
    return x + y;
};
module.exports.afun= afun;
// 引入模块的方式
var afun = require('./afun.js');
console.log(afun.afun(1, 1));
5、es6的模块,commonJS对比
	1,CommonJS是值拷贝(当内部的值发生变化,模块内部变化就不会影响到这个值),es6是输出的值引用(当内部的值发生变化的时候,模块内部变化就会影响这个值)
 	2,CommonJS是模块运行时加载,ES6是编译时输出接口
 例子ES6
var firstName = 'a';
var lastName = 'b';
var year = 1988;

export { firstName, lastName, year };
// es6引用:ES6的引用----Babel进行编译--commonJS----webpack打包形成es5
import { firstName, lastName, year } from './profile';
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页