前端模块化方式个人汇总（amd, cmd, commonjs, es6）

模块化的规范准则：AMD（预加载），CMD（懒加载）

 

常用模块化有四种：CommonJS, ES6 , AMD，SEA

 

Node模块化，包含CommonJS，AMD，CMD（懒加载（sea.js），其他均为预加载）

ES6全称ECMAScript 6，也叫ES2015.

CommonJS原名ServerJs

CommonJS是ES6出现前的标准，ES6是后边的标准

 

1) 案例：

CommonJS：

exports.a=12;

require('./a.js');

 

AMD：

<script type="text/javascript" src="../js/require.js?v=<%=version%>" ></script>

require.config({ baseUrl:'js/', paths:{ 'jquery':'http://xxxx.xxx.com/js/jquery.min', 'index':'index' } });

define

ES6模块化： export function diag(x, y) { return sqrt(square(x) + square(y)); } import { diag } from './lib'; console.log(diag(4, 3)); // 5

 

2）优势区别:

语法区分：

module.exports为node模块化，

export const 为es6

 

本质区分：

commonjs模块是拷贝，es6模块是引用。

 

区别：

1.ES6只能新增值，无法重新赋值就会报错

2.CommonJS 输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，ES6静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变。

3.CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

4.CommonJS 加载的是整个模块，即将所有的接口全部加载进来，ES6 可以单独加载其中的某个接口（方法），

5.CommonJS this 指向当前模块，ES6 this 指向undefined