export和import

ES6新增了模块的概念. 一个js文件就是一个模块. 在一个模块中可能需要引入其他模块, 也可能需要输出模块. 这就需要使用exportimport关键字了
要注意的是, 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模块中的mn. mn必须在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

当在一个模块中, 引入的模块也同样会被输出, 那么可以结合使用exportimport.

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()还只是一个提按

猜你喜欢

转载自blog.csdn.net/helloyongwei/article/details/80645548