JavaScript import 和 export 怎么用
在日常做网页时，你是不是经常碰到这样的情况：写了好几百行代码，想找某一个功能函数却要翻半天；或是别的项目里写的好用的计算金额、验证手机号的小工具，想直接挪到新页面，却不知道该怎么“拿过来”不冲突？其实用JavaScript的import和export就能解决这类“代码分家”又“互相调用”的问题，就像把零散的常用工具装到专属收纳盒，需要的时候再拿出来。
什么是export？把代码打包成“可外借的收纳盒”
export的作用就是把你想分享的代码，从当前页面“打包”成别人能用到的模块，简单说就是给你的代码开个“对外接口”，别人能根据这个接口找到你写的功能。
举个生活化的例子：你自己在家做了一个“切水果的小工具”，里面有削果皮、切块、摆盘三个小功能，你想把这个工具借给朋友用，就需要给每个功能贴个名字标签，朋友看到标签就知道“哦，这个是切块用的”。
写在代码里就更简单了，你可以直接给每个功能贴标签，比如做一个fruit.js文件装切水果的功能：
`javascript
// 给削果皮功能贴标签
export function peelFruit(fruit) {
return fruit + "（果皮已削）";
}
// 给切块功能贴标签
export function cutFruit(fruit) {
return fruit + "（切成小块）";
}
`
这样，peelFruit和cutFruit就成了fruit.js的“对外接口”，其他文件只要知道这个文件，就能借到这两个功能。
还有一种更省事的写法，如果这个文件里要导出的功能多，还可以最后统一打包贴标签，比如：
`javascript
function peelFruit(fruit) {
return fruit + "（果皮已削）";
}
function cutFruit(fruit) {
return fruit + "（切成小块）";
}
// 统一打包导出，名字和上面的函数对应
export { peelFruit, cutFruit };
`
如果想导出一个“核心功能”，比如整个切水果工具只对外叫prepareFruit，就可以用默认导出，就像给收纳盒贴个大标签，不用拆盒就能知道这是啥：
`javascript
function prepareFruit(fruit) {
return fruit + "（处理完成）";
}
// 默认导出，一个文件只能有一个默认导出
export default prepareFruit;
`
什么是import？从“收纳盒”里拿需要的东西
import的作用就是找到你之前打包好的模块，把需要的功能“拿过来”用，相当于你去朋友家借工具，报出工具的名字，朋友就会把对应的东西递给你。
还是用切水果的例子，现在你要在另一个文件里用fruit.js里的功能，就需要先告诉电脑这个文件的位置，再说出你要借的功能名字：
`javascript
// 从fruit.js里，借peelFruit和cutFruit两个功能
import { peelFruit, cutFruit } from './fruit.js';
// 直接用借来的功能就好
const apple = "红苹果";
const peeledApple = peelFruit(apple); // 红苹果（果皮已削）
const cutApple = cutFruit(peeledApple); // 红苹果（果皮已削）（切成小块）
`
如果是默认导出的核心功能，借的时候就不用加花括号，直接用自定义的名字接收就行，比如：
`javascript
// 借fruit.js里默认导出的prepareFruit，起个简单名字handleFruit
import handleFruit from './fruit.js';
// 直接用
const banana = "香蕉";
const handledBanana = handleFruit(banana); // 香蕉（处理完成）
`
有时候你想把一个文件里的所有功能都借过来，就像把整个收纳盒搬回家，给它起个专属名字，比如叫fruitTools，用*符号就行：
`javascript
// 把fruit.js里的所有功能都借过来，叫fruitTools
import * as fruitTools from './fruit.js';
// 用的时候要加上这个名字，比如fruitTools.peelFruit
const orange = "橙子";
const peeledOrange = fruitTools.peelFruit(orange);
`
注意：这些小细节别踩坑
虽然import和export用起来简单，但有两个小细节一定要注意，不然代码会报错。首先，两个文件的路径一定要写对，就像你找朋友家，地址写错了肯定找不到，./fruit.js的意思是“和当前文件在同一个文件夹里的fruit.js”，如果在别的文件夹，要把路径改对。其次，export和import要配对，你导出的是带花括号的命名功能，import的时候就要加花括号；导出的是默认功能，import的时候就不能加，别搞混。
学会用import和export，就能把零散的代码按功能分类整理，不用再把所有代码堆在一个文件里，不仅找代码快，后续修改、复用也方便，做网页的时候效率会高很多。