es6 模块化概念 | 易学教程

import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。

这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。从语法上，条件加载就不可能实现。如果import命令要取代 Node 的require方法，这就形成了一个障碍。因为require是运行时加载模块，import命令无法取代require的动态加载功能。

const myModual = require(path);

上面的语句就是动态加载，require到底加载哪一个模块，只有运行时才知道。import语句做不到这一点

因此，有一个提案，建议引入import()函数，完成动态加载

import(specifier)

上面代码中，import函数的参数specifier，指定所要加载的模块的位置。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector(‘main’);

import(./section-modules/${someVariable}.js

});

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，也会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。

import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

（1）按需加载。

import()可以在需要的时候，再加载某个模块。

})});

上面代码中，import()方法放在click事件的监听函数之中，只有用户点击了按钮，才会加载这个模块

（2）条件加载

import()可以放在if代码块，根据不同的情况，加载不同的模块

import(‘moduleB’).then(…);}

（3）动态的模块路径

import()允许模块路径动态生成。

上面代码中，根据函数f的返回结果，加载不同的模块。

引入方式如：

a.js 中有个 let a = 123; export {a};

b.js 引入就是 import {a} from 'a'

标签