CommonJs模块化简明笔记

news2024/11/15 11:19:48

1、什么是模块化

模块化是指将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起。

最早我们开发将所有的代码写在一个js文件中，随着需求越来越复杂，代码量越来越大，如果仍然把所有代码写在一个js文件中，那么代码耦合度过高不方便后期维护，模块化将一个复杂的js文件按共同或类似的逻辑拆分成多个js文件，拆封的文件内部数据是私有的，只是向外部暴露一些接口（方法）与其他模块通信，不仅方便找到某一块功能点的代码，也可以达到复用的效果。
模块化的核⼼思想就是：模块之间是隔离的，通过导⼊和导出进⾏数据和功能的共享。

2、为什么需要模块化

随着需求越来越复杂，代码量越来越大，会出现如下问题：

全局污染问题（多个引入js相同变量名、方法名）
依赖混乱问题（引入顺序，导致结果不同）
数据安全问题（js中的数据会全部暴露出来）

3、导入和导出的概念

在这里插入图片描述

4、示例

4.1 暴露（导出）方式一：

创建 user.js

const name = '张三'
const age = 18
function getAddress (){
	return '甘肃省兰州市城关区'
}  
//通过给exports对象添加属性的⽅式，来导出数据
exports.name = name
exports.age = age
exports.getAddress = getAddress

创建 index.js

// 引⼊user模块暴露的所有内容
const user = require('./user.js')

console.log(name)
console.log(age)
console.log(name)

在这里插入图片描述

4.2 暴露（导出）方式二：

创建 user.js

const name = '张三'
const age = 18
function getAddress (){
	return '甘肃省兰州市城关区'
}  
//通过给exports对象添加属性的⽅式，来导出数据
module.exports ={
    name,
    age,
    getAddress
}

运行结果与第一种一致。

4.3 三种导入方式

// 直接引⼊模块,使用时需要 user.name 的方式
const user = require('./user')

// 引⼊同时解构出要⽤的数据 , 使用时，直接使用变量名
const { name, age, getAddress } = require('./user')


// 引⼊同时解构+重命名
const {name:myName,age,getAddress:myAdd} = require('./user')