前端封装概念介绍

概述

前端模块化开发是每一位前端开发人员必须掌握的开发技能。如何让自己封装的模块更便于维护，易于使用，逻辑清晰，是一个巨大的挑战。

前端封装

逻辑封装
样式封装
ui组件封装
业务模块封装

逻辑封装

在前端开发过程中，我们经常会遇到相同的逻辑，比如将自然数转为字母，或者到某一个时间的倒计时，或者对后端数据进行处理等。

实际开发中，我们总是会将相同的逻辑，写成一个方法，放到一个共用文件中，只要需要就引用对应的方法，不需要每一次都处理一遍相同的逻辑。

我们开发过程中，会运用各种各样的框架，在这些框架中，总会有介绍对应的api文档，这些框架提供的api实际上就是一种逻辑封装，每次遇到相同的问题时，我们都会调用对应的api。

举例

/** 
* 将number转为 ABCD
* @params n 需要转化为字母的数字
*/ 
export const getStrAZ = (n: number) => {
  return String.fromCharCode(65 + n);
};

/**
* 生成随机的字符串
*  @params len 转为随机字符串的长度 默认为10
*/ 
export const randomString = (len = 10) => {
  const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz23456789';
  const maxPos = $chars.length;
  let pwd = '';
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  const timeString = new Date().valueOf();
  pwd = `${pwd}_${timeString}`;
  return pwd;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用

import {randomString } from './xxxx/xxx/xxx.ts'

function () {
	randomString() 
}
1
2
3
4
5

样式封装

每一个项目或者公司，都有属于自己的设计风格，设计风格不会经常变化，那么从设计稿中，我们可以提取一些相同的设计元素，将这些设计元素用一个公用的样式文件写好，这样，每次遇到相同的样式时，就可以直接使用。

less 封装举例

@paper-primary-color: #025299;
@paper-border-color: #D9D9D9;
@paper-title-color: #303133;
@paper-subTitle-color: #999;
@paper-text-color: #606266;

.scf-paper-question-title {
  font-size: 16px;
  line-height: 28px;
  color: @paper-title-color;
}

.scf-paper-option-text {
  font-size: 14px;
  line-height: 24px;
  color: @paper-text-color;
  margin-left: 8px;
}

.scf-paper-option-text.checked {
  color: @paper-primary-color;
}

.scf-paper-question-subtitle {
  font-size: 16px;
  line-height: 28px;
  color: @paper-subTitle-color;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

使用方式

@import '../../../paper-global.less';
.scf-question-card-warpper {
  padding: 20px;
  border: 1px solid @paper-border-color;
  border-radius: 6px;
}
1
2
3
4
5
6

ui组件封装

每一个大的业务模块，都是由一个个小的ui组成的，将项目中相同的小元素提出来，单独形成一个小的ui组件，便于大组件的封装和维护。ui组件一般只注重样式和简单的逻辑，为大组件的封装减轻压力。

业务模块封装

业务模块是指项目中最后形成的组件，可以直接构成页面的模块。业务模块在其它项目中的复用性不高，因为涉及到业务数据和特殊逻辑，在其它项目中不一定适合。
业务模块注重易用性和可靠性，因为它直接关系着最终的功能是否得以实现。
业务模块的开发绝不是一个组件能够搞定，复杂的逻辑如果写成一个组件，维护和扩展的时候简直是一种灾难，参数也会多得出奇。
如果我们能够使用小组件帮助业务模块处理一部分逻辑，在业务模块中的逻辑会更加清晰。

封装式开发

样式封装 => ui组件 => 小功能组件 => 业务组件 => 页面
在这个过程中，除了样式封装，每一步都可能会使用到逻辑封装。