【ES6标准入门】JavaScript中的模块Module语法的使用细节：export命令和imprt命令详细使用，超级详细！！！

在这里插入图片描述

😁 作者简介：一名大四的学生，致力学习前端开发技术
⭐️个人主页：夜宵饽饽的主页
❔ 系列专栏：JavaScript进阶指南
👐学习格言：成功不是终点，失败也并非末日，最重要的是继续前进的勇气

​🔥​前言：

本篇是关于js中最常用的模块语法，import和export命令的使用细节，暴露和导出js语法时应该注意什么，这非常重要，了解到这些细节，会让js语法代码更加的严谨和健壮，希望可以帮助到大家，欢迎大家的补充和纠正

文章目录

    • 第22章 Module语法
      • 22.1 概述
      • 22.2 严格模式
      • 22.3 export命令
      • 22.4 import命令
      • 22.5 模块的整体加载
      • 22.6 export defaule命令
      • 22.7 export与import的复合写法
      • 22.8 模块的继承
      • 22.9 跨模块常量
      • 22.10 import()
        • 22.10.1 简介
        • 22.10.2 适用场合
        • 22.10.3 注意点

第22章 Module语法

22.1 概述

​ 在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种，前者用于服务器，后者用于浏览器。ES6在语言规格的层面上实现了模块功能，而且实现的相当简单，完全可以取代现有的CommonJS和AMD规范，称为浏览器和服务器通用的模块解决方案

背景：

​ JavaScript一直没有模块体系，无法将大程序拆分成互相依赖的小文件，再用简单的方法将它们拼装起来，其他语言都有这项功能，比如Runby的require，Python的import，甚至连CSS都有@import，但是JavaScript没有任何对这方面的支持，这对于开发大型，复杂的项目而言是一个巨大的障碍

​ ES6模块设计思想是想尽量静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量，CommonJS和AMD模块都只能在运行是确定这些东西，比如CommonJS模块就是对象，输入时必须查找对象属性

//CommonJS模块
let {stat,exists,readFile} = require('fs')//等同于
let _fs=require('fs')
let stat=_fs.stat
let exists=_fs.exists
let readfile=_fs.readfile

​ 上面代码的实质是整体加载fs模块（即加载fs所有的方法),生成一个对象（_fs)，然后再从这个对象上读取3个方法，这种加载称为“运行时加载”，因为只有运行时才能得到这个对象，导致完全没办法在编译时进行“静态优化”

​ ES6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入

//ES6模块
import {stat,exists,readFile} from 'fs'

​ 上面的代码的实质是从fs模块加载3个方法，而不加载其他方法，这种加载称为“编译时加载”或者静态加载，即ES6可以再编译时就完成模块加载，效率比CommonJS模块的加载方式高，当然，这也导致ES6模块本身无法被引用，因为它不是对象

​ 由于ES6模块时编译时加载，使得静态分析成为可能，有了它就能进一步拓展JavaScript的语法，比如引入宏和类型检验这些只能靠静态分析实现的功能。

​ 除了静态加载带来的各种好处，ES6模块还有以下的好处

  • 不再需要UMD模块格式，将来服务器和浏览器都会支持ES6模块格式
  • 将来浏览器的新API可以用模块格式提供，不再需要做成全局变量
  • 不再需要对象作为命名空间（Math对象）,未来这些功能可以通过加载模块来提供

22.2 严格模式

ES的模式自动采用严格模式，不过有没有在模块头部加上use strict

严格模式主要有以下限制

  • 变量必须声明后再使用
  • 函数的参数不能有同名属性，否则报错
  • 不能使用with语句
  • 不能对只读属性赋值，否则报错
  • 不能使用前缀0表示八进制，否则报错
  • 不能删除不可删除的属性，否则报错
  • 不能删除变量 delete prop，会报错，只能删除树丛delete global[prop]
  • eval不会再它的外层作用域引入变量
  • eval和arguments不能被重新赋值
  • arguments不会自动反映函数参数的变化
  • 不能使用arguments.callee
  • 不能使用arguments.caller
  • 禁止this指向全局对象
  • 不能使用fn.caller和fn.arguments获取函数调用的堆栈
  • 增加保留字（比如protected,static 和 interface)

