ES6 新特性之 Module

关于模块化,在之前有过AMD和CMD,require.js以及后面的sea.js,实际上都是借助于第三方的插件。那么在ES6里面它官方引入了模块化编程,它的不同之处在于:

ES6的Module它的运行环境实际上是编译时的,也就是说在编译时它就会把所有的依赖导入导出,每一个模块有自己独立的命名空间,然后这些关系都明确了。

1:基本概念

编译时模块(module)体系

2:export - 规定模块的对外接口

export在ES5之前或者是在sea.js和require.js里面我们用的都是export.default,但是在ES6我们实际上只需要用一个export关键字就可以了,它是规定模块化的对外接口,也就是说导出的是什么。

情况一:下面的代码这两个如果放在一个模块化的尾部(或者是一个js尾部、一段代码尾部),那么它的意思就是说导出了两个变量,一个叫做name,一个叫做age,这是最基本的用法。

也就是说在一个js一段代码下我们导出了两个模块,两个变量可以供外部使用或者说两个方法。

export const name = 'Eric';
export const age = 28;

情况二:default,默认引入。

当别人使用我们写的模块的时候,可能会不知道我们导出的关键字是什么,但是当使用了default之后,不管外来是以什么引入,以什么变量把它命名为什么都没有关系,因为这时候导出的是整个的对象。因此,别人在引用这个对象时,可以随意命名,对象下面就可以看到变量的名称。

const name = 'Eric';
const age = 28;
export default { name, age };

情况三:导出方法

const name = 'Eric';
const age = 28;
export default function getProperty() {
  return `name: ${name} age: ${age}`
};

情况四:自身导出

const name = 'Eric';
const age = 28;
export default {
  name as customName,
  age as customAge
};

3:import - 加载模块

这里{ name, age }用到的是一个解构,对应上面的第一种导出写法。

import { name, age } from '../xxx.js';

重命名:

import { name as customName } from '../xxx.js';

下面的没有{}没有解构的它得到的是一个默认导出的,可以不用解构就直接导出。

import getProperty from '../xxx.js';

lodash是一个很有用的函数是编程的工具库。

在ES6里面,当我们引入两个同样的内容的时候,比如下面的写两遍import,但实际上它只会引入一次。甚至说当我们引用了同一个文件两次,每次取它不同的方法,但是实际上也只引入一次。这是ES6 Module内部的特有处理。

import 'lodash';
import 'lodash';
​
import { name } from '../xxx.js';
import { age } from '../xxx.js';

整个文件全部引入:* 代表所有,如下把../xxx.js文件下所有的都导出来然后把它命名到这个utils 。

import * as utils from '../xxx.js';

4:export 与 import 复合

在某些场景下,我们可能需要把export和import结合。比如我们引入了很多其他的库,然后封装一下供我们使用,在封装时我们需要引入其他的库,也就是import,然后抛出来给我们自己的模块,这个时候我们就要用到export。

// 先引进来再导出去
import { foo, bar } from '../xxx.js';
export { foo, bar };
​
/* 等同于 */
export { foo, bar } from '../xxx.js';

把../xxx.js中的全部导出来然后再把它导出去:

export * from '../xxx.js';

把../xxx.js里面default导出的再把它导出来,这样省去了一些中间变量:

export { default } from '../xxx.js';

从../xxx.js中只引入其中一个es6,但是我们把它默认的default成为了一个es6:

import { es6 } from '../xxx.js';
export default es6;
​
// 等同于 也就是说从../xxx.js把es6引进来然后再把它export默认导出
export { es6 as default } from '../xxx.js';
​
// 默认导出也可以重命名
export { default as es6 } from '../xxx.js';

5:import() - 动态加载

import除了引入模块,一般来说我们通常是把它放在文件的顶部来引入依赖,但是这个import它可以动态加载。比如说我们有一些文件不需要用到,比如点击某一个按钮才可能去实现一些功能,那么实现这个功能的时候我们就需要一些额外的文件,这个时候就需要用到import动态加载了。

  • 按需加载

    button.addEventListener('click', event => {
     import('./xxx.js')
      .then(value => {
     console.log(value);
      })
      .catch(error => {
     /* Error */
      })
    });
  • 条件加载

    if (condition === 1) {
      import('./xxx.js').then(module => {
        console.log(module.default);
      });
    } else if (condition === 2) {
      import('./xxx.js').then(({ name, age }) => {
        console.log(name, age);
      });
    } else {
      import('./xxx.js').then(({ name: customName, age }) => {
        console.log(customName, age);
      });
    }

你可能感兴趣的:(module,es6-系列)