module.exports和exposts和export以及import和require的区别

建议看这篇文章的同学具有js基础,对es6了解,熟悉引用数据类型的存储,过程中我并不会说过多语言去描述这些方法,因为说再多语言解释不如一串代码更容易让同学理解,同学们在学习过程中一定要动手敲代码,将每一步打印出来更便于理解学习,有什么我没描述清楚或者有不明白的地方可以告诉我哦~

export和import

这两个方法是es6新增的模块化语法,学习过vue的同学一定不少使用这两个方法

1.export

这个方法是js中模块用来对外暴露方法或数据的,他有三种对外暴露的方式,分别是统一暴露,分别暴露以及默认暴露,当然引入的方式也不是只有一种,下面给大家一一介绍

下面是使用统一暴露

let name = "张三";
let age = 18;
let height = 180;
let weight = 80;
export { name, age, height, weight };

下面是分别暴露

export let name = "张三";
export let age = 18;
export let say = function () {
  console.log("hello");
};

下面是默认暴露,一个模块中只有一个export default,即使你写多个也只会有一个export default会暴露出去,写多了还可能会导致webpack编译不通过

export default {
  name: "张三",
  age: 18,
  say: function () {
    console.log("我是" + this.name + ",今年" + this.age + "岁");
  },
};

2.import 还用export向外暴露其实暴露出来就是一个对象,我们使用import导入,导入的也是这个对象,既然是对象name就可以使用es6的对象解构,下面看第一种导入的方式

通用导入方式,该方式导入的mudule这个对象,模块暴露出来的数据都在这个对象内,如果暴露使用的是默认暴露(export default)这个语法,那我们还需要.default才能拿到模块对外暴露的数据

import * as demo from "目标模块路径";
console.log(demo);//module对象,其内保存模块对外暴露的数据
//如果使用export default对外暴露数据时
console.log(demo.default)//其内保存模块对外暴露的数据

es对象解构方式导入,如下面代码,即使目标模块中对外暴露的不止name这一个属性,但是我们导入时只解构出name这个属性,其余的数据并不会解构出来

import { name } from "目标模块路径";
console.log(name);

默认导入方式 当模块对外暴露使用的是export default默认暴露是就可以使用默认导入,使用统一暴露和分别暴露是不能使用默认导入这种方式的

import demo from "./demo.js";
console.log(demo);

module.exports、exposts、require

如果是了解过NodeJS的同行,对这三个方法一定不会陌生,NodeJS的模块就是通过这三个方法导入和导出的,module.exports和exports是对外共享模块中的方法和数据,require是导入模块对外暴露的方法和数据

  1. module.exports

向外共享模块中的方法,module.exports实际上就是一个空对象,向外共享的也是这个空对象,说再多不如直接上代码更能让大家理解

下面这串代码向外共享的是name是李四的那个对象,name是张三的那个对象并不会对外共享

module.exports = {
  name: "张三",
  sayName: () => {
    console.log("我是张三");
  },
};
module.exports = {
  name: "李四",
  sayName: () => {
    console.log("我是李四");
  },
};

下面这串代码我们只是想exports这个对象内添加属性和方法,所以都可以暴露出去

module.exports.name = "张三";
module.exports.nickName = "李四";
module.exports.sayName = () => {
  console.log("我是张三");
};
module.exports.sayNickName = () => {
  console.log("我是李四");
};

2.exports

这个方法和module.exports使用方式一致,是为了简化module.exports书写而存在的,如果模块中同时使用module.exports和exports向外共享数据,会共享module.exports指向的那个对象,不会共享exports指向那个对象,还是依旧看代码

下面这串代码,向外共享的是name为张三的那个对象,name为李四的那个对象并不会对外共享,外界也无法使用

module.exports = {
  name: "张三",
  sayName: () => {
    console.log("我是张三");
  },
};
exports = {
  name: "李四",
  sayName: () => {
    console.log("我是李四");
  },
};

3.require

这个方法是用来导入模块向外共享的数据的,当我们在模块中使用module.exports或exports,就可以在想要使用这个模块的js文件中使用该方法导入,这个方法的参数就是模块所在的路径,看代码

//文件1
module.exports.sayName = () => {
  console.log("我是张三");
};
//文件2
const res = require("文件1的路径");
res.sayName()//我是张三
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这些关键字都是用于在 JavaScript 中导出模块的方式。 1. `module.exports` 是 CommonJS 规范中用于导出模块的方式。在 Node.js 中,`module.exports` 是一个指向当前模块导出对象的引用。可以通过给 `module.exports` 赋值来导出一个对象或函数。 例如: ``` // 导出一个函数 function add(a, b) { return a + b; } module.exports = add; ``` 2. `exports` 是 `module.exports` 的一个辅助对象,可以通过给 `exports` 对象的属性赋值来导出模块。 例如: ``` // 导出一个对象 exports.name = 'Tom'; exports.age = 18; ``` 这个模块实际上等价于: ``` module.exports = { name: 'Tom', age: 18 }; ``` 3. `export` 是 ES6 中用于导出模块的关键字。可以通过 `export` 关键字导出一个变量、函数或对象。 例如: ``` // 导出一个变量 export const name = 'Tom'; // 导出一个函数 export function add(a, b) { return a + b; } // 导出一个对象 export default { name: 'Tom', age: 18 }; ``` 4. `export default` 也是 ES6 中用于导出模块的关键字,但是它只能导出一个默认值。 例如: ``` // 导出一个默认值 export default function add(a, b) { return a + b; } // 导出一个默认对象 export default { name: 'Tom', age: 18 }; ``` 在导入模块时,可以使用 `import` 关键字来引入模块。例如: ``` // 导入 CommonJS 模块 const add = require('./add'); // 导入 ES6 模块 import { name, add } from './module'; import person from './person'; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值