JavaScript模块化——JS模块化介绍与CommonJS规范

news2024/11/17 1:28:11

作者：CSDN-PleaSure乐事

欢迎大家阅读我的博客希望大家喜欢

使用环境：vscode Chrome浏览器

1.模块化概述

1.1什么是模块化

1.2为什么需要模块化

1.2.1全局污染

1.2.2依赖混乱

1.2.3数据安全

2.有哪些模块化规范

3.导入与导出

3.1导入

3.2导出

3.3大白话

4.CommonJs

4.1准备阶段

4.1.1文件1:school.js

4.1.2文件2:student.js

4.2导出数据

4.2.1方法一

4.2.2方法二

4.2.3注意点

4.3导入数据

4.4在浏览器中使用上述代码

1.模块化概述

1.1什么是模块化

将程序⽂件依据⼀定规则拆分成多个⽂件，这种编码⽅式就是模块化的编码⽅式。
拆分出来每个⽂件就是⼀个模块，模块中的数据都是私有的，模块之间互相隔离。如果不进行隔离，可能会造成模块间的变量定义有冲突，导致程序崩溃。
同时也能通过⼀些⼿段，可以把模块内的指定数据“交出去”，供其他模块使⽤。

1.2为什么需要模块化

随着应⽤的复杂度越来越⾼，其代码量和⽂件数量都会急剧增加，会造成如全局污染、依赖混乱、数据安全等问题。

1.2.1全局污染

其中全局污染问题是html文件引入不同js文件时，js当中同名的函数、变量等因引入先后顺序的问题导致相互覆盖，最终造成调用不清晰的问题，如a.js和b.js中都包含函数getData，但是由于a先引入而b后引入，最终在函数调用时，我们会使用b、中的getData。

1.2.2依赖混乱

依赖混乱主要是由于引入js文件顺序不同最终导致页面效果混乱，例如若某几个js文件引入后正常显示轮播图效果，但是改变其中某些文件的顺序后，则控制台会直接产生报错：

1.2.3数据安全

在js文件引入后，若不及时有效处理，可能会直接造成用户密码等敏感信息泄漏，进而造成损失。

2.有哪些模块化规范

随着时间的推移，针对 JavaScript 的不同运⾏环境相继出现了多种模块化规范。按照时间排序有以下四种模块化规范：

CommonJS——服务端应用广泛
AMD
CMD
ES6模块化——浏览器端应用广泛

3.导入与导出

模块化的核⼼思想就是：模块之间是隔离的，通过导⼊和导出进⾏数据和功能的共享。

3.1导入

导入的概念是引入并使用其他模块导出的内容，并重用其代码和功能。

3.2导出

导出的概念是模块公开一部分内容，例如变量函数等使得其他模块可以使用这些变量函数。

3.3大白话

导入与导出使用通俗的大白话讲就是一家商店卖（导出）一些商品（变量或方法）给顾客，顾客对商品进行购买（导入），并使用它们（重用）。这就是模块的导入与导出。

4.CommonJs

4.1准备阶段

首先我们先准备两个js文件供后续使用：

4.1.1文件1:school.js

const name = '蓝翔'
const slogan = '你干嘛哎呦'

function getTel (){
  return '12345678'
}

function getCities(){
  return ['北京','上海','深圳','成都','武汉','西安']
}

4.1.2文件2:student.js

const name = '张三'
const motto = '我可以'

function getTel (){
  return '246810'
}

function getHobby(){
  return ['唱','跳','rap']
}

此时在两个js文件当中我们都未讲文件进行导出，若此时我们想要在另外一个js文件当中对school和student文件进行引入，会产生如下问题：

若我们右键进行run code操作，会发现控制台打印一个空对象，原因是此时我们并没有给school和student当中的对象“填入”内容，会导致最终打印出空对象。

因此我们就需要引出4.2的内容：导出数据。

4.2导出数据

4.2.1方法一

首先是方法一，若我们不想要打印的对象为空对象，我们可以使用exports来导出，我们在student.js后加入这段代码即可实现导出：

exports.name = name
exports.slogan = slogan
exports.getTel = getTel

在school当中使用exports一样有效：

4.2.2方法二

我们使用module.exports也可以得出类似的效果。我们可以使用module直接赋值称为对象。

在两个js文件当中，分别加入如下代码即可达成与exports类似的效果：

//school.js
module.exports = {name,slogan,getTel}
//student.js
module.exports = {name,motto,getTel}

4.2.3注意点

在进行数据导入时，我们需要注意每个模块内部的this、exports、modules.exports 在初始时，都指向同⼀个空对象，该空对象就是当前模块导出的数据。⽆论如何修改导出对象，最终导出的都是 module.exports 的值。

4.3导入数据

如果我们想要导入数据，那我们直接在index.js当中使用require即可：

//赋值前直接进行解构
const {name,slogan,getTel} = require('./school.js')
//使用重命名防止变量名冲突，即变量名+冒号
const {name:stuName,motto,getTel:stuTel} = require('./student.js')
console.log(name)
console.log(slogan)
console.log(getTel())
console.log(stuName)
console.log(motto)
console.log(stuTel())

最终会得出如下结果：