❗️ 注意：尤其需要注意this限制，在ES6模块之中。顶层的this指向undefined，即不应该在顶层代码中使用this

22.3 export命令

1 语法

模块功能主要有两个命令组成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能

一个模块就是一个独立文件，该文件内部的所有变量，外部无法获取，如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

  1. 单个语句，逐条暴露

    //profile.js//输出变量
export var firstName='Michael'
export var lastName='Jackson'
export var year=1958//输出函数或者类
export fuction multiply(x,y){return x*y
}

  2. 多条语句，统一暴露（⭐️ 推荐这种写法）

    //profile.jsvar firstName='Michael'var lastName='Jackson'var year=1958export {firstName.lastName,year}

  3. 通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名

    function v1(){}
function v2(){}export {v1 as streamV1,v2 as streamV2,v2 as streamLatestVersion
}

    上面的代码使用as关键字重命名了函数v1和v2的对外接口，重命名后，v2可以用不同的名字输出两次

2. 注意点：

  1. export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系

    //报错
export 1;//报错
var m =1
export m;//正确的写法//写法一
export var m=1//写法二
var m=1
export {m}//写法三
var m=1
export{n as m}

    上面两种写法都会报错，因为没有提供对外的接口，第一种写法直接输出1，第二种写法通过变量m依然直接输出1，1只是一个值，不是接口

    上面3中写法都是正确，规定了对外的接口m

  2. export语句输出的接口与其对应的值是动态绑定关系，即通过该接口可以取到模块内部实时的值

    export var foo='bar';
setTimeout(()=>foo='baz',500)

    上面的代码输出变量foo，值为bar，500ms之后变成baz

  3. export命令可以出现在模块的任何位置，只要处于模块顶层就可以，如果处理块级作用域内，就会报错，下一节的import命令也是如此，这是因为处于条件代码块之中，就没法做静态优化，违背模块设计初衷

    function foo(){export default 'bar' //SyntaxError
}foo()

22.4 import命令

1. 语法

使用export命令定义了模块的对外接口以后，其他的JS文件就可以通过import命令加载这个模块了

//main.js
import {firstName,lastName,year} from './profile'\function setName(element){element.textContent=firstName + ' '+lastName
}

上面的import命令用于加载profile.js文件，并从中输入变量，import命令接受一个对象（用大括号表示），里面指定要从其他模块导入的变量名，大括号中的变量名必须与被导入模块（profile.js)对外接口名称相同

如果想为输入变量重新去个名字，要在import命令中使用as关键字，将输入的变量重命名

import {lastName as surname} from './profile'

如果执行所加载的模块，可以这么写

import 'lodash'

上面的代码仅仅执行lodash模块，但是不会输入任何值

2. 注意点：

  1. import 后面的from 指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略，如果只是模块名，不带有路径，那么必须有配置文件告诉JavaScript引擎该模块的位置

  2. import命令具有提升效果，会提示到整个模块的头部首先执行

    foo()import {foo} from 'my_module'

  3. 由于import是静态执行，所以不能使用表达式和变量，只有在运行是才能得到结果的语法结构

    //报错
import {'f'+'oo'} from 'my_module'//报错
let module='my_module'
import {foo} from module//报错
if(x === 1{import {foo} from 'module1
} else{import {foo} from 'module2'
}

  4. 如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次

22.5 模块的整体加载

处理指定加载某个输出值，还可以使用整体加载（即星号*）来指定一个对象，所有输出值都加载在这个对象上

//circle.jsexport function area(radius){return Math.PI*radius*radius
}export function circumference(radius){return 2*Math.PI*radius
}//加载模块，逐一加载
import {area,circumference} from './circle'console.log('圆面积：'+area(4))
console.log('圆周长：'+circumference(14))//统一加载
import * as circle from './circle'console.log('圆面积：'+circle.area(4))
console.log('圆周长：'+circle.circumference(14))

