ES6
新增了模块的概念. 一个js
文件就是一个模块. 在一个模块中可能需要引入其他模块, 也可能需要输出模块. 这就需要使用export
和import
关键字了
要注意的是, ES6
自动采用严格模式.
export
export
用于输出, 可以输出一个函数, 输出一个变量. 有下面基本三种方式的export
第一种:
export var m = 1;
//或者
export function (){}
//或者
export class people{}
第二种:
var m = 1;
function add(){}
class people{}
export {m, add, people}
第三种:
var m = 1;
function add(){}
class people{}
//使用as重命名
export {m as n, add as ADD, people as p}
注意, 下面的方法是错误的:
export 1; //错误写法
export m; //错误写法
export default
当使用default
时, 表示默认输出. 一个模块只能有一个默认输出. 有多个default
时只会取最后一个
例如:
export default var m = 1
export default {m}
export default {m as n}
对于默认输出, 除了上面的基本的三种, 我们还可以这样写:
var m = 1
export default m //注意我添加了default
export m //错误写法, 不写default会报错
还要注意default
可以表示一个变量:
export default add
//等于
export {add as default}
import
import
用于在一个模块中引入其他模块.
import {m, n} from './moudle'
//等同于
import {m, n} from './moudle'
from
后面就是模块名, 表示moudle.js
文件. 大括号{m, n}
表示引入moudle
模块中的m
和n
. m
和n
必须在moudle
模块中出现.
import
也可以使用as
:
import {m as m1, n as n1} from './moudle'
也可以直接引入:
import './moudle'
当要引入的模块中有export default
时, import
默认引入default
输出:
import defa from './moudle'
//defa 时moudle.js中export default默认输出的值
import defa, {m, n} from './moudle'
export和import
当在一个模块中, 引入的模块也同样会被输出, 那么可以结合使用export
和import
.
import {m, n} from 'moudle'
//other codes
export {m, n}
可以改写为:
export {m, n} from 'moudle'
import()
import
是静态加载, 在编译阶段执行. import()
是动态加载, 运行的时候执行. import()
接收一个路径作为参数. 返回一个Promise
对象. 那么import()
后面可以接Promise
对象的任意方法, 如then()
,catch()
需要注意的是import()
还只是一个提按