有关 import export 的介绍

export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

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

  • export {xxx,xx}
//导出(a.js)
var sex="boy";
var echo=function(value){
  console.log(value)
}
export {sex,echo}  
//导入(b.js)
import {sex,echo} from "./a.js" 

通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到。
不能写成export sex这样的方式,如果这样就相当于export “boy”,外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。

  • export default
//导出(a.js)
var sex="boy";
export default sex
//导入(b.js)
import any from "./a.js" 
console.log(any)  // boy

原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。

其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。

本质上,a.js文件输出一个叫做 default 的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含

注意:
export
  • 暴露的对象必须加{},它表示暴露的是一个接口。如果不加的话,它表示暴露的是一个值,这样就会报错。
  • as关键字,可以给暴露的对象换名字,同一个对象可以多次使用as关键字,用不同的名字暴露出去。
  • export命令必须处于模块的顶层,位置无所谓。
  • export暴露的对象是动态绑定关系,如果发生变化,外部引用也会变化。
import
  • 引用的文件可以省略.js后缀。
  • 可以使用as关键字。
  • import具有变量提升的效果,所以放在引用的对象后面也无所谓。
  • import接收对象是否用花括号括起来,要看对象的暴露方式。默认输出就不用加花括号,如果是export,就要加花括号。
export default
  • export default命令在一个模块中只能使用一次,因为是默认暴露值,所以默认的输出值只能是唯一。
  • 引用的时候不需要知道暴露的对象名,可以给他起随意的名字。
  • 引用的时候不需要加花括号。
同编程语言中,`import` 和 `export` 有着同的使用方法和作用。 ### JS/TS 中的 importexport 在 JS/TS 里,`import` 和 `export` 用于实现模块化编程。调用时可统一使用 `import {xxx,xxx2,xxx3} from 'xxx'` 的形式,若只用到其中一个变量或函数,仅 `import` 所需的即可,如 `import {a1} from './A'` [^1]。 ### ES6 中的 importexportES6 模块化编程中,`import` 和 `export` 是核心概念。模块化有一次性加载、局部作用域、导出和导入四个基本规则。每个模块只会被加载一次,后续请求直接从内存中获取;模块内的变量、函数仅在模块内部生效,会污染全局作用域;通过 `export` 关键字暴露模块中的变量、函数或类;通过 `import` 关键字从其他模块中导入已导出的内容 [^2]。 `export` 有命名导出等用法,且 `export` 与 `export default` 虽很多时候能实现同样目的,但用法有区别。通过 `export` 方式导出,在导入时要加 `{ }`,`export default` 则需要。使用 `export default` 命令,能为模块指定默认输出,无需知道所要加载模块的变量名 [^2][^3]。 ### C 语言混合编程中的 importexport 在 C 语言混合编程里,`IMPORT` 和 `EXTERN` 伪操作告知编译器当前符号在本源文件中定义,而是在其他源文件中定义。`IMPORT` 伪操作论本源文件是否实际引用该符号,都会将其加入到本源文件的符号表中;而 `EXTERN` 伪操作只有在本源文件实际引用该符号时,才会将其加入到符号表中。`IMPORT` 伪操作的语法格式为 `IMPORT 符号 {[WEAK]}`,使用 `[WEAK]` 选项后,若符号在所有源文件中都未定义,编译器会产生错误信息,同时也会到未被 `INCLUDE` 进来的库中查找该符号。若连接器在连接处理时能解析该符号,且 `IMPORT` 伪操作中未指定 `[WEAK]` 选项,连接器会报告错误;若指定了 `[WEAK]` 选项,会根据同情况进行处理 [^4]。 ### 代码示例 以下是 JS 中使用 `import` 和 `export` 的示例: ```javascript // 模块 A // 命名导出 export const a1 = 1; export const a2 = 2; // 模块 B import { a1, a2 } from './A'; console.log(a1, a2); // 模块 C // 默认导出 export default function() { console.log('This is a default export'); } // 模块 D import defaultFunction from './C'; defaultFunction(); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值