❗️ 注意：模块的整体加载所在对象（上例是circle）应该是可以静态分析的，所以不允许运行时改变。

import * as circle from './circle'//下面两行都是不允许的
circle.foo='hello'
circle.area=function(){}

22.6 export defaule命令

​ 从前面的例子可以看出来，使用import命令时用户需要知道所要加载的变量名或函数名，否则无法加载，但是，用户肯定希望快速上手，未必由于阅读文档去了解模块有哪些属性和方法

​ 为了方便用户，使其不用阅读文档就能加载模块，可以使用export default命令为模块指定默认输出。

export default function(){console.log('foo')
}import customName from './export-default'
customName() //'foo'

上的代码中，就不需要知道原模块输出的函数名，需要注意的是，这时import命令后面不使用大括号，而关于输出语句的写法可以有下面两种方式

export default function foo(){console.log('foo')
}//或者写成function foo(){console.log('foo')
}export default foo

上面的代码中的foo函数的函数名foo在模块外部是无效的，加载时视为匿名函数

📝 使用细节：

  1. export default命令用于指定模块的默认输出，显然，一个模块只能有一个默认输出，因此，export default命令只能使用一次，所以import命令后面的才不用加大括号，因为只可能对应一个方法

  2. 如果想在一条import语句中同时输入默认方法和其他接口，可以写成下面这样：

    import _,{each,each as forEach} from 'lodsh'//对应的代码语句
export default function(obj){//...
}export function each(obj,iterator,context){//...
}export {each as forEach}

⭐️ export default语句的本质

本质上，export default就是输出一个叫作default的变量或者方法，然后系统允许我们为它取任意名字，所以，下面的写法是有效的

//modules.js
function add(x,y){return x*y
}
export {add as default}//等同于
//export default add//app.js
import{ default as xxx } from 'modules'
//等同于
import xxx from 'modules'

正是因为export default命令其实只是输出一个叫作default的变量，所以它后面不能跟变量声明语句

//正确
export var a=1//正确
var a=1
export default a;//错误
export default var a=1

上面的代码中，export default a的含义是将变量a的值赋给变量default，所以最后一种写法会报错

同样，因为export default本质是将该命令后面的值赋给default变量以后再默认，所以直接将一个值写在export default之后

//正确
export default 42//报错
export 42

22.7 export与import的复合写法

如果模式之中先输入后输出同一个模块，import语句可以与export语句写在一起

export {foo,bar} from 'my_module'//等同于
import{foo,bar} from 'my_module'
export {foo,bar}

上面的代码中，export和import可以结合写在一起写成一行

模块的接口改名和整体输出也可以采用这种写法

//接口改名
export {foo as myFoo} from 'my_module'//整体输出
export * from 'my_module'

📝 使用细节：

  1. 默认接口的写法如下：

    export {default} from 'foo'

  2. 具名接口改为默认接口的写法如下

    export {es6 as default} from './someModule'//等同于
import {es6} from './someModule'
export default es6

  3. 默认接口也可以改为具名接口

    export {default as es6} from './someModule'

  4. 有三种import语句没有对应的复合写法

    import * as someIdentifier from 'someModule'
import someIdentifier from 'someModule'
import someIdentifier,{ namedIentifier } from 'someModule'

22.8 模块的继承

模块之间也可以继承

假设有一个circleplus模块继承了circle模块

//circleplus.js
export * from 'circle'
export var e=2.718
export default function(x){return Math.exp(x)
}

上面的export * 表示输出circle模块的所有属性和方法

❗️ 注意：export命令会忽略circle模块的default方法，之后，又输出了自定义的e变量和默认方法

加载上面模块的写法

import * as math from 'circleplus'
import exp from 'circleplus'
console.log(exp(math.e))

