首页 > 其他分享 >记录--为什么 export 导出一个字面量会报错,而使用 export default 就不会报错?

记录--为什么 export 导出一个字面量会报错,而使用 export default 就不会报错?

时间:2024-01-17 18:46:22浏览次数:22  
标签:变量 -- 句柄 导出 js --- export 报错

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

核心

其实总的来说就是 export 导出的是变量的句柄(或者说符号绑定、近似于 C 语言里面的指针,C++里面的变量别名),而 export default 导出的是变量的值。

需要注意的是:模块里面的内容只能在模块内部修改,模块外部只能使用。esModule在语法层面做了一层浅层的保护(即将import导入的变量声明为常量)

而变量的句柄必须通过 var、let、const、function 这些关键字声明才可以由 js 引擎生成,而值(或者说数据)可以通过变量运算或者字面量直接生成。

下面是测试用例:

// a.js
export let a = 'a'

export let objA = { a: 'a' }

let defaultA = 1
export default defaultA

export function fn(str) {
    a = str
    defaultA = str
}
// test1.js
import b, { a, fn, objA } from './a.js'
console.log(a, '---', b, '---', objA.a, '---', 'test1.js')
setTimeout(() => {
    objA.a = 'hello world'
    fn('hello world')
    console.log(a, '---', b, '---', objA.a, '---', 'test1.js')
})
// test2.js
import b, { a, objA } from './a.js'
console.log(a, '---', b, '---', objA.a, '---', 'test2.js')
setTimeout(() => {
    console.log(a, '---', b, '---', objA.a, '---', 'test2.js')
}, 100)
// main.js
import './test1.js'
import './test2.js'

运行main.js,输出结果如下:

 

分析

  • 通过 a 值的变化可以看出,在 test1.js 中的修改会影响到 test2.jsa 的值,验证我们说的导出句柄这个观点。
  • 通过 b 的运行结果可以验证 export default 导出变量的值的观点。
  • 通过 objA.a 的运行结果可以验证浅层保护的观点,其实和const obj = {},我们可以修改 obj 的属性,只要不对 obj 重新赋值都是允许的是同一个逻辑。

如果看到这里你完全理解上面的内容,那么下面的内容就建议你跳过了,因为下面是一些细节的展开和补充,对你来说可能会有些啰嗦和浪费时间。如果上面的内容你还不是很理解,那么可以再看看下面的内容,看看是否对你有帮助。

那我们就按照以下几个方面具体来讲讲这个问题,顺便再做一些扩展和补充。

  • 1、句柄和值
  • 2、ES module 和 commonJs
  • 3、关于 Tree Shaking 的思考

句柄和值

其实句柄这个词我个人理解为权限,获得句柄就是获得某种东西的操作权限,比如拿到文件句柄就可以对文件进行读写操作。其实怎么理解都可以,只不过我引用了句柄这个词语。我想说明的是 export 导出的是一个变量的句柄(或者说是引用),这个概念类似于 C 语言里面的指针,C++里面的变量别名。也就是说,导入模块在拿到这个变量时,对这个变量的操作实际上是在操作原来的导出变量本身。

而值其实就是一份数据,也可以理解成 export default 导出的是一份数据拷贝。

扩展

一、js 中声明变量的几种方式

  • var、let、const
  • function
  • class
  • import(准确来讲并没有创建新的变量,但是这个关键字导入了被导入模块的变量的引用,而在 js 引擎层面并没有声明新的变量)

注意:

// main.js
export { default as a } from 'xxx/a.xxx'

这种情况下,a 这个变量在 main.js 这个模块中是访问不到的。如果想要在 main.js 这个模块中访问到 a 模块,需要使用 import 语句进行导入,再使用 export 暴露给外界。

// main.js
import a from 'xxx/a.xxx'
export a

