ES6中 export与import

ES6中exports 与import

一个独立的模块文件暴露接口/变量供其他程序文件使用，通过export关键字导出该文件变量，程序文件通过import关键字引入该模块文件变量

命名导出（names export）

可以导出多个函数/变量，但必须要明确导出的变量名，在工具类函数中常使用

// utils.js
export const rand = Math.random();
export function square(x) {
    return x * x;
}

// index.js 使用方式1
import { rand,square } from '../utils';
console.log(square(11)); // 121

// index.js 使用方式2 使用* as全部变量集合导出
import * as utils from '../utils';
console.log(utils.square(11)); // 121

用大括号批量导出一组变量

const rand = Math.random();
function square(x) {
    return x * x;
}
function add(x, y) {
    return x + y;
}
export {rand, square, add};

使用as 重命名 

function f1() {

}
function f2() {

}
function f3() {

}
export {
    f1 as fun1,
    f2 as fun2,
    f3 as fun3,
}

export 导出必须是在模块的顶层，不能在函数或者条件语句的作用域里面

function f() {
    export n from './n'
}
f() // SyntaxError

export 命令规定的是对外接口，必须与模块内部变量建立一一对应的关系

export 后面不可以是表达式，因为表达式只有值，没有名字无法解构。

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

// 报错
export 1;

// 报错
var m = 1;
export m;
//报错的写法原因是：没有提供对外的接口，第一种直接输出1，第二种虽然有变量m，但还是直接输出1，导致无法解构。

function和class的输出，也必须遵守这样的写法。

// 报错
function f() {}
export f;

// 正确
export function f() {};

// 正确
function f() {}
export {f};

默认导出（default exports）

z这种方式导出类文件或者功能单一的函数文件

变量/函数前面加export default 关键字

默认导出 可以是表达式/可以为原始值

每个模块文件只有一个默认到处

//导出一个值
export default 3445

//导出一个函数
// tools.js
export default function () {

}
//index.js
import myfun from '../tools'
myfun()

//导出一个类
//MyClass.js
class myClass{
    constructor() {
    }
}
export default myClass
// 或者
 export { MyClass as default};

// index.js
import MyClass from 'MyClass';

export default 与 export 的区别：

不需要知道导出的具体变量名；

导入【import】时不需要 { } 包裹；

Combinations exports (混合导出)

混合导出是 Named exports 和 Default exports 组合导出。

混合导出后，默认导入一定放在命名导入前面；

// tools.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
...
}
export function* myGeneratorFunc() {
...
}
export default class MyClass {
...
}

// index.js
import MyClass, { myValue, myFunc } from 'tools';

import命令

export定义模块对外的接口，其他文件通过import加载模块

import 接收一个花括号 里面指定export的变量名，必须与被导入模块对外接口的名称相同

可以用as关键字来重命名导入的变量

//index.js
import {firstFun,lastFun,count} from 'tools'

//as 重命名
import {firstFun as firF,lastFun as last,count} from 'tools'

import后的from 可以指定模块的路径名，可以是绝对路径，相对路径， .js路径可以省略，如果只有模块名，不带有路径，或者不带其他文件后缀名，需要有配置文件指定例如webpack。

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。（是在编译阶段执行的）

因为import是静态执行的，不能使用表达式和变量，即在运行时才能拿到结果的语法结构（e.g. if...else...）

import * as utils from './utils';

// 下面两行都是不允许的
utils.foo = 'hello';
utils.area = function () {};

****import和export命令只能在模块的顶层，不能在代码块之中。否则会语法报错。

这样的设计，可以提高编译器效率，但是没有办法实现运行时加载。

因为require是运行时加载，所以import命令没有办法代替require的动态加载功能。

所以引入了import()函数。完成动态加载。

import(url)

//url 加载文件路径 import能接受什么参数，import()可以接受同样的参数

import() 函数返回一个 promise对象

import(`../eare.js`)
  .then(module => {
    ...
  })
  .catch(err => {
    ...
  });

import(`./tools-modules/${pagenation}.js`)
  .then(module => {
    ...
  })
  .catch(err => {
    ...
  });

import函数适用场合

1.按需加载

var btn = document.querySelector('button')

btn.addEventListener('click',function () {
    import('./url').then(res=>{
        ...
    }).catch(err=>{
        ...
    })
})

事件监听，触发事件后执行加载动作

2.条件加载

if(true){
    import('./url').then(res=>{
    ...
    }).catch(err=>{
    ...
    })
}else{
    ...
}