ES6之module语法

本文介绍了ES6在JavaScript中实现的模块化功能,它可取代旧有模块化规范。模块功能由export和import命令构成,自动采用严格模式。阐述了命令的使用规则、注意事项,如接口绑定、只读输入等,还提及模块继承、常量跨模块使用,以及引入import函数实现动态加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前分享过模块化,也提到了ES6新增的module。JavaScript一直没有模块体系,css都有@import。ES6标准实现了模块化功能,完全可以取代那些模块化规范,成为浏览器和服务器的通用方法。

有了module,我们不需要UMD模块格式,将来服务器和浏览器都会支持 ES6 模块格式。目前各种工具库都实现了。将来浏览器的新 API 就能用模块格式提供,不再必须做成全局变量或者navigator对象()的属性。不再需要对象作为命名空间(比如Math对象),未来这些功能可以通过模块提供。

ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict"。严格模式之前也分享过了,就不多说了。

模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

需要注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系,export语句输出的接口,与其对应的值是动态绑定关系:

export var a = 1;

var b = 2;

export {b}

export function fn() {}

function ex() {}

export {ex}

export b//报错

export ex//报错

export和import命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错。

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。import命令输入的变量都是只读的,因为它的本质是输入接口。也就是说,不允许在加载模块的脚本里面,改写接口,否则报错。

import命令具有提升效果,会提升到整个模块的头部,首先执行。import是静态执行,所以不能使用表达式和变量。import语句会执行所加载的模块,如果多次重复执行同一句import语句,那么只会执行一次。只要是加载一个模块的都只执行一次。

使用export default的时候:

function fn() {}

export {fn as default}等同于export default fn;

这时候export default后面不能跟变量声明语句:

export default var a = 1;是错误的。

同样的,直接导出值却正确了:

expprt default 1是正确的。

Export和import可以复合使用,foo和bar实际上并没有被导入当前模块,只是相当于对外转发了这两个接口:

export { a } from ‘./b’

可以用来改名或者整体输出。

模块是可以继承的:

export * from ‘a’;

表示输出a模块的所有属性和方法,会忽略a模块的default方法,然后可以把自定义的属性和方法都输出。

const声明的常量只在当前代码块有效,使用export就能跨模块使用。要注意,import和export命令只能在模块的顶层,不能在代码块之中,不管是if还是函数中,都会报错。

Import不能动态加载,require可以,想要实现取代require,就有提案引入import函数完成动态加载,返回一个promise对象。且import函数可以用在任何地方,非模块脚本也可以,是运行时执行。只要运行了就加载指定模块。Import()函数跟require只有一个同步和异步的区别。Import函数适用于按需加载、条件加载、动态模块路径等。然后就像使用promise对象一样,参数就是模块内容。

转载于:https://juejin.im/post/5d09ce7de51d45776031b00d

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值