导出与导入(require,import,module.exports,exports,export,export default)

一、不同点

1、加载时间不同

require:

        运行时加载

import:

        编译时加载(效率高)

        【先写调用,后写import导入不报错】

        【加载时机的原因,让import会提升到整个文件的头部】

2、导入方法不同

require:

        动态加载,可以写在任何地方

import:

        静态导入,只能写在代码的最外层,不可以写在函数体中,否则报错

3、导入模式不同

require导入的变量

        在源文件中更改后,拿到的还是初始化的值

        ——(对基本数据类型的复制,对引用类型数据的浅拷贝)

import导入的变量

        在源文件中更改后,拿到的的值也会改变(对值的引用,也就是只引用定义)

 4、使用注意事项

node中

        常使用require/exports./module.exports来导出

        如使用import/export/export default导出需要给package.json中添加type:module字段

script中

        如引入脚本,无需配置type

        如引入模块,模块若由export default或export导出,要在script标签配置type="module"

二、require

a:exports.xxx导出方式

// ei-export.js
exports.add = (x, y) => x + y;
exports.username = "昔冰";
const ex = require("./ei-export");
console.log(ex); 
// { add: [Function (anonymous)], username: '昔冰' }

b:module.exports={}导出方式

// ei-export.js
const add = function (x, y) {
  return x + y;
};
const username = "xibing";
module.exports = { add, username };
const ex = require("./ei-export");
console.log(ex); 
// { add: [Function (anonymous)], username: '昔冰' }

const { add } = require("./ei-export");
console.log(add(3, 5)); 
// 8

三、import

a:export逐个导出

// ei-export.js
// export对于需要暴露的数据放到一个对象中进行对外导出
const add=(x,y)=>x+y
const username="昔冰"
export {add,username}


// 或挨个对外导出
export const add = (x, y) => x + y;
export const username = "昔冰_G";
import { username } from "./ei-export.js";// 一定要指明文件后缀,否则报错internalBinding('errors').triggerUncaughtException(
console.log(username);// 昔冰

b:export.default默认导出

// ei-export.js
// export存在默认导出
export const add = (x, y) => x + y;
export const username = "昔冰_G";
const userInfo = {
  name: "xibing",
  age: 18,
};
export default { // 一个文件中只能有一个默认导出
  userInfo,
};
// 指定了则按export对应的来
import { add, username } from "./ei-export.js"; 
console.log(add(3, 5), username); // 8 昔冰_G

// 如果不指定导入对象则以【默认】导出对象export.default对应的为准
import a from "./ei-export.js";
console.log(a);
// { userInfo: { name: 'xibing', age: 18 } }

c:import * as

// ei-export.js
export const add = (x, y) => x + y;
export const username = "昔冰_G";
const userInfo = {
  name: "xibing",
  age: 18,
};

// export默认导出
export default {
  userInfo,
};
import * as myModule from "./ei-export.js";
console.log(myModule); 
// add [Function: add]
// username "昔冰_G"
// default {userInfo:{name:"xibing",age:18}}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值