前端模块化开发是每一位前端开发人员必须掌握的开发技能。如何让自己封装的模块更便于维护，易于使用，逻辑清晰，是一个巨大的挑战。
前端封装
逻辑封装
样式封装
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;
};
使用
import {
randomString } from './xxxx/xxx/xxx.ts'
function () {
randomString()
}
样式封装
每一个项目或者公司，都有属于自己的设计风格，设计风格不会经常变化，那么从设计稿中，我们可以提取一些相同的设计元素，将这些设计元素用一个公用的样式文件写好，这样，每次遇到相同的样式时，就可以直接使用。
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;
}
使用方式
@import '../../../paper-global.less';
.scf-question-card-warpper {
padding: 20px;
border: 1px solid @paper-border-color;
border-radius: 6px;
}
ui组件封装
每一个大的业务模块，都是由一个个小的ui组成的，将项目中相同的小元素提出来，单独形成一个小的ui组件，便于大组件的封装和维护。ui组件一般只注重样式和简单的逻辑，为大组件的封装减轻压力。
业务模块封装
业务模块是指项目中最后形成的组件，可以直接构成页面的模块。业务模块在其它项目中的复用性不高，因为涉及到业务数据和特殊逻辑，在其它项目中不一定适合。
业务模块注重易用性和可靠性，因为它直接关系着最终的功能是否得以实现。
业务模块的开发绝不是一个组件能够搞定，复杂的逻辑如果写成一个组件，维护和扩展的时候简直是一种灾难，参数也会多得出奇。
如果我们能够使用小组件帮助业务模块处理一部分逻辑，在业务模块中的逻辑会更加清晰。
封装式开发
样式封装 => ui组件 => 小功能组件 => 业务组件 => 页面
在这个过程中，除了样式封装，每一步都可能会使用到逻辑封装。