es6动态模块import()

这篇具有很好参考价值的文章主要介绍了es6动态模块import()。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、语法说明

二、适用场合

三、注意点

四、示例代码

五、效果


一、语法说明

import命令会被 JavaScript 引擎静态分析,先于模块内的其他语句执行(import命令叫做“连接” binding 其实更合适)。

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

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

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

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

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

ES2020提案 引入import()函数,支持动态加载模块。

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.js 的require()方法,区别主要是前者是异步加载,后者是同步加载。

由于import()返回 Promise 对象,所以需要使用then()方法指定处理函数。考虑到代码的清晰,更推荐使用await命令。

async function renderWidget() {
  const container = document.getElementById('widget');
  if (container !== null) {
    // 等同于
    // import("./widget").then(widget => {
    //   widget.render(container);
    // });
    const widget = await import('./widget.js');
    widget.render(container);
  }
}

renderWidget();

上面示例中,await命令后面就是使用import(),对比then()的写法明显更简洁易读。

二、适用场合

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

三、注意点

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

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

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

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

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

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

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

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

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

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

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

四、示例代码

在项目中新建src/动态模块文件夹,在该文件夹下新建index.js和module/index.js文件。如下图:

js动态import,es6,javascript,前端 index.js


let resdata = import('./module')
resdata.then(resModule => {
    resModule.axiosfun().then(res => {
        console.log(res)
    })

})

 module/index.js

let axiosfun = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("动态模块import()使用测试")
        }, 6000);
    })
}

let axios = axiosfun()

export {
    axiosfun
}

五、效果

js动态import,es6,javascript,前端

js动态import,es6,javascript,前端 

 

 源码地址;https://github.com/1t1824d/es6_module_class_promise_await_demo/tree/master文章来源地址https://www.toymoban.com/news/detail-636421.html

到了这里,关于es6动态模块import()的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端技术栈 - ES6 - Promise -模块化编程

    ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准, 2015年6月发布. ES6设计目标: 达到JavaScript语言可以用来编写复杂的大型程序, 成为企业级开发语言. ECMAScript和JavaScript的关系就: ECMAScript是JavaScript的规范/规则, JavaScript是ECMAScript的一种实现. let.html +与,的区别 let_detail.html 细节1. l

    2024年02月11日
    浏览(298)
  • 前端 ES6 环境下 require 动态引入图片以及问题

    ES6 环境中,通过 require 的方式引入图片很方便,一直以来也没有出过什么问题,后来项目中,需要动态引入图片。 require 动态引入也容易实现,百度也能搜到很多博客介绍。 偶然发现项目中 require 引入图片好像对打包体积影响挺大 ,js 会变大很多,经过测试,终于确定原因

    2024年02月07日
    浏览(44)
  • import后加不加{}的区别(es6引用)

    目录 背景: 1.不加{} 2.加{} 总结: ES6使用import引入定义模块时加不加花括号: export及export default的区别: 背景: 当需要在main.js中引入A.js 1.不加{} 这种引入方法,A.js文件中需要提供默认的 export defulat导出 ( 必须是默认导出 ), 这样在main.js文件中才可以使用A 2.加{} 这种引

    2024年02月04日
    浏览(38)
  • 【ES6】require、export和import的用法

    在JavaScript中,require、export和import是Node.js的模块系统中的,用于处理模块间的依赖关系。 1、require:这是Node.js中引入模块的方法。当你需要使用其他模块提供的功能时,可以使用require来引入该模块。例如: common.js 运行 node .demo.js ,输出: 在上面的代码中,我

    2024年02月10日
    浏览(36)
  • 【ES6】CommonJS模块和ES6模块

    在JavaScript中,模块是一种将功能代码组织成逻辑单元的方式,以便在其他项目中重复使用。有两种主要的模块系统:CommonJS和ES6。 1、CommonJS 在CommonJS中,我们使用require来引入模块,使用module.exports来导出模块。 下面是一个简单的例子: 然后,在另一个文件中,我们可以使用

    2024年02月09日
    浏览(49)
  • 【前端模块化】JS模块化思想以及相关规范(CommonJS、ES module)

    1.模块化概念 随着前端应用日趋复杂,项目代码也大量膨胀,模块化就是一种最主流的代码组织方式, 一个模块就是一个实现特定功能的文件 ,它通过把我们的复杂代码按照功能的不同,划分为不同的模块单独维护的这种方式,去提高我们的开发效率,降低维护成本。要用

    2024年02月01日
    浏览(63)
  • 【JavaScript】数组方法 (ES6)

    arr.find(callback) 用于获取第 1 个符合要求的元素: callback : (item, index, arr) = boolean item -当前值、 index -当前索引、 arr -当前数组 返回值: callback 第一次返回 true 的对应 item ;如果没有符合的元素,则返回 undefined arr.findIndex(callback) 用于获取第 1 个符合要求的元素的下标: cal

    2024年02月14日
    浏览(59)
  • JavaScript ES6实现继承

    1 对象的方法补充 2 原型继承关系图 3 class方式定义类 4 extends实现继承 5 extends实现继承 6 多态概念的理 function 创建的名称如果开头是大写的,那这个创建的不是函数,是创建了类。 可以把class创建的类当做是function创建的类的一种语法糖。但是在直接使用的方面是有不同之处

    2024年02月16日
    浏览(48)
  • JavaScript 之 ES6 新特性

    在ES6中,模块化成为了JavaScript的标准特性。ES6模块化提供了一种更加优雅和可维护的方式来组织和管理JavaScript代码,可以有效地避免全局变量的污染和命名冲突的问题。以下是ES6模块化的一些主要特性: 导出(export): 可以通过 export 将一个变量、函数或类导出为一

    2024年02月07日
    浏览(49)
  • JavaScript Es6_3笔记

    了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻辑封装 掌握基于原型对象实现的继承 理解什么原型链及其作用 能够处理程序异常提升程

    2024年02月11日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包