学会ES6模块化，看这篇就够了
1. 什么是模块化
模块化就是前端制定的一种开发规范，大家都按照这种规范去写代码，有利于提高开发效率。
这里的模块化主要是指不同 js 文件之间变量、函数的共享规范。
2. ES6 模块化
在 ES6 模块化之前，JavaScript 社区提出了 AMD、CMD、CommonJS 等模块化规范。
这些模块化有很大差异性，不能做到浏览器端、服务器端通用一套模块化标准。
这时候 ES6 模块化闪亮登场，就像当年秦朝统一六国一样，统一了模块化标准。
ES6 模块化语法：
- 使用 import 关键字导入其他 js 文件
- 使用 export 关键字向外共享 js 文件
3. 搭建 node 环境
我们在 node 环境下体验 ES6 模块化。
首先在项目终端输入以下命令初始化项目：
npm init -y
这时会立即生成 package.json 文件，然后配置 "type":"module" ，这样我们就可以在 node 环境下体验 ES6 模块化了。
4. 导出方式
1.默认导出
let name = "知否君";
let age = 23;
function desc() {
console.log("公众号：知否技术");
}
export default {
name, age, desc
}
export default {
name: "知否君",
age: 23,
desc: function () {
console.log("公众号：知否技术");
}
}
2.统一导出
let name = "知否君";
let age = 23;
function desc() {
console.log("公众号：知否技术");
}
export {
name, age, desc
}
3.分别导出
export let name = "知否君";
export let age = 23;
export function desc() {
console.log("公众号：知否技术");
}
5. 导入方式
1.默认导入
import common from './common.js'
console.log(common);
2.解构赋值导入
注意：解构赋值导入其实就是分别导入，只适用于统一导出和分别导出。
import { name, age } from './common.js'
console.log(name);
console.log(age);
6. 注意事项
1.每个 js 文件只能有一个默认导出。
2.可以给导入的变量名起个别名：as
3.统一导出、分别导出、按需导出可以同时存在
4.默认导入和分别导入可以同时存在
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-10-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录