上面代码中的import exp表示，将circleplus模块的默认方法加载为exp方法

22.9 跨模块常量

前面介绍const 命令的时候说过，const声明的常量只能在当前代码块内有效，如果想设置跨模块的常量（即跨多个文件），或者说一个值、要被多个模块共享，可以采用下面的写法

//constants.js模块
export const A=1
export const B=2
export const C=3//test1.js模块
import * as constants from './constants'
console.log(constants.A) //1
console.log(constants.B) //2//test2.js模块
import {A,B} from './constants'
console.log(A) //1
console.log(C) //3

🌻 小建议：如果要使用的常量非常多，可以建立一个专门的constants目录，将各种常量写在不同的文件里面并保存在该目录下

export const db={url:'https://www.csdn.net/',admin_username:'夜宵饽饽',admin_password:'xxxxxxxx'
}//constants/user.jd
export const users=['root','admin','staff','cex','chief']

然后将这些文件输出的常量合并在index.js中

//constants/index.js
export {db} from './db'
export {user} from './users'

使用的时候，直接加载index.js即可

//script.js
import {db,users} from './constants'

22.10 import()

22.10.1 简介

import命令会被JavaScript引擎静态分析，先于模块内的其他模块执行（称为连接更合适），所以下面的代码会报错

//报错
if(x === 2){import MyModule from './myModule'
}

上面的代码中，引擎处理import语句是在编译时，这时不会分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误

这样的设计固然有利于编译器提高效率，但也导致无法在运行时加载模块。在语法上，条件加载不可能实现。

因此，有一个提案（现已经实现），建议引入import()函数，完成动态加载。

import(specifier)

import函数的参数specifier指定要加载的模块的位置，import命令能够接受什么参数，import()函数就可以接受什么参数，后者为动态加载。

import()函数返回一个Promise对象，下面是一个例子

const main=document.querySelector('main')import('./section-module/${someVariable}.js')
.then(module => {module.loadPageInto(main)
})
.catch(err => {main.textContent=err.message
})

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用，它是运行时执行，也就是说，运行到这一句便会加载模块。另外，import()函数所加载的模块没有静态连接关系，这点也与import语句不相同

22.10.2 适用场合

  1. 按需加载

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

  2. 条件加载

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

  3. 动态加载模块路径

    import(f()).then(...)
22.10.3 注意点

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

  2. 如果模块有default输出接口，可以用参数直接获得

    import('./myModule.js').then(myModule => {console.log(myModule.default)
})//也可以使用具名形式输入
import('./myModule.js').then(({default:thenDefault}) => {console.log(thenDefault)
})

  3. 如果想同时加载多个模块，可以采用Promise.all写法

    Promise.all([import('./amo.js'),import('./bmo.js'),import('./cmo.js')
])
.then(([amo,bmo,cmo])=>{})

  4. import也可以用在async函数中

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/194665.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot实现IP地址归属地查询

SpringBoot实现IP地址归属地查询

SpringBoot实现IP地址归属地查询 功能特性 标准化的数据格式 每个 IP 数据段的 region 信息都固定了格式： 国家|区域|省份|城市|ISP，只有中国的数据绝大部分精确到了城市，其他国家部分数据只能定位到国家，后前的选项全部是 0。…
阅读更多...
OpenCV图像纹理

OpenCV图像纹理

LBP描述 LBP（Local Binary Pattern，局部二值模式）是一种用来描述图像局部纹理特征的算子；它具有旋转不变性和灰度不变性等显著的优点。它是首先由T. Ojala, M.Pietikinen, 和D. Harwood 在1994年提出，用于纹理特征提取…
阅读更多...
第四代智能井盖传感器：万宾科技助力城市安全

第四代智能井盖传感器：万宾科技助力城市安全

在繁华喧嚣的城市里人来人往，井盖作为基础设施的一个组成部分在路面上分布范围广。然而这些看似普通的井盖却存在着位移、水浸的风险，可能给我们的生活带来诸多不便，更会威胁到我们的人身安全。如何有效监测和管理井盖的状态，成为…
阅读更多...
【云原生-Kurbernetes篇】K8s的存储卷/数据卷+PV与PVC

