在很久以前就知道import了，C#中import就是引入类或者名称空间的功能。js一直都是通过页面的script 标签的src属性来引入js文件的。但是现在js的模块化开发越来越多，组件之间就需要不同的类或者变量来协作，不应该再像以前那样在页面级别引入了，太过于重量级别了，轻量合作很开心。export 及import 就产生了。
1、export :导出，可以导出类、变量、函数，可以在定义时就直接export 出去，也可以定义好了再export 出去。撸起:
/*****
* 工程师类,直接使用export进入导出
*/
export class Engineer{
/***
* 构造函数
*/
constructor(name){
this.name = name;
}
/***
* 名称
*/
name="";
/****
* 不能使用let、const、var 等修饰符
*/
work="";
/***
* 心态好，永远18岁
*/
age = 18;
/***
* 使用语言列表
*/
languageArr=[];
/****
* 介绍我的名字,不能在前面加function
*/
introduce(){
console.log(`myName is:${
this.name}`);
console.log(`myWork is:${
this.work}`);
console.log(`age is:${
this.age}`);
}
/**
* 写代码
*
*/
writeCode(){
console.log(`code language is:${
this.languageArr}`);
}
}
WebEngineer 需要继承自Engineer，需要引入Engineer，所以写法为：
//导入Engineer 类
import {
Engineer} from "../es6/export.js"
//使用 new 来创建一个实例对象
//let engineer = new Engineer("爱钱的大笨蛋");
//engineer.introduce();//调用实体方法（函数/行为）
export class WebEngineer extends Engineer{
/***
* 构造函数，一创建的时候便可以设置变量值
*/
constructor(name,languageArr){
super(name);//父类的构造函数调用
this.languageArr = languageArr;//通过传进去的值来初始化我的变量（属性）
this.work = "我的工作主要是做前端开发工作";//直接初始化我的变量（属性）
}
dream(){
console.log("我是一个喜欢做梦想的人，想象着有自己的大帝国，乌拉")
}
}
在页面中的引用与传统的type不一样了，页面的引入如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Syntax of ES 6</title>
</head>
<body>
<!--<script type="text/javascript" src="es6.js"></script>-->
<!--<script type="text/javascript" src="extendsTest.js"></script>-->
<!--<script type="text/javascript" src="es5.js"></script>-->
<!--引入WebEngineer-->
<script type="module">
import {
WebEngineer} from '../es6/import.js'
let webEngineer = new WebEngineer("前端开发",["css","js","html"]);
webEngineer.introduce();//自我介绍，此方法继承于Engineer类
webEngineer.writeCode();//写代码，此方法继承于Engineer类
webEngineer.dream();//这个是我自己的方法，我扩展的方法
</script>
</body>
</html>
得到的结果如下：
2、import :导入，可以导入类、变量、函数，从一个文件中导入一个类（函数、变量）或者多个类（函数、变量）。撸起：
//导入Engineer 类
import {
Engineer} from "../es6/export.js"
/****
* 完成继承后导出给页面使用
***/
export class WebEngineer extends Engineer{
/***
* 构造函数，一创建的时候便可以设置变量值
*/
constructor(name,languageArr){
super(name);//父类的构造函数调用
this.languageArr = languageArr;//通过传进去的值来初始化我的变量（属性）
this.work = "我的工作主要是做前端开发工作";//直接初始化我的变量（属性）
}
dream(){
console.log("我是一个喜欢做梦想的人，想象着有自己的大帝国，乌拉")
}
}
好了，一个完整的流程就已经介绍完了，下面咱们介绍一次性进行多个导出及多个导入吧。
导出语法：
/***
* 导出类
*/
export class MyClass{
}
/***
* 导出函数
*/
export function exportF(){
console.log("export function");
}
/***
* 导出变量
* @type {string}
*/
export var name="爱钱的大傻憨";
/**
* 先定义再导出
*/
export function doSomeThings(a,b) {
console.log("export doSomeThings");
}
/***
* 默认导出
*/
export default function(){
console.log("export default function");
}
导入
//导入Engineer 类
import {
Engineer,MyClass,exportF,name,doSomeThings} from "../es6/export.js"
import、export的内容相对比较简单，没有多少难点，就是一个导出导入的过程。但是导入导出的机制规范当前分别有CommonJS、AMD、CMD、es6。下一篇章进行介绍。