js的导出与导入

最新推荐文章于 2024-04-14 12:14:38 发布

原创最新推荐文章于 2024-04-14 12:14:38 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

14 篇文章

订阅专栏

nodejs

8 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了JavaScript中两种不同的模块导出方式，并展示了如何在实际项目中使用它们。一种是传统的CommonJS模块导出，另一种是现代的ES6模块导出。通过具体的代码示例，演示了每种导出方式的具体用法及其区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尝试了两种导出方式，对应两种引用方式。

1. 导出方式一：
被引用脚本路径：my-app > src > renderer > module > checkObject.js，代码如下

'use strict'
let CheckObject = function () {}
CheckObject.prototype = {
    checkName: function (name) {
        console.log(name);
        return this
    },
    checkEmail: function (email) {
        console.log(email);
        return this
    },
    checkPassword: function (pwd) {
        console.log(pwd);
        return this
    }
}
module.exports = CheckObject

引用脚本路径：my-app > src > renderer > components > Home > Home.vue，代码如下

<script>
	let CheckObject = require("../../module/checkObject")
	let a = new CheckObject()
	a.checkEmail("xxx@xx.com").checkName("zs").checkPassword("123456")
</script>

打印：
第一种导出导入方式的结果打印

2. 导出方式二：
被引用脚本路径：my-app > src > renderer > module > checkObjectES6.js，代码如下

'use strict'
export let CheckObject = function () {}
CheckObject.prototype = {
    checkName: function (name) {
        console.log(name);
        console.log("===",this);
        return this
    },
    checkEmail: function (email) {
        console.log(email);
        console.log("---",this);
        return this
    },
    checkPassword: function (pwd) {
        console.log(pwd);
        console.log("-=-", this);
        return this
    }
}

引用脚本路径：my-app > src > renderer > components > Home > Home.vue，代码如下

<script>
	import { CheckObject } from "../../module/checkObjectES6"
	let a = new CheckObject()
	a.checkEmail("xxx@xx.com").checkName("zs").checkPassword("123456")
</script>

打印：
第二种导入方式的打印