【云原生-Kurbernetes篇】K8s的存储卷/数据卷+PV与PVC

这是一个目录标题 一、Kurbernetes中的存储卷1.1 为什么需要存储卷？1.2 存储卷概述1.2.1 简介1.2.2 volume字段 1.3 常用的存储卷类型1.3.1 emptyDir（临时存储卷）1.3.2 hostPath（节点存储卷）1.3.3 nfs1.3.4 cephfs 二、…
阅读更多...
RocketMQ的适用场景有哪些？

RocketMQ的适用场景有哪些？

程序员的公众号：源1024，获取更多资料，无加密无套路！ 最近整理了一波电子书籍资料，包含《Effective Java中文版 第2版》《深入JAVA虚拟机》，《重构改善既有代码设计》，《MySQL高性能-第3版》&…
阅读更多...
UE基础篇六：音频

UE基础篇六：音频

导语： 通过实现一个小游戏，来学会音频，最后效果 入门 下载启动项目并解压缩。通过导航到项目文件夹并打开SkywardMuffin.uproject来打开项目。 按播放开始游戏。游戏的目标是在不坠落的情况下触摸尽可能多的云。单击鼠标左键跳到第一朵云。 游戏很放松，不是吗？为了强调…
阅读更多...
php接口api数据签名及验签

php接口api数据签名及验签

api数据签名作用&#xff1a;通过使用签名可以验证数据在传输过程中是否被篡改或修改。接收方可以使用相同的签名算法和密钥对接收到的数据进行验证&#xff0c;如果验证失败则表明数据被篡改过 1、数据发送方进行接口签名并传输签名字段 <?php // 请求URL $url "h…
阅读更多...
Python采集某网站数据实现简单可视化效果, webpack Js逆向解密

Python采集某网站数据实现简单可视化效果, webpack Js逆向解密

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 环境使用 : Python 3.8 Pycharm nodejs 模块使用: requests --> pip install requests execjs --> pip install PyExecJS csv 采集网站的数据如何去实现: 一. 数据来源分析 <√> 明确需求: 明确采集的网…
阅读更多...
如何使用ArcGIS Pro制作粉饰效果

如何使用ArcGIS Pro制作粉饰效果

在地图上&#xff0c;如果某个部分比较重要&#xff0c;直接的制图不能将其凸显出来&#xff0c;如果想要突出显示重要部分&#xff0c;可以通过粉饰效果来实现&#xff0c;这里为大家介绍一下方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所使用的数据是从水经微图…
阅读更多...
vue2项目修改编译巨慢

vue2项目修改编译巨慢

前言&#xff1a;我们的一个vue项目在给新同事后他说编译贼慢&#xff0c;一个小修改项5分钟才能自动编译成功&#xff0c;我把项目放到新电脑上也巨慢&#xff0c;升级了nodejs好使了一些&#xff0c;但还是慢&#xff0c;最后引入webpack后巨快&#xff0c; 在项目的package…
阅读更多...
如何在 Linux 上部署 RabbitMQ

如何在 Linux 上部署 RabbitMQ

如何在 Linux 上部署 RabbitMQ 文章目录 如何在 Linux 上部署 RabbitMQ安装 Erlang从预构建的二进制包安装从源代码编译 Erlang RabbitMQ 的安装使用 RabbitMQ Assistant 连接 RabbitMQ Assistant 是一款优秀的RabbitMQ 可视化管理工具&#xff0c;提供丰富的管理功能。下载地址…
阅读更多...
ClickHouse的表引擎

ClickHouse的表引擎

