1. 模块化的发展

随着前端的发展，web技术日趋成熟，js功能越来越多，代码量也越来越大。之前一个项目通常各个页面公用一个js，但是js逐渐拆分，项目中引入的js越来越多. 在js模块化诞生之前，开发者面临很多问题:

全局变量污染：各个文件的变量都是挂载到window对象上，污染全局变量。
变量重名：不同文件中的变量如果重名，后面的会覆盖前面的，造成程序运行错误。
文件依赖顺序：多个文件之间存在依赖关系，需要保证一定加载顺序问题严重。

模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。

模块化其实是一种规范，一种约束，这种约束会大大提升开发效率。将每个js文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。按照js模块化的设想，一个个模块按照其依赖关系组合，最终插入到主程序中。

我们梳理一下模块化的发展情况：
无模块化 > CommonJS规范 > AMD规范 > CMD规范 > ES6模块化

CommonJS规范(Node中模块化规范)的诞生给js模块化发展有了重要的启发，基于Node原生api在服务端可以实现模块同步加载，但是仅仅局限于服务端，客户端如果同步加载依赖的话时间消耗非常大，所以需要一个在客户端上基于Commonjs但是对于加载模块做改进的方案，于是AMD规范诞生了。

AMD规范, 异步模块定义, 允许指定回调函数，AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到所有依赖加载完成之后（前置依赖），这个回调函数才会运行。

CMD规范，同样是受到Commonjs的启发，国内（阿里）诞生了一个CMD（Common Module Definition）规范。该规范借鉴了Commonjs的规范与AMD规范，在两者基础上做了改进。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

到了2015年，ES6规范中，终于将模块化纳入JavaScript标准，从此js模块化被官方扶正，也是未来js的标准. 在ES6中，我们可以使用 import 关键字引入模块，通过 exprot 关键字导出模块，功能较之于前几个方案更为强大，也是我们所推崇的，但是由于ES6目前无法在浏览器中执行，所以，我们只能通过babel将不被支持的import编译为当前受到广泛支持的 require。

2. export

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

导出变量或者常量

export const name = 'hello'
export let addr = 'BeiJing City'
export var list = [1, 2, 3]// 或者
const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2, 3]
export {name,addr,list
}

导出函数

export function say(content) {console.log(content)
}
export function run() {console.log('run')
}// 或者
const say = (content) => {console.log(content)
}
let run = () => {console.log('run')
}
export {say,run
}

导出Object对象

export ({code: 0,message: 'success'
})// 或者
let data = {code: 0,message: 'success'
}
export {data
}

导出 Class

class Test {constructor() {this.id = 2}
}
export {Test
}// 或者
export class Test {constructor() {this.id = 2}
}

3. as

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2, 3]
export {name as myName,addr as myAddr,list
}

4. export default

使用import命令的时候，用户需要知道所要加载的变量名或函数名，否则无法加载。但是，用户肯定希望快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

const name = 'hello'
let addr = 'BeiJing City'
var list = [1, 2, 3]
export {name as myName,addr as myAddr
}
export default list

5. import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

// 直接导入
import list, {myName, myAddr} from A// 修改导入名称
import list, {myName as name, myAddr} from A// 批量导入
import list, * as mod from A

【ES6(2015)】Module模块相关推荐

【ES6】Module模块详解
[ES6]Module模块详解一.Module的由来二.严格模式三.export命令四.import命令查看更多ES6教学文章: 参考文献引言:由于两个JS文件之间相互使用必须通过一个ht ...
前端学习笔记之 ES6之Module模块与Babel编译（十三）
文章目录 Module 初识Module Module的基本用法 Module的导入和导出 export default export Module的注意事项 Module的应用总结 Babel和W ...
指定module_一个缺失已久的特性 — module模块
在ES6之前,Javascript还不支持原生的模块化.如果要实现模块化,我们要借助一些框架,比如:requireJS或者seaJS等:什么?没用过也没听过这些框架?没关系,它们不是我们今天要讲的重点 ...
第二十节：一个缺失已久的特性 — module模块
在ES6之前,Javascript还不支持原生的模块化.如果要实现模块化,我们要借助一些框架,比如:requireJS或者seaJS等:什么?没用过也没听过这些框架?没关系,它们不是我们今天要讲的重点 ...
5.Module模块
(1).模块化的初衷现在的web系统越来越庞大.复杂,需要团队分工,多人协作,大型系统的javascript文件经常存在复杂的依赖关系,后期的维护成本会越来越高. JavaScript模块化正式为了 ...
html模块殃射,【Web前端问题】webpack打包后，module模块中的函数无法在html标签的事件中调用？...
折腾了好久,求大佬指点~~最近才开始接触webpack以及ES6的module,可能理解的有问题吧...希望大佬来指点一下我这个菜鸟. 我的想法是在一个module中定义函数,在HTML的中用oncl ...
[ECMAScript] 谈谈你对es6的module体系的理解
[ECMAScript] 谈谈你对es6的module体系的理解 es5的模块规范出来之前,前端也实现了比如AMD CMD模块规范,对前端模块进行管理. es6的模块规范在语言层面实现了模块功能为什 ...
ES6之Module 的加载实现(1)
1.浏览器加载 1.1传统方法: 在 HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎 ...
[译] 在 Google Apps 脚本中使用 ES6 和 npm 模块
原文地址:Using ES6 and npm modules in Google Apps Script 原文作者:Prasanth Janardanan 译文出自:掘金翻译计划本文永久链接:git ...
Node.js简介、安装Node.js、ES6中的模块
一.Node.js简介 1. Node是什么 1)浏览器内核有两个引擎:渲染引擎(渲染html.css).JavaScript引擎(运行JavaScript代码) 2)Node是独立于浏览器的Java ...

【ES6(2015)】Module模块

文章目录