二、堆栈内存

  • 堆内存:存放引用类型的数据,例如对象、数组等
  • 栈内存:存放基本数据类型和引用类型的地址(存放占用空间固定的数据

ES module 和 CommonJS

1、实现层面

ES module 和 CommonJS 比较大的一个区别就是一个是官方规范,一个是社区规范。官方规范自然就能的到 js 语法层面的实现支持,而社区规范只能通过在现有的语法基础上进行扩展来实现。

2、单独导出和默认导出

其实 CommonJS 的实现也特别简单,看一眼 webpack 的打包结果就知道了。核心原理就是将一个个模块放到函数中运行,这样利用函数作用域的特点,就可以实现模块之间的环境隔离。所以在 CommonJS 中,module.exports 和 exports 本质上就是同一个对象,这个对象就是这个模块(函数)运行时 return 的对象。

而 ES module 则不然,export 和 export default 有着本质的差别,那就是一个导出变量的句柄,一个导出变量的值。

扩展(关于 export 导出的细节)

关于 export 导出,出了这种下面常用的方式:

// a.js
export let a = 1

还有一种方式:

// b.js
let b = 1
export { b }

而这两种模块的导入方式都是一样:

import { a } from 'xx/a.js'
import { b } from 'xx/b.js'

既然前面说了,export 导出的是变量的句柄,那么显然下面这种方式是要报错的:

// b.js
export { b: 1 } // SyntaxError: Unexpected token ':'

因为导入方式一样,那么很自然的我就想测试一下,我按照下面这种方式来测试一下看会不会产生冲突

let b = 1
export { b }
export let b = 2 // SyntaxError: Identifier 'b' has already been declared

很显然使用 let、const 这样的关键字会产生一个重复定义的冲突,那么我们再试一下另外一个可以让我们多次重复声明同一个变量的 var 关键字。

var b = 1
export { b }
export var b = 2 // SyntaxError: Duplicate export of 'b'
 

改成 var 之后,不会在一开始编辑器就提示我们错误了,而是在运行时,报一个重复导出的错误。所以通过测试,这两种 export 导出方式还是不会产生冲突的。

3、动态导入

CommonJS 动态导入就很简单,其实就是运行函数。其实 CommonJS 导入本身就是在运行函数,所以动态或者静态其实都一样。

const a = require('xxx/a.js')
ES module 动态导入,那就需要语法的支持,使用下面这种语法:
const a = await import('xxx/a.js')

关于 Tree Shaking 的思考

我们知道,ES module 是支持 Tree Shaking 的,但是 CommonJS 是不支持的。

其实 Tree Shaking 面临的核心困难就是怎么确定一个函数或者模块它是否包含副作用。如果写的都是纯函数,那么 Tree Shaking 其实是很实现的。那么像有些函数,在编译时直接可以运行函数得到调用结果,进而在生产运行时,直接省去求值的耗时。

所以 Tree Shaking 的核心是在于副作用的检测,特别是在复杂的模块引用关系里面,确定每个模块里的某些内容是否存在副作用。另外为了更好的 Tree Shaking,比较推荐的方案是使用 ES module,并且使用 export 导出,这方式可以更好的进行 Tree Shaking。

本文转载于:

https://juejin.cn/post/7315681269702541323

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

标签:变量,--,句柄,导出,js,---,export,报错
From: https://www.cnblogs.com/smileZAZ/p/17970724

相关文章

  • ElastAlert 安装调试
    一、ElastAlert概述ElastAlert是一个开源的警报框架,由Yelp开发,它可以从Elasticsearch中提取数据并根据预定义的规则生成警报。ElastAlert可用于监控您的日志和时间序列数据,以便在发生异常、错误或其他有趣的模式时立即采取行动。ElastAlert能够与许多通知服务(如电......
  • 多项式计数杂谈
    多项式计数杂谈-command_block的博客-洛谷博客command_block的博客导航切换首页文章command_block的博客多项式计数杂谈postedon2020-02-1118:16:01|under算法|Ox00.前面的话&前置芝士本文Markd......
  • ES--自动补全查询
    elasticsearch提供了CompletionSuggester查询来实现自动补全功能。这个查询会匹配以用户输入内容开头的词条并返回。为了提高补全查询的效率,对于文档中字段的类型有一些约束:参与补全查询的字段必须是completion类型。字段的内容一般是用来补全的多个词条形成的数组。比......
  • springMvc如何解决请求中文乱码问题
    方式一:解决get请求中文乱码问题  每次请求前用encode对url进行编码方式二:在应用服务器上配置URL编码格式,在tomcat配置文件server.xml增加encodeURL编码格式,然后重启解决post请求方式一:使用spring提供的编码过器 在web.xml文件配置编码过lu器,增加一下配置: <web-ap......
  • TCP 拥塞控制对数据延迟的影响
    哈喽大家好,我是咸鱼今天分享一篇文章,是关于TCP拥塞控制对数据延迟产生的影响的。作者在服务延迟变高之后进行抓包分析,结果发现时间花在了TCP本身的机制上面:客户端并不是将请求一股脑发送给服务端,而是只发送了一部分,等到接收到服务端的ACK,然后继续再发送,这就造成了额外的RTT......
  • 帆软添加行序号
    序号设置如下图所示,在D2单元格中,输入公式 =seq(),左父格设置为B2,即可显示行序号。注:若数据是列表显示,也可以使用=&B2进行统一编号。若序号在最左侧,那么将seq()这列的左父格设置为右侧的单元格,右侧这个单元格的左父格设置成无即可,比如此处如果设置成地区,那么将地区的左父格......
  • arr
    usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;namespaceAlgorithm{internalclassMyList{privateint[]arr;privateintarrCapacity=10;privateint......
  • LinkedHashMao & LinkedHashSet源码阅读
    目录简介模型代码分析成员变量方法补充-LinkedHashSet总结参考链接本人的源码阅读主要聚焦于类的使用场景,一般只在java层面进行分析,没有深入到一些native方法的实现。并且由于知识储备不完整,很可能出现疏漏甚至是谬误,欢迎指出共同学习本文基于corretto-17.0.9源码,参考本文时......
  • forEach控制器怎么用
    最近,Apipost对自动化测试进行了优化,新增foreach控制器。这个新功能的引入为自动化测试带来了更高的效率和灵活性。本文将介绍Apipost的foreach控制器,解释其用途和优势,帮助您更好地利用这一功能提升自己的测试工作。什么是foreach控制器?Foreach控制器允许您在测试用例中迭代执行......
  • net6 webapi swagger 中文\版本说明
    1、新建ApiVersionInfo.cs版本文件;///<summary>///API版本///</summary>publicclassApiVersionInfo{publicstaticstring接口版本1;}右键编辑项目文件;<PropertyGroup><GenerateDocumentationFile>true</GenerateDocumentationFile>......