1、模块
- 理解：向外提供特定功能的
js程序，一般就是一个js文件 - 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
- 作用：复用
js，简化js的编写，提高js运行效率
我们以一段代码举例说明拆分模块，该片段代码有以下五个部分组成：
- 一个存储用户信息的数组
- 一个校验邮箱格式的函数
- 一个用于根据用户 ID 获取用户信息的函数
- 一个用于根据用户名搜索用户的函数
- 一个用于添加新用户的函数
- 一个用于删除用户的函数
文件名：index.js
// 定义一个存储用户信息的数组
const users = [
{ id: 1, name: 'John Doe', email: 'johndoe@example.com' },
{ id: 2, name: 'Jane Doe', email: 'janedoe@example.com' },
{ id: 3, name: 'Jim Brown', email: 'jimbrown@example.com' },
];
// 定义一个函数，用于校验邮箱格式
function validateEmail(email) {
const emailRegExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return emailRegExp.test(email);
}
// 定义一个函数，用于根据用户 ID 获取用户信息
function getUserById(id) {
return users.find(user => user.id === id);
}
// 定义一个函数，用于根据用户名搜索用户
function searchUsersByName(name) {
return users.filter(user => user.name.toLowerCase().includes(name.toLowerCase()));
}
// 定义一个函数，用于添加新用户
function addUser(name, email) {
if(!validateEmail(email)) {
throw new Error('邮箱格式错误！')
}
const newUser = {
id: users.length + 1,
name,
email,
};
users.push(newUser);
return newUser;
}
// 定义一个函数，用于删除用户
function deleteUser(id) {
const userIndex = users.findIndex(user => user.id === id);
if (userIndex === -1) {
return false;
}
const deletedUser = users.splice(userIndex, 1);
return deletedUser[0];
}
从以上代码可以看出，这是一个对用户信息的增删改查的js代码。但是代码太长，代码结构层次不明显，通过代码分析业务困难，不容易维护，且功能代码不复用会造成冗余。
通过简要分析，我们可以将以上代码拆分为3个部分：
- 一个是用户数据本身部分
- 一个是对邮箱的格式验证，这是一个通用的功能函数，算单独的工具函数
- 一个是针对用户信息的增删改查功能的几个函数，算另外一部分
index.js按照功能模块拆分后类似以下结构：
文件名：userData.js
// 定义一个存储用户信息的数组
const users = [
{ id: 1, name: 'John Doe', email: 'johndoe@example.com' },
{ id: 2, name: 'Jane Doe', email: 'janedoe@example.com' },
{ id: 3, name: 'Jim Brown', email: 'jimbrown@example.com' },
];
export default users
文件名：tool.js
// 定义一个函数，用于校验邮箱格式
export function validateEmail(email) {
const emailRegExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
return emailRegExp.test(email);
}
文件名：userCrud.js
import { validateEmail } from './tool.js'
// 定义一个函数，用于根据用户 ID 获取用户信息
export function getUserById( users, id) {
return users.find(user => user.id === id);
}
// 定义一个函数，用于根据用户名搜索用户
export function searchUsersByName( users, name) {
return users.filter(user => user.name.toLowerCase().includes(name.toLowerCase()));
}
// 定义一个函数，用于添加新用户
export function addUser( users, name, email) {
if(!validateEmail(email)) {
throw new Error('邮箱格式错误！')
}
const newUser = {
id: users.length + 1,
name,
email,
};
users.push(newUser);
return users;
}
// 定义一个函数，用于删除用户
export function deleteUser( users, id) {
const userIndex = users.findIndex(user => user.id === id);
if (userIndex === -1) {
return false;
}
const deletedUser = users.splice(userIndex, 1);
return users;
}
文件名：index.js
import users from './userData.js'
import { getUserById, searchUsersByName, addUser, deleteUser } from './userCrud.js'
// 比如获取id为1的用户，可以这样写
const user = getUserById(users, 1)
//...其他CRUD操作
总结：
** JavaScript 模块是指将代码分成独立的模块的技术。每个模块是一个独立的单元，可以拥有自己的变量和函数，并且可以被其他模块导入使用。**这样在index.js中就可以更加着重业务，需要功能的时候直接引入即可。代码结构层次明确，易阅读和维护。
注意：在实际项目中，不可能和我这里的案例代码一样，这里只是提供思路，仅供参考。
2、组件
- 理解：用来实现局部功能效果的代码和资源的集合（
html/css/js/img等等） - 为什么要用组件：一个界面功能更复杂
- 作用：复用编码，简化项目编码，提高运行效率，便于维护。
上图组件就是一个card组件，实现一个组件，就可以在整个项目上进行复用，说是复制粘贴也不为过。当然，在实际的项目中，我们都会使用一些封装好的组件库进行开发，如：ElementUI、NaiveUI、VantUI等等，但是有些特别的组件在组件库中没有的时候，就需要你自己开发了，你可以对组件库的组件进行二次开发，也可以纯手工写一个新的组件，这个可以自由发挥，主要就是要理解组件。
总结：
组件是指用于构建应用程序界面的独立部分。组件可以被看作是控制界面中的一个单独的元素的独立代码单元。
3、模块化
当应用的js都以模块来编写的，这个应用就是一个模块化的应用。
JavaScript 模块化是一种将代码分成独立模块的技术。每个模块是一个独立的单元，可以拥有自己的变量和函数，并且可以被其他模块导入使用。模块化的优点是可以更好地组织代码，并且可以避免命名冲突。它是通过使用模块系统，例如 CommonJS 或 ES6 模块，来实现的。
JavaScript 模块化在 ES6 中正式引入了语法支持，有两种导入和导出模块的方式：import 和 export。
导出模块：
// myModule.js
const message = 'Hello from myModule!';
export default message;
导入模块：
// main.js
import message from './myModule.js';
console.log(message); // Hello from myModule!
总结：
模块化的优点包括：
- 可维护性：可以更轻松地维护大型项目。
- 可重用性：可以在多个地方重复使用代码。
- 命名空间：模块可以拥有自己的命名空间，避免命名冲突。
- 代码隔离：可以保护代码免受其他模块的影响。
JavaScript 模块化是为了提高代码质量和可维护性的重要技术，对于开发大型应用程序是必要的。
4、组件化
当应用是以多个组件方式实现，这个应用就是一个组件化的应用。我们在构建一个后台页面布局的时候，我们大概可以分header(头部)、sider(侧边栏)、content(内容)、footer(底栏)。它们都可以单独封装为一个组件，通过页面布局将这些组件组合在一起，各自发挥它们的功能，这就是组件化。
总结：
组件化是指将应用程序的界面分解为一组独立的组件，每个组件具有自己的状态和逻辑。组件化的目的是提高代码可维护性，使得开发人员可以独立地维护和开发每个组件，而不必关心其他部分。
组件化带来了以下优势：
- 可复用性：组件可以在应用程序的多个地方使用。
- 可维护性：每个组件可以独立地维护和开发。
- 易于理解：由于组件是独立的代码单元，因此它们更容易理解和维护。
- 增强测试性：组件可以独立地测试，从而更容易确保代码的正确性。
组件化是应用程序开发的重要技术，特别是在使用 JavaScript 框架如 React 和 Vue.js 时，它被广泛使用。