1 表引擎的使用 表引擎是ClickHouse的一大特色。可以说&#xff0c; 表引擎决定了如何存储表的数据。包括&#xff1a; 数据的存储方式和位置&#xff0c;写到哪里以及从哪里读取数据。支持哪些查询以及如何支持。并发数据访问。索引的使用&#xff08;如果存在&#xff09;。是…
阅读更多...
使用IDEA 将Eclipse java工程转为maven格式

使用IDEA 将Eclipse java工程转为maven格式

使用IDEA 将Eclipse java工程转为maven格式 ①使用idea打开项目&#xff0c;在项目根目录下右键选择 Add Framework Support 选择 maven &#xff0c;引入maven ②找到项目中的.classpath文件或者lib目录 根据.classpath文件或者lib目录中列举的jar包名&#xff0c;将其依次手…
阅读更多...
大模型在数据分析场景下的能力评测｜进阶篇

大模型在数据分析场景下的能力评测｜进阶篇

做数据分析&#xff0c;什么大模型比较合适&#xff1f; 如何调优大模型&#xff0c;来更好地做数据计算和洞察分析&#xff1f; 如何降低整体成本&#xff0c;同时保障分析体验&#xff1f;10月25日&#xff0c;我们发布了数据分析场景下的大模型能力评测框架&#xff08;点击…
阅读更多...
【Web】在前端中，HTML＜meta＞标签

【Web】在前端中，HTML＜meta＞标签

<meta>实例 <head><meta name"description" content"免费在线教程"><meta name"keywords" content"HTML,CSS,XML,JAVASCRIPT"><meta name"author" content"runoob"><meta char…
阅读更多...
静态共享代理和静态独享有哪些区别？怎么选择？

静态共享代理和静态独享有哪些区别？怎么选择？

在软件开发中&#xff0c;静态共享代理&#xff08;Static Proxy&#xff09;和静态独享&#xff08;Monostatic&#xff09;是两种常见的软件设计模式。这两种模式在实现方式、使用场景以及优缺点上存在一定的差异&#xff0c;下面将详细介绍它们的区别以及如何进行选择。 一、…
阅读更多...
CTF-PWN-堆-【前置知识】

CTF-PWN-堆-【前置知识】

CTF-PWN-堆 堆申请堆块main_areanabrk&sbrk函数mallocfreefree后top chunk 堆 由malloc alloc realloc 函数分配 chunk的前指的是地址低的&#xff0c;chunk的高指的是地址高的 申请堆块 ptmalloc2堆管理器&#xff1a; 通俗的讲就是相当于一个”中间商”&#xff0c;在…
阅读更多...
鸿蒙原生应用开发-折叠屏、平板设备服务卡片适配

鸿蒙原生应用开发-折叠屏、平板设备服务卡片适配

一、多设备卡片适配原则 为不同尺寸的卡片提供不同的功能 在卡片开发过程中请考虑适配不同尺寸的设备&#xff0c;特别是在折叠屏和平板设备上&#xff0c;设备屏幕尺寸的变化直接影响了卡片内容的展示。请发挥想象力设计具有自适应能力的卡片&#xff0c;避免在卡片内容不做…
阅读更多...
清理mac苹果电脑磁盘软件有哪些免费实用的？

清理mac苹果电脑磁盘软件有哪些免费实用的？

苹果电脑是一款非常流行的操作系统设备&#xff0c;其稳定性和性能一直备受用户的喜爱。然而&#xff0c;随着时间的推移&#xff0c;我们使用电脑的过程中可能会发现磁盘上存储的数据越来越多&#xff0c;这不仅占用了宝贵的硬盘空间&#xff0c;还可能导致电脑运行变慢。因此…
阅读更多...
shell脚本学习06（小滴课堂）

shell脚本学习06（小滴课堂）

fi是结束循环的意思。 这里脚本1&#xff1a;代表着脚本和1.txt文件处于同一目录下。 脚本2为绝对路径的写法。 在使用./进行启动时&#xff0c;我们需要给文件赋予执行权限。 把文件名改为2.txt: 什么都没有返回&#xff0c;说明文件已经不存在。 可以使用脚本2 if else的方式…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023