JavaScript言语自建立之初，一向没有模块（module）系统，没法将一个大顺序拆分红相互依靠的小文件，再用简朴的要领拼装起来。

许多编程言语都有这项功用，比方 Python的import、Ruby的require，以至就连CSS都有@import，然则JavaScript没有这方面的支撑，这增加了开辟大型的、庞杂的项目时的难度。

因而前端开辟者们最先想办法，为了防备定名空间被污染，采纳的是定名空间的体式格局。

在ES6之前，一些前端社区制订了模块加载计划，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。

但这两种范例都由开源社区制订，没有一致，而ES6中引入了模块（Module）系统，从言语层在完成了模块机制，完成了模块功用，而且完成得相称简朴，为JavaScript开辟大型的、庞杂的项目扫清了停滞。

ES6中的模块功用主要由两个敕令组成：export和import。

export敕令用于划定模块的对外接口，import敕令用于输入其他模块供应的功用，两者属于相辅相成、一一对应关联。

一、什么是模块

模块可以理解为函数代码块的功用，是封装对象的属性和要领的javascript代码，它可以是某单个文件、变量或许函数。

模块实质上是对营业逻辑星散完成低耦合高内聚，也便于代码治理而不是一切功用代码堆叠在一起，模块真正的魔力地点是仅导出和导入你须要的绑定，而不是将一切的东西都放到一个文件。

在抱负状态下我们只须要完成本身部份的中心营业逻辑代码，其他方面的依靠可以经由过程直接加载被人已写好模块举行运用即可。

二、export 导出 敕令

一个模块就是一个自力的文件，该文件内部的一切变量，外部没法猎取。假如想从外部可以读取模块内部的某个变量，就必需运用export关键字输出该变量。分为以下几种状况：

（1）在须要导出的lib.js文件中， 运用 export{接口} 导出接口， 大括号中的接口名字为上面定义的变量， import和引入的main.js文件中的export是对应的：

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

（2）在export接口的时刻， 我们可以运用 XX as YY， 把导出的接口名字改了， 比方： xiaoming as haoren，

如许做的目标是为了让接口字段越发语义化。

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

（3）直接在export的处所定义导出的函数，或许变量：

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

（4）不须要知道变量名字（相称因而匿名的）的状况，可以 直接把开辟的接口给export。假如一个js模块文件就只有一个功用， 那末就可以运用export default导出。

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

如许做的优点是其他模块加载该模块时，import敕令可认为该匿名函数指定恣意名字。

（5）export也能默许导出函数， 在import的时刻， 名字可以自定义， 由于每个模块的默许接口就一个：

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

（6）运用通配符* ，从新导出其他模块的接口

//lib.js
export * from "./other";
//假如只想导出部份接口， 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

三、import 导入敕令

ES6导入的模块都是属于援用，每个导入的js模块都是活的， 每一次接见该模块的变量或许函数都是最新的， 这个是原生ES6模块 与AMD和CMD的区分之一。

运用export敕令定义了模块的对外接口今后，其他 JS 文件就可以经由过程import敕令加载这个模块。

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

大括号内里的变量名，必需与被导入模块对外接口的称号雷同。

想要输入的变量从新取一个名字，import敕令要运用 as关键字，将输入的变量重定名。

import { formatFn as fn0 } from 'lib.js';

注：import背面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。

四、ES6模块化的基础划定规矩、特性

1、每个模块只加载一次， 每个JS只实行一次， 假如下次再去加载同目次下同文件，直接从内存中读取。 一个模块就是一个单例，或许说就是一个对象。

2、每个模块内声明的变量都是局部变量， 不会污染全局作用域。

3、模块内部的变量或许函数可以经由过程export导出。

4、一个模块可以导入别的模块。

五、class与模块化相连系实例

连系上节课我们学的 ES6 class与面向对象编程的学问，我们再完成一个把class和模块化连系的例子。

起首我们建立一个parent.js文件，运用class类的写法建立一个Parent类：

const name = "tom";
const age = "20";

class Parent{
  hw(){
    console.log(`hello world`)
  }
  static obj(){
      console.log('obj')/*示意为静态要领不回呗实例继续，而是直接经由过程类挪用。*/
    }
}  
var parent = new Parent()
parent.hw()//hell world

export{name,age,Parent}

以后在child.js中离别引入parent.js中的name、age、Parent

import {name,age,Parent} from './parent'


class Child extends Parent{
    constructor(obj){
        //就是new敕令自动跳用要领。一个类必需要有constructor，假如没定义，有默许增加一个空的。
        super()//挪用父类的constructor()
        this._config = obj;
        console.log(obj.name+"岁数"+obj.age)
    }
    hw(){
      console.log("hw")
    }
    set val(value){
      this._config.name = value;
      console.log(`name=${value}`)
    }
    get val(){
      console.log(this._config.name);
    }
}

Child.obj()//obj 继续父类static要领
var model = new Child({name,age}) //tom岁数20
model.hw()//hw
model.val = "jock"; //name=jock
model.val//jock

六、总结

本文主要从什么是模块，模块的导出（导出变量、函数、类、文件等），模块的导入（单个导入、多个导入、导入全部）等角度报告了ES6模块化操纵。

ES6模块的设想头脑，是只管的静态化，使得编译时就可以肯定模块的依靠关联，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时肯定这些东西。比方 CommonJS模块就是对象，输入时必需查找对象属性。

模块打包如今最好用的就是webpack了，webpack作为一款新兴的模块化治理和打包东西，其视恣意文件都为模块，并打包成bundle文件，比拟于browserify越发壮大。

模块化开辟是前端开辟的一大趋向，比方人人去看vue、react、angular，或许你们公司的项目源码，你会发明，险些一切项目都运用了模块化。小伙伴们一定要紧跟时期的大潮，将组件化开辟，模块化开辟，自动化构建连系，探究高效的开辟之道。