前端模块化

  对代码进行模块化是项目开发中重要的技术类型，它可以对复杂的功能进行解耦，可以灵活复用和关联各模块功能。随着这些年前端的发展，模块化也成了前端开发必不可少的部分。

  目前，前端比较流行的几种定义模块化的规范分别是: AMD 、CommonJS、ES6 module ,它们都被webpack支持。

  AMD规范

  AMD的全称为 Asynchronous Module Definition,翻译成中文叫异步模块定义。AMD的规范描述很短也很简单，但它可以完整描述模块的定义、依赖关系、引用关系以及加载机制。最值得庆幸的是以AMD定义JS模块通过RequireJS能直接运行于浏览器。下面我们来看一下RequireJs对模块的定义和引用语法。

  定义一个模块语法规则如下：

define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
    }
});

  define中第一个参数代表当前要定义的模块标识，第二个参数是一个数组，它内部的元素表示当前模块依赖的其他模块标识。其中require和exports是其内部自带的模块表示，require用于引入其他模块，exports用于将当前模块导出。其他元素名支持自定义的模块标识。第三个参数是一个函数，其参数分别表示第二个参数中引入的依赖模块。为了方便其他模块的引入，所有define函数都要有返回值，引入exports模块，使用exports将当前模块暴露出去。

  以上语法只是方便大家理解AMD规范，简单的做下师范，如果你要系统的学习requireJS的使用方法，可以访问requireJS官网查看API https://github.com/amdjs/amdjs-api/wiki/require

  值得一提的是，与AMD相对应的还有CMD规范，它是一种同步模块定义。也有以这种规范思想为前提的模块化工具seajs 。在使用语法上有很多相似之处。某种意义上requireJs 和seaJs是真正意义上的前端模块化，因为它们能直接运行于浏览器。

  CommonJS规范

  CommonJS规范是NodeJS的模块化规范，即JavaScript在服务端的规范。 根据CommonJs规范，一个单独的文件就是一个模块。可以直接在其他文件中将其引入。当然也可以通过exports将本文件的内容暴露出去。一般我们会选择在文件中返回一个函数或对象，方便在其他模块中使用。CommonJS构建的这套导出和导入机制使得用户完全不必考虑变量污染，配合npm包的使用，极大提高了开发效率。

var a = require("./aaa");

var b = require("./bbb");

module.exports = {

   result: a + b 

}

  CommonJS规范语法并不能直接运行于浏览器，它需要browserfy等Node.js打包工具打包后才能运行于浏览器。如果你在项目中有使用npm安装其他依赖包，可以在文件中直接使用require(“模块名”) 引入自己安装的模块，这是因为CommonJS规范引入模块时会首先在node_modules 文件夹下查找模块的入口文件。

  ES6 module

  ES6 module是JavaScript自己推出的前端模块化语法。当然，因为刚开始推出，所以现在似乎还没有浏览器能直接支持这个语法，仍然需要webpack等工具做兼容处理。

 import a form "./aaa";

 import b form "./bbb";

 var c = a + b;

 export {c}

附：AMD规范 https://github.com/amdjs/amdjs-api/wiki/AMD

CommonJS规范 http://javascript.ruanyifeng.com/nodejs/module.html