提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

学会ES6模块化，看这篇就够了

2023-02-18 16:38:30 时间

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.默认导入和分别导入可以同时存在

相关文章