JS内容导出导入项目目录引入这部分非常重要也是后面学习Web前端框架的基础部分的内容。这里不搞清楚的情况下去学Vue框架基本完蛋。这里先建立一个前端项目目录通过该目录做演示。纯前端项目的话就是分模块编写一个功能一个模块然后HTML文件负责演示JS文件负责作为处理逻辑然后CSS用于装饰。这里就忽略CSS项目就简单的HTMLJS组成。项目目录结构如下JsProject/ ├── main.js # 主入口 ├── index.html # 主页演示 │ ├── personal/ # 个人主页功能 │ ├── index.js # 总闸 │ ├── userInfo.js # 用户信息 头像 │ └── demo.html # 个人主页演示 │ └── utils/ # 工具函数 ├── index.js # 总闸 ├── format.js # 格式化 校验 └── request.js # 网络请求JS分文件编写JS语言理解因为实际前端项目用框架中.js文件大多都是拿来做配置文件比如功能集中导入路由配置等等。导致可能产生误解。所有这里需要先理清楚JS是一门前后端通吃的语言甚至可以连接数据库。JS和C、Python一样是写处理逻辑的语言就上面项目目录为例personal/userInfo.js用户数据管理获取用户信息、更新头像、修改设置utils/format.js数据格式化时间转字符串、金额加逗号、手机号脱敏每个.js文件都在干同一件事接收输入 → 处理逻辑 → 输出结果。和C语言、Python没有本质区别只是JS跑在浏览器里处理的是点击、输入、请求这些用户交互。直接说了大学里面的C语言期末大作业比如写学生管理系统JS也完全可以像C语言那么独立写出程序设计出来。JS分文件编写分文件编写的就是把代码按功能拆开放到不同的文件里最后再组合起来用。分文件的目录就是保持逻辑的清晰。其实就上述项目而言一个HTML文件一个JS文件就能完全实现。但项目稍微大点就难受了想找一个函数翻半天改一行代码怕影响别的地方。所以分文件不是为了能不能跑是为了好不好维护。对比其他语言JS的分文件编写和那个和C语言的分文件编写Python的分模块编写是一个意思。对比一下其他语言的做法如下语言写法作用C#include math.h引入头文件Pythonfrom utils import add导入模块JSimport {add} from ./utils.js导入模块JS导出与导入JS 文件写好功能用export丢出去另一个文件用import接过来用。JS中的导入和导出都用两种常见的方式。总结归纳如下默认导出/导入命名导出/导入导出export default { name, add }export const name lqz导入import 任意名 fromimport { 固定名 } from名字导入时随便取导入时必须一样数量一个文件只能一个一个文件可以多个有无{}没有{}有{}默认导出默认导出是一种集中的导出把该.js文件下所有需要导出的内容写进一个export default声明里打包成一个对象导出。然后导入的时候也是看成一个对象导入对象名由我们自己随意取。export default声明JS 的模块导出非常灵活既可以导出单个变量/函数也可以导出包含多个内容的对象。JS用export default声明出需要导出的内容。语法格式exportdefault{// 把要导出的东西全放这里}export default只能声明一次所有你想导出的内容就只能放这里。整个.js文件就只能存在一个export default的声明。export default的作用就是把要导出的内容打包成一个对象整体导出。代码示例把utils/format.js下的内容打包成对象导出。constnameLeeChangfunctionformatTime(date){returndate.toLocaleString(zh-CN)}functionformatMoney(amount){return¥amount.toFixed(2)}// 把上面的变量和函数全部都导出exportdefault{name,formatTime,formatMoney}导入方式export default声明导出后就可以在别的地方使用。代码示例比如在main.js中导入utils/format.js导出的内容。// 导入时对象名自己取我就乱取bilbil了importbilbilfrom./utils/format.jsconsole.log(bilbil.name)// LeeChangconsole.log(bilbil.formatTime(newDate()))// 2026/6/24 14:30:00console.log(bilbil.formatMoney(99.9))// ¥99.90命名导出命名导出是模块化开发中最常用的方式它允许我们在每个变量、函数或类声明时直接加上export关键字实现按需导出。导入时只需要拿自己需要的那部分。export关键字JS 使用export关键字标记需要导出的内容。与默认导出不同命名导出可以有多个export关键字的声明在需要导出的变量、函数、或者对象加上该关键字就导出了。两种使用方式语法格式1// 方式一声明时直接导出常用exportconstnamevalueexportfunctionfn(){}语法格式2// 方式二先声明再统一导出constnamevaluefunctionfn(){}// 导出的时候可以用as重命名当然也可以不重命名export{nameasuserName,fnasfunc}关于语法格式二容易和默认导出产生误解命令导出是导出的对象是独立的而默认方式导出的是整体打包成的对象这决定了他们导入时候的方式。代码示例把用户信息模块personal/userInfo.js下的内容逐个导出。// 常量导出exportconstuserNameLeeChangexportconstuserAge18// 函数导出exportfunctionupdateName(newName){console.log(姓名已更新为,newName)}exportfunctionupdateAvatar(url){console.log(头像已更新,url)}// 也可以先定义再统一导出等效写法// const userName LeeChang// const userAge 18// function updateName(newName) { ... }// export { userName, userAge, updateName, updateAvatar }导入方式一个.js文件中可以存在任意多个export声明。每个export导出的内容都保留了自己的标识符名称导入时必须使用对应的名称来引用。export声明导出后有三种常见的导入方式。代码示例在main.js中导入用户信息模块personal/userInfo.js内容。方式1按需导入只导入需要的部分用{}包裹名称必须与导出时一致。// 只拿 userName 和 updateNameimport{userName,updateName}from./personal/userInfo.jsconsole.log(userName)// LeeChangupdateName(Changli)// 姓名已更新为Changli方式2全部导入并起别名用* as 别名把所有导出内容打包成一个对象通过对象属性访问。// 全部导入挂载到 user 对象上import*asuserfrom./personal/userInfo.jsconsole.log(user.userName)// LeeChangconsole.log(user.userAge)// 18user.updateAvatar(/new.jpg)// 头像已更新/new.jpg方式三导入时重命名当多个模块有同名导出时用as在导入时重命名避免冲突。// 导入时重命名import{userNameasname,updateNameasrename}from./personal/userInfo.jsconsole.log(name)// LeeChangrename(Changli)// 姓名已更新为Changli易疑惑点导出是白名单制度你明确导出的才能被外部访问没列在名单里的都是私有的外部永远拿不到。要注意拿不到指的是外部无法直接访问这个变量而不是这个变量彻底消失了。比如你导出一个函数函数内部用到了其他变量那个变量没导出。在你导入这个函数使用的时候函数依然能正常运行因为它内部的变量在定义时就绑定好了闭包会把它们记住。外部拿不到那个变量但函数自己能用。所以正确理解是私有变量对外部代码不可见但对内部函数依然可见。index.js文件机制如果文件夹下有index.js导入时可以只写到文件夹层级。这个机制依赖于 Node.js/Vite构建工具的模块解析规则当导入路径指向一个文件夹时系统会自动查找该文件夹下的index.js文件。只有叫index.js的文件才能享受只写到目录层的简写待遇其他.js文件必须手动写完整路径。index.js作用不用index.js文件例如上面项目目录结构中的utils/文件夹里通常有多个功能相关的.js文件如果一个个导入main.js中会非常繁琐// 这样太麻烦要记住每个文件里有什么import{formatTime,formatMoney}from./utils/format.jsimport{request,api}from./utils/request.js使用index.js文件由于index.js文件特殊的机制如果在该文件夹中创建一个index.js文件把其他的所有.js文件全部都导入进index.js中去最后只用导入一个index.js就行。这样导入文件夹就相当于导入了该文件夹下所有.js文件。// 把 format.js 和 request.js 的所有内容汇集起来统一导出export*from./format.jsexport*from./request.jsexport * from ./format.js这是ES6语法叫重导出“它做了两件事导入format.js里所有命名导出的内容再直接导出这些内容也就是先导入index.js后再从index.js中又导出去。main.js中导入// 只导入一个文件就行自动找 utils/index.jsimport{formatTime,request}from./utils其实步骤没有省但是逻辑非常清晰。index文件总结要点说明入口文件文件夹下的index.js是默认入口简写导入import {} from ./personal自动找personal/index.js作用是总闸汇集文件夹内所有文件统一对外导出导出选择命名导出按需用或默认导出整体用均可不仅限于 JS 文件Vue 框架中组件也常用这种模式。比如components/index.js把所有组件集中导出外部一键导入所有组件。导出方式选择index.js在做统一导出时命名导出和默认导出都能用看需求命名导出和导入// utils/index.js命名导出export*from./format.jsexport*from./request.js// main.js按需导入import{formatTime,request}from./utils默认导出和导入// utils/index.js默认导出// 默认导出不支持ES6那种重导出的写法import*asformatfrom./format.jsimport*asrequestfrom./request.jsexportdefault{...format,...request}// main.js整体导入importutilsfrom./utilsutils.formatTime()utils.request()