最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

观焦点:Module理解及使用

来源:博客园

ES6的模块化设计思想是静态化,也就是说,在编译的时候确定模块的依赖关系,以及输出输出入的变量。而CommonJSAMD模块都是在运行时确定的。ES6的模块不是对象,而是通过export显示指定输出的代码,再通过import命令输入。

// 模块输入import { start,address } from "util"

上面的模块输入加载了两个方法,即使util模块内有其它方法也不会加载,只会加载上面引入的两个方法,这种加载称为“编译时加载”或静态加载

需要注意的是,ES6的模块自动采取严格模式,不管头部有没有加上"use strict"都会开启严格模式。严格模式的限制如下:


(资料图片)

1、变量必须先声明再使用2、函数参数不能有同名属性,否则报错3、不能使用with语句4、不能对只读属性赋值,否则报错5、不能使用前缀0表示八进制数,否则报错6、不能删除不可删除的属性,否则报错7、不能删除变量delete prop,会报错,只能删除属性delete global[prop]8、eval不会在它的外层作用域引入变量9、evalarguments不能被重新赋值10、arguments不会自动反映函数参数的变化11、不能使用arguments.callee12、不能使用arguments.caller13、禁止this指向全局对象14、不能使用fn.callerfn.arguments获取函数调用的堆栈15、增加了保留字(比如protectedstaticinterface

export和import命令

模块主要有exportimport构成,export规定模块对外的接口,import用于输入模块提供的功能。模块导出

// util模块// 类型function type(a){    return typeof a}// 计算function sum(a,b) {    return a * b }// 判断是否为数组function isArray(a) {    return a instanceof Array}export { type,sum }  // 按需导出

模块导入

import {  type,sum } from "./util"let num = sum(10,5)console.log(num) // 50

上面两种方式是可选的方式导出的,也就是说,import导入模块的时候,只会加载export导出的方法,其它的方法不会被import加载,并且import引入util模块可以按需引入,引入自己需要的模块即可,其它未引入的模块也不会加载,这也就是静态加载的好处。

除了export { xxx,xxx }的按需导出外,ES6还提供了export default的默认导出,默认导出的方法,在import导入的时候,不需要跟导出名一直,可以自定义名称接收导出的方法。

// util模块// 计算function sum(a,b) {    return a * b }// 判断是否为数组function isArray(a) {    return a instanceof Array}export default sum // 默认导出
import aaa from "./util"  // 导入时名字可以自定义let num = aaa(10,5)console.log(num) // 50

其实这个default就是一个叫做default的变量,这个变量可以被任意命名,在import导入的时候,取任何名称都可以匹配上default导出的方法。

按需和默认导出export { xxx,xxx }export default默认导出可以同时使用

// util模块function type(a){    return typeof a}function sum(a,b) {    return a * b }function isArray(a) {    return a instanceof Array}export { type,sum }export default isArray
// 导入import { type,sum }from "./util"  import aaa from "./util"  

模块的整体加载

上面的导出方法都是加载模块内对应的方法,模块的整体加载要使用*,也就是加载全部,语法如下

import * as util from "./util";// 在页面中使用let num = util.sum(10,5)console.log(num)  // 50

这种写法是将模块整体加载,用*指定一个对象,所有输出的值都加载在这个对象上面。通过该对象.方法名来获取对应方法。需要注意的是,ES6的模块是静态分析的,不允许对模块进行改变,所以下面写法是不允许的:

util.sum = "hello" // 报错util.sum = function () {} // 报错

模块继承

模块之间也是可以继承的,假设A模块继承了B模块

// A模块function sum(a,b) {    return a * b }function isArray(a) {    return a instanceof Array}export * from "B"  // 输出B模块的所有属性和方法,忽略模块内的default方法export { sum } export default isArray

export * 命令会忽略B模块的default方法,因为A模块内部有自己的default方法。

模块的重命名

// util模块export { sum as s }// 页面import { s } from "./util"  // 引入命名后的方法

模块按需引入import()

正常情况下import是需要在页面顶层引入的,并且import的引入执行的优先级是最高的,例如:

let s = sum(10,5)import { sum } from "./util" 

上面这种写法是允许的,程序会执行import的引入,然后再执行let s = sum(10,5),但这种写法会默认导入模块,并且是在顶层导入。es6提供了动态导入功能:import(),当程序执行到该语句的时候才会导入,并且是同步执行,import()返回的是一个Promise,所以可以使用then方法和async-awaitPromise写法

import("./util.js").then(el=>{   console.log(el.t(100));  // number   console.log(el.sum(10,5));  // 50})

async-await写法

async function getImport(){      let { sum } = await import("./util.js")      console.log(sum(2,8));}getImport()  // 16

也可以通过解构的方式获取

import("../module/import.js").then(({sum})=>{     console.log(sum(20,5));  // 100})

如果模块是default默认导出,其实default就是一个键名

import("../module/import.js").then((e)=>{   console.log(e.default([1,2,3]));  // true})

default也可以通过具名的形式导入(取别名)

import("../module/import.js").then(({default : isA})=>{     console.log(isA([1,2,3]));  // true})

import.meta

在使用一个模块时,有时候需要知道该模块本身的信息(比如模块的路径),import命令新增了一个元属性import.meta,可以返回当前模块的信息。注意import.meta只能在模块内使用,在模块外使用会报错

// util模块function sum(a,b) {    return a * b }function getMeta(){    return import.meta  // 获取当前模块的元信息}export { sum,getMeta }
// console.log(import.meta);  // import.meta只能在模块内使用,在模块外部使用会报错import("./util.js").then(el=>{      console.log(el.getMeta());  // {url: "http://127.0.0.1:5500/module/import.js", resolve: ƒ}})

案例源码:https://gitee.com/wang_fan_w/es6-science-institute

如果觉得这篇文章对你有帮助,欢迎点亮一下star哟

关键词: 这种写法 也可以通过