当前位置：首页 > article >正文

【前端】ES6模块化

article 2025/2/4 11:52:53

文章目录

1. 模块化概述
- 1.1 什么是模块化?
- 1.2 为什么需要模块化?
2. 有哪些模块化规范
3. CommonJs
- 3.1 导出数据
- 3.2 导入数据
- 3.3 扩展理解
- 3.4 在浏览器端运行
4.ES6模块化

参考视频地址

1. 模块化概述

1.1 什么是模块化?

将程序文件依据一定规则拆分成多个文件,这种编码方式就是模块化的编码方式.
拆分出来每个文件就是一个模块,模块中的数据都是私有的,模块之间互相隔离
同时也能通过一些手段,可以把模块内的指定数据"交出去",供其他模块使用

1.2 为什么需要模块化?

随着应用的复杂度越来越高,其代码量和文件数量都会急剧增加,会主键引发以下问题:

全局污染问题
依赖混乱问题
数据安全问题

2. 有哪些模块化规范

在这里插入图片描述

3. CommonJs

参考nodejs部分

3.1 导出数据

在CommonJs标准中,导出数据有两种方式

module.exports=value
exports.name=value

注意:

每个模块内部的:this,exports,modules.exports在初始初始化时,都指向同一个空对象,该空对象就是当前模块到处的数据,如下图:

无论如何修改到处对象,最终导出的都是module.exports的值.
exports是对modules.exports的初始引用,仅为了方便导出对象添加属性,所以不能使用exports=value的形式导出数据,但是可以使用module.exports=xxx导出数据

在这里插入图片描述

3.2 导入数据

//方式1
// var school = require('./school.js');
// console.log(school.name)
//方式2 (解构)
var {name,getTel,getCities} = require('./school.js');
//结构时重命名
var {name:stuName,getTel:stuTel,getHobby} = require('./student.js');
console.log(name)
console.log(stuName)
console.log(getTel)
console.log(stuTel)