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的返回结果,加载不同的模块。

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

  1. ES6中的Generator函数

    今天小编发现一个es6中的新概念,同时也接触到了一个新关键字yeild,下面我就简单和大家聊聊es6中的generator函数.大家还可以关注我的微信公众号,蜗牛全栈. 一.函数声明:在functio ...

  2. ES5和ES6中关于import & export的书写方式的区别

    ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...

  3. 彻底理解JavaScript ES6中的import和export

    0.前言 前端工程,在最早的时候是没有模块的概念的.随着前端工程的发展,前端开发也越来越规范化,更像是软件工程了.那么随之而来的,为了解决工程化的问题,就引入了模块的概念.但是在早期,因为ecmasc ...

  4. ES6中的箭头函数

    关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...

  5. ES6中的async函数

    一.概述 async 函数是 Generator 函数的语法糖 使用Generator 函数,依次读取两个文件代码如下 var fs = require('fs'); var readFile = f ...

  6. ES6中的箭头函数与普通函数的区别

    箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...

  7. ES6中的箭头函数和普通函数有什么区别?

    1.普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call().bind().apply().(正是因为它没有 ...

  8. JS ES6中的箭头函数(Arrow Functions)使用

    转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...

  9. es6 中的generator函数控制流程

    Generator函数跟普通函数的写法有非常大的区别: 一是,function关键字与函数名之间有一个星号: 二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是“产出 ...

随机推荐

  1. UVALive-3399-Sum of Consecutive Prime Numbers(素数筛,暴力)

    原题链接 写个素数筛暴力打表一波就AC了: #include <iostream> using namespace std; const int N = 10001; int i, j, ...

  2. 如何在NSDocumentDirectory内新建一个文件夹

    iOS下载文件一般保存到NSDocumentDirectory内,但是为了更好整理文件内容,那就要自定义的生成一些文件夹,和做一些删除文件夹的操作. - (NSString *)pathToPatie ...

  3. Java 高并发解决方案(电商的秒杀和抢购)

    转载:https://blog.csdn.net/icangfeng/article/details/81201575 电商的秒杀和抢购,对我们来说,都不是一个陌生的东西.然而,从技术的角度来说,这对 ...

  4. C++标准库类模板vector

    vector是C++标准库STL中的一个重要的类模板,相当于一个更加健壮的,有很多附加能力的数组 使用vector前首先要包含头文件 #include<vector>  1.vector的 ...

  5. Spring Roo 想知道源码,怎么实现自动生成枯燥的有规律的文件

    简介   似乎是社区在维护的,不在 Spring 官网的 main projects 列表里,而是在 社区projects 列表里   是工具,不是像Spring Boot 一样的框架 http:// ...

  6. python在读取配置文件存入列表中,去掉回车符号

    self.receiver = map(lambda x: x.strip(), receiver_list) # 去掉list中的回车符号

  7. gson日期转换问题

    转:http://blog.csdn.net/liao_leo/article/details/44593095 今天遇到个很奇怪的问题,gson解析日期字符串,本地执行可以,服务器上执行就报错. 这 ...

  8. 转 linux 内存释放

    原文 http://blog.zol.com.cn/2322/article_2321774.html #cat /proc/meminfo | grep "MemFree" | ...

  9. CSS的margin属性:详解margin属性

    在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...

  10. 1、Shell命令行书写规则

    学习目标Shell命令行书写规则 正文对Shell命令行基本功能的理解有助于编写更好的Shell程序,在执行Shell命令时多个命令可以在一个命令行上运行,但此时要使用分号(;)分隔命令,例如: ro ...