js文件模块的导出与导入使用方法及注意事项

概述

工作中经常会遇到将其他模块及工具函数导入到当前文件进行使用，但是会遇到一个问题，有时候是需要整体导入，有时候又只能导入部分模块，需要各种尝试，才能找到最合适的使用方法，本贴详细介绍常用的导出与导入的使用，高手请绕道。

原文件导出多个对象

// 写法一：定义每个属性，最后统一导出
const consoleLog = function (str) { console.log(str)}
const wAlert = function (str) { alert(str) }
export { consoleLog, wAlert }

// 写法二：逐个导出每个属性
export const consoleLog = function (str) { console.log(str) }
export const wAlert = function (str) { alert(str) }


// 常规的导入及使用方式
import { consoleLog, wAlert } from "@/haley/tool.js";
consoleLog(123)
wAlert(345)

// 改名后的导入及使用方式
import { consoleLog as log, wAlert as alert } from "@/haley/tool.js"
consoleLog(1023)
wAlert(3045)

// 文件整体导入，并命名后的导入及使用方式
import * as output from "@/haley/tool.js"
output.consoleLog(1123);
output.wAlert(3145)

原文件导出一个对象

const Tools = {}
Tools.consoleLog = function (str) { console.log(str) }
Tools.wAlert = function (str) { alert(str) }
export default Tools

本质上，export default就是输出一个叫做default的变量或方法。

// 整体导入及使用方式
import Tools from "@/haley/tool-2.js";
Tools.consoleLog(111);
Tools.wAlert(222);

如果你觉得有用，请点赞收藏让更多的同行少走弯路；如果你觉得写的有误，请及时告诉我，感谢您的反馈！