js几种模块化CommonJS、AMD、CMD，ES6模块化整理

本文是基于

https://blog.csdn.net/howgod/article/details/87466148

该链接，自己整理巩固记忆的一篇文章，原文解释描写十分的详细贴切易懂。

 

一、CommonJS

概述：Node应用模块组成，每个文件就是一个模块，服务器端模块加载运行时同步的，浏览器端模块需要提前编译打包处理。

特点：1.所有代码都运行在模块作用域，不污染全局

           2.模块可以多次加载，第一次运行后都是缓存，再运行必须清除缓存

           3.加载顺序按照其在代码中出现的顺序

语法：暴露 module.exports=value;或exports.xxx=value;

           引入 require(xxxx);

加载机制：值拷贝，一旦输出一个值，模块内部的变化就不影响该值。

服务器端实现：1装nodeJS——2.npm init 创建项目结构——3.下载第三方模块——4.定义模块代码——5.在app.js文件中引入——6.通过node运行app.js：node app.js 

浏览器端实现：借助Browserify——1.创建项目结构——2.下载browserify：npm install browserify——3.定义模块代码——4.打包处理js——5.页面使用<srcipt>引入

 

二、ES6模块化

ES6的设计思想尽量静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS与AMD都只能在运行时确定这些东西。

语法

export 命令用于规定模块的对外接口

import 命令用于输入其他模块提供的功能

export default 为模块指定默认输出，这样important时就可以指定任意名字代替该模块

与CommonJS的差异

1.CommonJS输出是值拷贝，ES6是值引用

2.CommonJS是运行时加载，ES6是编译时输出接口

（所以我自己的项目当中，数据库连接部分（服务器端编程）用的是CommonJS，每次改动需要重新运行相关文件才能更新，而页面部分用的是ES6，修改的时候可以不需要重新运行，就能够自主更新到最新的状态）

 

三、AMD

定义模块：1.无依赖其他模块 define（function（）{return 模块}）

                   2.依赖其他模块 require(['module1','module2',…],function(m1,m2…){return 模块})

引入模块：require(['module1','module2',…],function(m1,m2,…){//使用模块})

使用RequireJS

RequireJS是一个工具库，用于客户端模块管理

1.下载Require.js并引入

2.创建羡慕结构

3.定义模块代码

4.页面引入require.js模块

四、CMD

该规范专门用于浏览器端，异步加载，整合了CommonJS，和AMD规范的特点

基本语法 / 定义暴露模块

1.没有依赖的

define(function(require,exports,module){exports.xxx=value;module.exports=value})

2.有依赖的

define(function(require,exports,module){

     //同步

     var module2=require('./module2');

     //异步

    require.async('./module3',function(m3){})

   //暴露

    exports.xxx=value

})

引入使用模块

define(function(require){

    var m1=require('./module1');

   var m2=require('./module2');

m1.show();

m2.show();

})

使用流程

1下载sea.js并引入

2.创建项目结构

3.定义sea.js模块代码

4.在index.html中引入

AMD与CMD区别

AMD:是RequireJS在推广过程中对模块定义提出的概念

CMD:是SeaJS在推广过程中对模块定义提出的概念

二者区别

1定位差异：RequireJS想成为浏览器端的模块加载器，同时想成为Rhino/Node端的模块加载器

                    SeaJS专注于WEB浏览器端

2遵循规范不同：R遵循AMD(异步模块定义)，S遵循通用模块定义

3.CMD依赖就近，AMD推崇依赖前置

4.推广理念差异，R尝试让第三方库修改自身来支持R，S则不强求

5.开发调试略有差异，S注重代码开发的调试，有相关的调试插件，R无明显支持

6.插件机制不同，R猜采取的是源码中预留接口的形式，插件类型单一，S采取通用实践机制

 

总结

CommonJS规范主要用于服务器端编程，加载是同步的，这并不适合浏览器环境，因为同步意味着阻塞加载，因此有了AMD，CMD的解决方案。

AMD规范在浏览器中异步加载模块，AMD规范开发成本高，代码的阅读和书写较困难

CMD与AMD很相似，依赖就近延迟执行，可以很容易在node中运行

ES6完全可以取代CommonJS与AMD规范成为浏览器和服务端通用的模块解决方案。