export default 和 export 的使用方式

node中导入模块:var 名称 = require('模块标识符')

node中向外暴露成员的形式:module.exports = {}

在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块

ES6中导入模块,使用 import 模块名称 from '模块标识符'    import '表示路径'

import *** from *** 是ES6中导入模块的方式

在ES6中,使用export default 和 export 向外暴露成员

例如:

// test.js
export default {
    name: 'zs',
    age: 20
}

或是

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info

在main.js中接收,test.js使用export default 向外暴露的成员

import person from './test.js'
console.log(person);

注意:

1、export default 向外暴露的成员,可以使用任意变量来接收

2、在一个模块中,export default 只允许向外暴露一次

3、在一个模块中,可以同时使用export default 和export 向外暴露成员

4、使用export向外暴露的成员,只能使用{  }的形式来接收,这种形式,叫做【按需导出】

5、export可以向外暴露多个成员,同时,如果某些成员,在import导入时,不需要,可以不在{ }中定义

6、使用export导出的成员,必须严格按照导出时候的名称,来使用{ }按需接收

7、使用export导出的成员,如果想换个变量名称接收,可以使用as来起别名

例如:

// test.js
var info = {
    name: 'zs',
    age: 20
}
export default info

export var title = '小星星'

export var content = '哈哈哈'

在main.js中接收,test.js使用export default 和 export 向外暴露的成员

import person, {title, content as content1} from './test.js'
console.log(person);
console.log(title + '=======' + content1);

 

 

### 出口方式的区别 在Node.js环境中,`module.exports` 是用于导出模块功能的主要方法。任何被 `module.exports` 赋值的内容都可以通过 `require()` 方法引入到其他文件中[^1]。 对于ES6模块化标准而言,`export default` 提供了一种更加直观的方式去定义默认出口,默认导出可以是没有名字的函数、类、对象或原始数据类型。接收方可以通过任意名称导入这个默认导出项[^2]。 #### 使用案例对比 ##### Node.js 中使用 `module.exports` 当采用CommonJS风格编写代码时,在Node.js项目里通常会看到如下形式: ```javascript // math-utils.js function add(a, b) { return a + b; } module.exports.add = add; // 导出add函数 ``` 要从另一个JavaScript文件访问此函数,则需这样做: ```javascript const { add } = require('./math-utils'); console.log(add(2, 3)); // 输出5 ``` ##### ES6 Modules 中使用 `export default` 而在遵循ESM(ECMAScript Module)语法的情况下,同样的逻辑可以用更简洁的形式表达出来: ```javascript // mathUtils.js export default function add(a, b) { return a + b; } ``` 此时如果要在别的地方调用该函数的话,应该这样写: ```javascript import add from './mathUtils'; console.log(add(2, 3)); // 同样输出5 ``` 值得注意的是,在同一个文件内只能有一个 `export default` 声明;而 `module.exports` 则允许设置多个属性来实现多条目导出[^3]。 #### 多重导出支持 除了单一默认导出外,ES6还提供了命名导出的功能,使得可以从单个文件中导出多个变量、函数或类,并且这些导出会保留它们各自的名称。这与仅能指定一个全局对象作为返回值的传统 CommonJS 形成鲜明对照。 例如,下面展示了如何利用命名导出特性在一个文件中暴露两个独立的方法给外部使用者: ```javascript // operations.js export function multiply(x, y) { return x * y; } export function divide(x, y) { if(y === 0){ throw new Error('Division by zero!'); } return x / y; } ``` 相应的导入语句将会是这样的样子: ```javascript import {multiply, divide} from './operations'; try{ console.log(multiply(8, 4)); console.log(divide(8, 4)); }catch(error){ console.error(error.message); } ```
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值