模块功能主要是由: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()
