一文彻底搞懂前端ES6模块化

一文彻底搞懂前端ES6模块化

  • 1、前言
  • 2、前端模块化规范
  • 3、什么是ES6模块化规范
  • 4、在node.js中体验ES6模块化
  • 5、ES6模块化的基本语法
    • 5.1 默认导出与默认导入
    • 5.2 按需导出与按需导入
    • 5.3 直接导入并执行模块中的代码

1、前言

在以前的JavaScript中是没有模块化概念的,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。如果要进行模块化操作,就需要引入第三方的类库。随着技术的发展,前后端分离,前端的业务变的越来越复杂化,于是才有了ES6模块化的诞生。

为什么要有模块化,或者模块化的好处是什么呢?

  • 大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块间的相互调用。
  • 可以将一段复杂的程序拆解开来,方便维护可拓展。

2、前端模块化规范

ES6模块化诞生之前,JavaScript社区尝试并提出了AMD、CMD、commonJS等模块化规范。
但是,这些模块化规范,存在一定的差异性与局限性,并不能通用。
例如:

  • AMDCMD适用于浏览器端的JavaScript模块化
  • commonJS适用于服务器端的JavaScript模块化
  • Node.js 就是遵循的这个规范
  • 导入其它模块使用require()
  • 导出使用module.exports对象

太多的模块化规范给开发者增加了学习的难度与开发的成本。所以,ES6模块化规范诞生了!

3、什么是ES6模块化规范

ES6模块化规范是浏览器端与服务端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本,开发者不需要在额外学习AMD、CMD或者commonJS等模块化规范。
ES6中模块化规范中定义:

  • 每个js文件都是一个独立的模块
  • 导入其他模块成员使用import关键字
  • 向外共享模块成员使用export关键字

4、在node.js中体验ES6模块化

node.js中默认仅支持commonJS模块化规范,若想在node中进行体验,要按照如下两步骤进行配置:

  1. 确保安装了v14.15.1或者更高版本的node.js

可以使用在cmd窗口中使用node -v命令查看当前版本号

  1. package.json的根节点中添加"type":"module"节点
  1. 在一个空文件夹内,执行npm init -y,这时候我们就能看见已经自动生成了package.json文件了
  2. vs-code打开,在内添加"type":"module"节点即可

提示:type值默认为commonJS,所以我们平时node遵循的模块化规范都是commonJS

5、ES6模块化的基本语法

ES6的模块化主要包含如下3种用法:

  • 默认导出与默认导入
  • 按需导出与按需导入
  • 直接导入并执行模块中的代码

5.1 默认导出与默认导入

默认导入

语法:export default 默认导出的成员

let name = '张三' // 定义模块私有成员 name
let age = 20 // 定义模块私有成员 age 因为没有共享出去,所以外界访问不到
function fn (){  // 定义模块私有方法 show
	
}
// 使用export default 默认导出语法 向外共享 name和 fn 两个成员
export default { 
	name,
    fn 
}

注意事项

每个模块中,只允许用唯一的一次 export default,否则会报错!

默认导入

语法:import接收名称form模块标识符

// 从 test.js 模块中导入 export default 向外共享的成员
// 并使用 test 进行接收
import testform './test.js'

console.log(test)
// 输出为: { name: '张三', fn: [Function:fn]}

注意事项

默认导入的时候,接收名字可以任意写,注意是合法的成员名称就行。

// test 合法 不报错
import test form './test.js'
// 成员名称不能用数字开头,所以会直接报错
import 123 form './test.js'

5.2 按需导出与按需导入

按需导出

语法:export按需导出的成员

// test.js:
// 向外按需导出变量 name
export let name = 'admin'
// 向外按需导出方法 show
export function show(){

}

按需导入

语法:import { name } from 模块标识符

import { name, show } form './m1.js'
console.log(name) // admin
console.log(show) // [Function: show]

注意事项

每个模块中可以使用多次按需导出
按需导入的成员名称必须跟按需导出的名称一致
按需导入时,可以使用as关键字进行重命名
按需导入可以和默认导入一起使用

重命名:

import { name as username } form './test.js'

使用as关键字,将name重命名为username,所以接下来我们使用username就好了,不能再使用name这个名字。

按需导入和默认导入一起使用:

import info, { name as username } form './test.js'

info就是默认导入,后面带大括号的就是按需导入。

5.3 直接导入并执行模块中的代码

如果只想单纯的执行某个模块中的代码,并不需要得到其内部向外共享的成员,可以这样做:

// test.js:
for(let i = 0; i < 6; i++){
	console.log(i)
}
-------------------------
// 直接导入并执行模块中的代码
import './test.js'

你可能感兴趣的:(ES6,前端,es6,ecmascript)