简介

import命令会被 JavaScript 引擎静态分析,先于模块内的其他模块执行(叫做”连接“更合适)。所以,下面的代码会报错。

  1. // 报错
  2. if (x === 2) {
  3. import MyModual from './myModual';
  4. }

上面代码中,引擎处理import语句是在编译时,这时不会去分析或执行if语句,所以import语句放在if代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,importexport命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。

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

  1. const path = './' + fileName;
  2. const myModual = require(path);

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

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

  1. import(specifier)

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

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

  1. const main = document.querySelector('main');
  2. import(`./section-modules/${someVariable}.js`)
  3. .then(module => {
  4. module.loadPageInto(main);
  5. })
  6. .catch(err => {
  7. main.textContent = err.message;
  8. });

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

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

适用场合

下面是import()的一些适用场合。

(1)按需加载。

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

  1. button.addEventListener('click', event => {
  2. import('./dialogBox.js')
  3. .then(dialogBox => {
  4. dialogBox.open();
  5. })
  6. .catch(error => {
  7. /* Error handling */
  8. })
  9. });

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

(2)条件加载

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

  1. if (condition) {
  2. import('moduleA').then(...);
  3. } else {
  4. import('moduleB').then(...);
  5. }

上面代码中,如果满足条件,就加载模块 A,否则加载模块 B。

(3)动态的模块路径

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

  1. import(f())
  2. .then(...);

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

注意点

import()加载模块成功以后,这个模块会作为一个对象,当作then方法的参数。因此,可以使用对象解构赋值的语法,获取输出接口。

  1. import('./myModule.js')
  2. .then(({export1, export2}) => {
  3. // ...·
  4. });

上面代码中,export1export2都是myModule.js的输出接口,可以解构获得。

如果模块有default输出接口,可以用参数直接获得。

  1. import('./myModule.js')
  2. .then(myModule => {
  3. console.log(myModule.default);
  4. });

上面的代码也可以使用具名输入的形式。

  1. import('./myModule.js')
  2. .then(({default: theDefault}) => {
  3. console.log(theDefault);
  4. });

如果想同时加载多个模块,可以采用下面的写法。

  1. Promise.all([
  2. import('./module1.js'),
  3. import('./module2.js'),
  4. import('./module3.js'),
  5. ])
  6. .then(([module1, module2, module3]) => {
  7. ···
  8. });

import()也可以用在 async 函数之中。

  1. async function main() {
  2. const myModule = await import('./myModule.js');
  3. const {export1, export2} = await import('./myModule.js');
  4. const [module1, module2, module3] =
  5. await Promise.all([
  6. import('./module1.js'),
  7. import('./module2.js'),
  8. import('./module3.js'),
  9. ]);
  10. }
  11. main();

import()函数的更多相关文章

  1. ES6中的import()函数

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

  2. Python模块_import语句_from...import 函数名_from ... import *

    Python模块:包含了所有定义的函数和变量的文件,后缀名为 .py 将某些方法存放在文件中,当某些脚本 或 交互式需要使用的时候,导入进去. 导入的文件,就称为模块.导入之后就可以使用导入的文件的函 ...

  3. Python基础教程-第一章-变量、函数、字符串

    1.1变量 变量基本上就是代表(或者引用)某个值的名字,举例来说,如果希望用x代表3,只需要执行下面的语句即可: >>>x = 3 这样的操作称为赋值(assignment),值3赋 ...

  4. ThinkPHP函数详解系列

    为了能方便大家学习和掌握,在这里汇总下ThinkPHP中的经典函数用法 A 函数:实例化控制器R 函数:直接调用控制器的操作方法C 函数:设置和获取配置参数L 函数:设置和获取语言变量D 函数:实例化 ...

  5. python学习交流 - 内置函数使用方法和应用举例

    内置函数 python提供了68个内置函数,在使用过程中用户不再需要定义函数来实现内置函数支持的功能.更重要的是内置函数的算法是经过python作者优化的,并且部分是使用c语言实现,通常来说使用内置函 ...

  6. python从入门到实践-8章函数

    #!/user/bin/env python# -*- coding:utf-8 -*- # 给形参指定默认值时,等号两边不要有空格 def function_name("parameter ...

  7. python 77种常用的基础函数

     Python:   1. print()函数:打印字符串   2. raw_input()函数:从用户键盘捕获字符   3. len()函数:计算字符长度   4. format(12.3654,’ ...

  8. 模块的语法 import ,from...import....

    ------------------------积极的人在每一次忧患中都看到一个机会, 而消极的人则在每个机会都看到某种忧患 1. 认识模块 模块可以认为是一个py文件. 模块实际上是我们的py文件运 ...

  9. Python import模块

    import模块 一.模块介绍 1.定义 模块:用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能), 本质就是.py结尾的python文件(文件名:test.py,对应的模块名:t ...

随机推荐

  1. oracle Transactional

    从shutdown transactional命令发布起, 禁止建立任何新的oracle连接. 从shutdown transactional命令发布起,禁止启动任何新的事务. 一旦数据库上所有的活动 ...

  2. homestead 重复出错

    vboxmanage list vms "homestead-7" {2c8b0ea2-d862-4f4e-bcb2-2d7db848686f} vboxmanage unregi ...

  3. 【C++】STL,vector容器操作

    C++内置的数组支持容器的机制,但是它不支持容器抽象的语义.要解决此问题我们自己实现这样的类.在标准C++中,用容器向量(vector)实现.容器向量也是一个类模板.标准库vector类型使用需要的头 ...

  4. celery琐碎笔记

    -l 指定日志等级 -n 指定任务名称 -Q 指定任务执行队列 -c 指定启动celery的cpu数量 --logfile 指定日志输出到文件,会输出任务函数里的print,而控制台不会,用于调试. ...

  5. sql select时增加常量列

    阅读更多 string sql="select a,b,'常量' as c from table" 注:单引号' ' 很重要,否则编译时会把其看成查询参数,从而提示参数未指定错误. ...

  6. 第四次C++

    继承与派生 一.什么是继承和派生 所谓继承就是从先辈处得到属性和行为特征.类的继承,是新的类从已有类那里得到已有的特性.从另一个角度来看这个问题,从已有类产生新类的过程就是类的派生.类的继承与派生机制 ...

  7. Datanodes-心跳机制

  8. Libev源码分析03:Libev使用堆管理定时器

    Libev中在管理定时器时,使用了堆这种结构,而且除了常见的最小2叉堆之外,它还实现了更高效的4叉堆. 之所以要实现4叉堆,是因为普通2叉堆的缓存效率较低,所谓缓存效率低,也就是说对CPU缓存的利用率 ...

  9. 「BZOJ2510」弱题

    「BZOJ2510」弱题 这题的dp式子应该挺好写的,我是不会告诉你我开始写错了的,设f[i][j]为操作前i次,取到j小球的期望个数(第一维这么大显然不可做),那么 f[i][j]=f[i-1][j ...

  10. vue init定制团队模板使用方法

    每次做项目都要自己搭建项目目录,或者换了公司就的重新搭建项目目录,是不是很麻烦呢?有没有想过一次性把项目目录搭建好,以后直接用呢?你首先想到的可能是复制自己原来的项目,然后删除.修改等等.然而有个更方 ...