ES6中的import()函数

Stella981
• 阅读 643
import(specifier)

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

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

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

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

适用场合

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

(1)按需加载。

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

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

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

(2)条件加载

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

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

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

(3)动态的模块路径

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

import(f())
.then(...);

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

点赞
收藏
评论区
推荐文章
待兔 待兔
2年前
export ,export default 和 import 区别 以及用法
首先要知道export,import,exportdefault是什么ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过impor
Bill78 Bill78
3年前
python中的map函数
1map()函数的简介以及语法:map是python内置函数,会根据提供的函数对指定的序列做映射。map()函数的格式是:map(function,iterable,...)第一个参数接受一个函数名,后面的参数接受一个或多个可迭代的序列,返回的是一个集合。把函数依次作用在list中的每一个元素上
Karen110 Karen110
3年前
初窥 Python 的 import 机制
本文适合有Python基础的小伙伴进阶学习。作者:pwwang一、前言本文基于开源项目:https://github.com/pwwang/pythonimportsystem补充扩展讲解,希望能够让读者一文搞懂Python的import机制。1.1什么是import机制?通常来讲,在一段Python代码中去执行引用另一个模块中
Souleigh ✨ Souleigh ✨
3年前
初识 JS 中的柯里化
作为函数式编程语言,JS带来了很多语言上的有趣特性,比如柯里化。1.简介柯里化(Currying),又称部分求值(PartialEvaluation),是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。核心思想是把多参数传入的函数拆成单参数(或部分)函
Stella981 Stella981
3年前
JS 中的require 和 import 区别
在研究react和webpack的时候,经常看到在js文件中出现require,还有import,这两个都是为了JS模块化编程使用。CSS的是@import1.ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。Require是CommonJS的语法,CommonJS的模块是对象,输入时
Stella981 Stella981
3年前
Python import与from import使用及区别介绍
Python程序可以调用一组基本的函数(即内建函数),比如print()、input()和len()等函数。接下来通过本文给大家介绍Pythonimport与fromimport使用及区别介绍,感兴趣的朋友一起看看吧下面介绍下Pythonimport与fromimport使用,具体内容如下所示:Python程序可以调用一组基本的函数(即内建函
Wesley13 Wesley13
3年前
mysql中时间比较的实现
MySql中时间比较的实现unix\_timestamp()unix\_timestamp函数可以接受一个参数,也可以不使用参数。它的返回值是一个无符号的整数。不使用参数,它返回自1970年1月1日0时0分0秒到现在所经过的秒数,如果使用参数,参数的类型为时间类型或者时间类型的字符串表示,则是从1970010100:00:0
Stella981 Stella981
3年前
Python中的import语句
Python中的import语句是导入一个文件,这条语句主要做三件事:1通过一定的方式,搜寻要导入的文件;2如果需要,就编译这个文件;3运行这个文件但是,需要注意的是,所有这三个步骤,都只是文件再第一次导入的时候才会执行,如果文件已经导入了,后续的import会直接从内存里面找到已经加载的模块使用,换句话说,此时,import不会执行上
Wesley13 Wesley13
3年前
Java容器——UnsupportedOperationException
    先看一个例子:import java.util.ArrayList;import java.util.Arrays;import java.util.Collection;import java.util.Collections;import java.util.List;pub
Stella981 Stella981
3年前
Scala基础
1\.介绍柯里化(currying,以逻辑学家HaskellBrooksCurry的名字命名)指的是将原来接受两个参数的函数变成新的接受一个参数的函数的过程。新的函数返回一个以原有第二个参数作为参数的函数。在Scala中方法和函数有细微的差别,通常编译器会自动完成方法到函数的转换。如果想了解Scala方法和函数的具体区别,请参考博文S