模块和组件模块化和组件化的理解

Posted 2023-03-03 天界程序员

1、模块

• 理解：向外提供特定功能的js程序，一般就是一个js文件
• 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
• 作用：复用js，简化js的编写，提高js运行效率

我们以一段代码举例说明拆分模块，该片段代码有以下五个部分组成：

1. 一个存储用户信息的数组
2. 一个校验邮箱格式的函数
3. 一个用于根据用户 ID 获取用户信息的函数
4. 一个用于根据用户名搜索用户的函数
5. 一个用于添加新用户的函数
6. 一个用于删除用户的函数

文件名：index.js

//  定义一个存储用户信息的数组
const users = [
   id: 1, name: 'John Doe', email: '[e-mail]' ,
   id: 2, name: 'Jane Doe', email: '[e-mail]' ,
   id: 3, name: 'Jim Brown', email: '[e-mail]' ,
];

//  定义一个函数，用于校验邮箱格式
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: '[e-mail]' ,
   id: 2, name: 'Jane Doe', email: '[e-mail]' ,
   id: 3, name: 'Jim Brown', email: '[e-mail]' ,
];

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!

总结：

模块化的优点包括：

1. 可维护性：可以更轻松地维护大型项目。
2. 可重用性：可以在多个地方重复使用代码。
3. 命名空间：模块可以拥有自己的命名空间，避免命名冲突。
4. 代码隔离：可以保护代码免受其他模块的影响。

JavaScript 模块化是为了提高代码质量和可维护性的重要技术，对于开发大型应用程序是必要的。

---

4、组件化

  当应用是以多个组件方式实现，这个应用就是一个组件化的应用。我们在构建一个后台页面布局的时候，我们大概可以分header(头部)、sider(侧边栏)、content(内容)、footer(底栏)。它们都可以单独封装为一个组件，通过页面布局将这些组件组合在一起，各自发挥它们的功能，这就是组件化。

总结：

  组件化是指将应用程序的界面分解为一组独立的组件，每个组件具有自己的状态和逻辑。组件化的目的是提高代码可维护性，使得开发人员可以独立地维护和开发每个组件，而不必关心其他部分。

组件化带来了以下优势：

1. 可复用性：组件可以在应用程序的多个地方使用。
2. 可维护性：每个组件可以独立地维护和开发。
3. 易于理解：由于组件是独立的代码单元，因此它们更容易理解和维护。
4. 增强测试性：组件可以独立地测试，从而更容易确保代码的正确性。

组件化是应用程序开发的重要技术，特别是在使用 JavaScript 框架如 React 和 Vue.js 时，它被广泛使用。