ES6 Module

模块功能主要是由:export 和 import 两个命令组成的。

export命令
用于规定模块的对外接口。通俗讲，就是这个模块输出了什么，是val还是function

// moduleA.js
var author = 'shaojian';
var version = '1.1';
exprot {author,version}
//等同于下边的方法，但是上一种更清晰明了
export var author = 'shaojian';
export var version = '1.1';
//统一了下个人的写法
var author = 'shaojian';
var version = '1.1';
function foo(x,y){
}
exports {
    author,
    version,
    foo
}

*** 注意 export命令输出的变量可以用 as关键字来重命名***

// moduleB.js
var author = 'shaojian';
var version = '1.1';
function foo(x,y){
}
exports {
    author as va1,
    version as val2,
    foo as f
}

import命令
export导出的接口，其它的js文件中可以用import加载这个文件，加载即是引用

import {author,version,year} from './moduleA.js'

*** import具有变量提升效果，编译时会提升到文件的最顶部，所以下边的js不会报错***

f()
import {foo as f} from './moduleA.js'

模块的整体加载

import  * as f from 'moduleB'
f.va1, f.val2 ,f.f(1,2)

export default用于模块的默认输出

//a.js
export default function(){
  console.log(11111)
}
//引用
import a from "a.js"

*** 一个模块只有一个默认的输出，也就是说，在一个模块里只能有一个export default***
有个使用上的区别

var a = 5;
export a;
//使用  
import {a as a1} from "module.js"
var a = 5;
export default a
//使用
import b from "module.js"

*** 同时引入默认和其他***

import a,{b} from "module.js"

*** 导出类 ***

export default ClassA{
    constructor(){}
    foo1(){}
}
//使用
import A from "xxx";
new A()

ES6 Module

推荐阅读更多精彩内容