项目模块化的解决方案：commonJs规范,AMD规范,ES6对比

  今年应届毕业，从事前端开发，再这里记录工作中遇到的问题和解决方法，希望能给自己加强记忆，同时也希望给向我一样学习中的小伙伴带来一点帮助。

最近项目组组长让我对现有的项目进行优化，模块化，搜索了各种资料以后，发现目前项目模块化哟了那个的比较多的解决方案是commonJs规范,AMD规范,ES6，我们来总结一下这三个方案的特点：

1.commonJs:

之前项目中用的方式就是common Js，采用的是同步加载机制，例如：

      在a.js中有一个变量config，那么我们在a.js中写上下面的代码：module.exports = config;（解释一下：

在nodejs中，每一个js文件都被看成是一个模块，所以，nodejs会为每一个js文件生成一个module对象，这个module对象会有一个exports属性，并且这个exports属性是一个空对象，即module={    exports:{}  }，我们这行代码，是给了module对象中export属性赋值的过程）这样即可将config这个变量作为一个公共的输出，在b.js中如果我们想要用a.js中config这个变量，我们可以在b.js中用下面的代码来引用变config:var config=require('路径/a.js').config.

2.AMD规范

AMD规范中定义模块：define(a,b,c),a参数是依赖的其他模块，b参数是加载了以来的模块后执行的回调函数，同时也是完成具体功能的函数，c参数是执行发生错误时执行的函数，此参数可以省略。

define(['module1','module2'],function(m1,m2){

…… return { //返回接口 }

})

3.ES6语句：

es6中正式发布了内置的模块化工具，

导出方式：

//导出变量

export var color = "red";

export let name = "cz";

export const age = 25;

 

//导出函数

export function add(num1,num2){

return num1+num2;

}

 

//导出类

export class Rectangle {

constructor(length, width) {

this.length = length;

this.width = width;

}

}

 

function multiply(num1, num2) {

return num1 * num2;

}

 

//导出对象，即导出引用

export {multiply}

引入方式

在模块中使用import关键字来导入其他模块。 
import 语句有两个部分，一是需要导入的标识符，二是需导入的标识符的来源模块。此处是导入语句的基本形式：

import { identifier1,identifier2 } from "./example.js"