前端模块化规范|前端模块化规范,CommonJS,AMD,CMD,ES6 module AMD|CMD|ES6module|CommonJS

前言 【前端模块化规范|前端模块化规范,CommonJS,AMD,CMD,ES6 module】?随着前端的发展，前端代码日益复杂庞大，此时在JS方面就会考虑使用模块化规范去管理。下面主要介绍开发中流行的几种前端模块化规范。
一、什么是模块化 1.1、什么是模块?

将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

1.2、模块化的好处

避免命名冲突(减少命名空间污染)
更好的分离, 按需加载
更高复用性
高可维护性

二、模块规范 2.1、CommonJS 2.1.1、简述 ?Node是CommonJS规范的主要实践者，每个文件就是一个模块，有自己的作用域，并且对其他文件都是不可见的，是私有的。
2.1.2、特点

所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
同步的方式加载模块

2.1.3、基本变量 ?它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

暴露模块：module.exports=value或者exports.xxx=value。
引入模块：require(xxx)

let x=1; let addx=function(value){ return value+1; } module.exports.expx=x; module.exports.expaddx=addx;

上面代码通过module.exports输出变量x和函数addX。

let demox=require("./demo.js"); console.log(demox.expx); //1

?用require命令加载模块文件。
?CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。
?当然导出方法也可以这样写

module.exports = { expx:x, expaddx:addx }

2.2、AMD (Asynchronous Module Definition） 2.2.1、简述 ?AMD主要提供了异步加载的功能，不过随着打包工具和Babel在前端工程化的世界里大放异彩，其也在逐步退出历史舞台。RequireJS是其主要践行者
2.2.2、基本语法

暴露模块：

//定义没有依赖的模块 define(function(){ return 模块 })

//定义有依赖的模块 define(['module1','module2'],function(m1,m2){ return 模块 })

引入模块

require(['moudle1','moudle2'],function(m1,m2){ //使用m1/m2 })

2.2.3、实例

//hello.js define(function() { console.log('hello'); return { getMessage: function() { return 'hello'; } }; });

//worlld.js define(function() { console.log('world'); });

//index.js define(['./hello.js', './worlld.js'], function(hello) { return { sayHello: function() { console.log(hello.getMessage()); } }; }); //hello //world

2.3、CMD(Common Module Definition) 2.3.1简述 ?CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。Sea.js是其实践者。
2.3.2、基本语法

暴露模块：

//定义没有依赖的模块 define(function(require, exports, module){ exports.xxx = value module.exports = value })

//定义有依赖的模块 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 m4 = require('./module4') m1.show() m4.show() })

2.3.3、实例

/hello.js define(function(require, exports) { console.log('hello'); exports.getMessage = function() { return 'hello'; }; });

//worlld.js define(function(require, exports) { console.log('worlld'); exports.getMessage = function() { return 'world'; }; });

//index.js define(function(require) { var message; if (true) { message = require('./hello').getMessage(); } else { message = require('./worlld').getMessage(); } }); //hello

AMD和CMD的区别：

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
解释：
(1)提前执行：参考RequireJS的异步模块加载迎合了浏览器端JS程序员固有的异步思维
(2)延迟执行：加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块
CMD 推崇依赖就近，AMD 推崇依赖前置
解释：
(1)依赖就近：可以把依赖写进你的代码中的任意一行
(2)依赖前置：解析和执行当前模块之前，模块作者必须指明当前模块所依赖的模块

2.4、ES6 module ?ES6提供了import和export命令，分别对应模块的导入和导出功能。
2.4.1、实例

//demo.js let name="agam"; var sayName=name=>console.log(name); export {name ,sayName};

//index.js import { name } from './demo'; sayName("aga"); console.log(name); //aga //agam

?如上例所示，使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

export default name; export default sayName;

import names from './demo.js';

?模块默认输出, 其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。
ES6模块与CommonJS模块的差异：
① CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
② CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
三、模块工具介绍 3.1、Webpack
总结