在很久以前就知道import了，C#中import就是引入类或者名称空间的功能。js一直都是通过页面的script 标签的src属性来引入js文件的。但是现在js的模块化开发越来越多，组件之间就需要不同的类或者变量来协作，不应该再像以前那样在页面级别引入了，太过于重量级别了，轻量合作很开心。export 及import 就产生了。

1、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>



得到的结果如下：




auto function 传参 export function函数传参_构造函数


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。下一篇章进行介绍。