🗒️JS模块的导出和引入
2023-9-12
| 2024-10-24
0  |  阅读时长 0 分钟
date
Sep 12, 2023 06:05 AM
type
status
slug
summary
tags
category
updated
Oct 24, 2024 12:52 PM
icon
password

模块规范

在JavaScript中,有两种常见的模块化规范:CommonJS和ES6。
  • CommonJS是Node.js的默认规范,它使用require和module.exports来导入和导出模块。
  • ES6是ECMAScript 2015的标准,它使用import和export来导入和导出模块。这两种规范有什么概念和区别呢?我们来看看。

概念和区别

  1. 首先,概念上,CommonJS是基于值的导出和导入,也就是说,当我们导出一个模块时,我们实际上是导出了一个对象的拷贝。当我们导入一个模块时,我们实际上是获取了一个对象的引用。这意味着,如果我们在导出后修改了模块内部的值,那么导入的模块也会受到影响。例如:
    1. 可以看到,当我们在b.js中修改了a的值后,c.js中导入的a并没有改变,因为它们是不同的对象引用。
      而ES6是基于名称的导出和导入,也就是说,当我们导出一个模块时,我们实际上是导出了一个变量的声明。当我们导入一个模块时,我们实际上是创建了一个变量的绑定。这意味着,如果我们在导出后修改了模块内部的值,那么导入的模块也会同步更新。例如:
      可以看到,当我们在b.js中修改了a的值后,c.js中导入的a也跟着改变了,因为它们是同一个变量绑定。
  1. 其次,区别上,CommonJS是同步的加载方式,也就是说,当我们使用require时,它会立即执行模块代码,并返回结果。这适合于服务器端的环境,因为服务器端的模块通常都已经安装好了,不需要等待网络请求。但是,在浏览器端的环境中,这种方式就不太合适了,因为浏览器端的模块通常需要从远程服务器获取,如果使用同步的方式加载,就会造成页面阻塞和性能下降。
    1. 而ES6是异步的加载方式,也就是说,当我们使用import时,它会返回一个promise对象,并且不会阻塞后面的代码执行。这适合于浏览器端的环境,因为浏览器端的模块可以利用网络请求来并行加载,并且不会影响页面渲染和交互。但是,在服务器端的环境中,这种方式就需要额外的配置和工具来支持。
      总之,CommonJS和ES6都是JavaScript的模块化规范,它们有不同的概念和区别。在实际开发中,我们需要根据不同的场景和需求来选择合适的规范,并且可以使用一些工具和转换器来兼容不同的规范。
       
  • Javascript
  • TypeScript
  • 基于esbuild搭建组件开发框架esbuild v19版本构建本地服务
    Loading...