只写后台管理的前端要怎么提升自己

写优雅的代码

大概两年以前，面试美团的时候，面试官让我写一道代码题，时间单位转换。具体的题目我忘记了。原题目我没做过，但是我写的业务代码代码里有类似的单位转换，后端返回一个数字，单位是kb，而我要展示成 KB，MB 等形式。大概写一个工具函数（具体怎么写的忘记了，不过功能比这个复杂点）：

<code>function formatSizeUnits(kb) { -- -->

let units = ['KB', 'MB', 'GB', 'TB', 'PB'];

let unitIndex = 0;

while (kb >= 1024 && unitIndex < units.length - 1) {

kb /= 1024;

unitIndex++;

}

return `${ kb.toFixed(2)} ${ units[unitIndex]}`;

}

而在此之前，是一个后端同学写的代码（说起来，后台管理系统前端人力不够后端帮忙写好像是常规操作，后端总觉得写前端简单，而我只能说你们那代码写的，一言难尽……），如下：

function formatSizeUnits(kb) {

var result = '';

if (kb < 1024) {

result = kb + ' KB';

} else if (kb < 1024 * 1024) {

result = (kb / 1024).toFixed(2) + ' MB';

} else if (kb < 1024 * 1024 * 1024) {

result = (kb / 1024 / 1024).toFixed(2) + ' GB';

} else {

result = (kb / 1024 / 1024 / 1024).toFixed(2) + ' TB';

}

return result;

}

虽然功能都一样，但是我写在面试的时候写了上面的代码得到了面试官的赞扬，也因此非常顺利的通过了面试。而如果我写成了下面的样子，估计不会有这种效果。

如何提升代码质量

想提升代码质量，最理想的是靠 code review ，但实际上这玩意在大多数公司根本就不存在。其次就只能多看看大佬们写的代码，但是一来后台管理本来就没太大难度很少有大佬，二来很多时候一个后台管理系统就一两个人负责。

还好现在有了各种 AI 工具，可以非常方便的优化自己的代码了。

还是上面的问题，看看 GPT 给的答案

// 提问：写一个工具函数，对文件大小的单位进行转换，加注释

// 回答：下面是一个JavaScript工具函数，它接受文件大小、初始单位、目标单位和小数位数，然后返回目标单位下的文件大小。

/**

* 将文件大小从一个单位转换为另一个单位。

*

* @param {number} size 文件大小。

* @param {string} fromUnit 初始单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。

* @param {string} toUnit 目标单位（'B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'）。

* @param {number} [decimalPoint=2] 结果保留的小数位数，默认为2。

* @return {string} 转换后的文件大小，带单位。

*/

function convertFileSize(size, fromUnit, toUnit, decimalPoint = 2) {

// 定义单位与字节之间的转换关系

const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

// 获取初始单位和目标单位的索引

const fromIndex = units.indexOf(fromUnit);

const toIndex = units.indexOf(toUnit);

// 如果单位不在列表中，抛出错误

if (fromIndex === -1 || toIndex === -1) {

throw new Error('Invalid units');

}

// 计算初始单位与目标单位之间的转换系数

const exponent = toIndex - fromIndex;

// 计算结果大小

const resultSize = size / Math.pow(1024, exponent);

// 返回格式化后的结果

return parseFloat(resultSize.toFixed(decimalPoint)) + ' ' + toUnit;

}

// 示例使用

console.log(convertFileSize(1, 'GB', 'MB')); // 输出: 1024.00 MB

console.log(convertFileSize(1, 'MB', 'KB')); // 输出: 1024.00 KB

console.log(convertFileSize(1, 'KB', 'B')); // 输出: 1024.00 B

console.log(convertFileSize(1, 'MB', 'GB', 5)); // 输出: 0.00098 GB

还能说什么，我只能说 NB！（经评论区提示，此段代码可能有问题，建议大家在使用AI工具时，重点是借鉴思路，直接使用代码需要谨慎~）

我现在每次写大段逻辑之后都习惯拿给 AI 看看，有什么更好的实现方式，或者用什么设计模式。AI 是非常低成本且高效提升代码质量的工具。

学会封装

一个功能用到了好多次，为什么不封装成组件？一个组件用到了好几个项目，为什么不单独写个npm包？差不多的项目创建了好几个，为什么不封装成脚手架？

你说，没时间，没必要，复制粘贴反而更快。

那你就完全没理解，这么做不一定是为了让工作更快完成，而是可以让你在年年终述职时更有话说（你就算写了一百个表单表格没有写一个脚手架更值得炫耀），如果不会写可以问问 AI。

而当你真正开始封装组件，开始写工具库了，你会发现你需要思考的确实比之前多了。

关注业务

对于前端业务重要吗？

相比于后端来说，前端一般不会太关注业务。就算出了问题大部分也是后端的问题。

但是就我找工作的经验，业务非常重要！

如果你做的工作很有技术含量，比如你在做低代码，你可以面试时讲一个小时的技术难点。但是你只是一个破写后台管理，你什么都没有的说。这个时候，了解业务就成为了你的亮点。

如何了解业务

每次接需求的时候，都要了解需求背景，并主动去理解 我们写一个表格简简单单，把数据展示出来就好，但是表格中的数据是什么意思呢？比如我之前写一个

kafka 管理平台，里面有表格表单，涉及什么 cluster controller topic broker partition……

我真的完全不了解，很后悔我几年时间也没有耐下心来去了解。

每次做完一个需求，都需要了解结果

有些时候，后台管理的团队可能根本没有PM，那你也要和业务方了解，这个功能做了之后，多少人使用，效率提高了吗？数据是怎样的？

理解需求，并主动去优化

产品要展示一千条数据，你要考虑要不要分页，不分页会不会卡，要不要上虚拟表格？

产品要做一个可拖拽表单，你要考虑是否需要拖动，是否需要配置。

其实很多时候，产品的思维可能会被局限在竞品的实现方式，而前端可以给TA更多选项。在和产品沟通的时候，你不仅是沟通页面的实现，也更能理解业务。

前端监控

干了这么多年前端，前端监控我是……一点没做过。

前端监控，简单来说就是我们在前端程序中记录一些信息并上报，一般是错误信息，来方便我们及时发现问题并解决问题。除此之外也会有性能监控，用户行为的监控（埋点）等。之前也听过有些团队分享前端监控，为了出现问题明确责任（方便甩锅）。

对于实现方案，无论使用第三方库还是自己实现，重要的都是理解实现原理。

对于错误监控，可以了解一下 Sentry，原理简单来说就是通过 window.onerror 和 window.addEventListener(‘unhandledrejection’, …) 去分别捕获同步和异步错误，然后通过错误信息和 sourceMap 来定位到源码。

对于性能监控，我们可以通过 window.performance、PerformanceObserver 等 API 收集页面性能相关的指标，除此之外，还需要关注接口的响应时间

最后，收集到信息之后，还要考虑数据上报的方案，比如使用 navigator.sendBeacon 还是 Fetch、AJAX？是批量上报，实时上报，还是延迟上报？上报的数据格式等等

总结

写了这么多，可能有人会问，如果能回到过去，你会怎么做。

啊，我只能说，说是一回事，做又是另一回事，事实上我并不希望回到过去去卷一遍，菜点没关系，快乐就好，一切都是最好的安排。

更多技能分享与前端开发工具分享 我已经整理到下面了 ↓↓↓ 快去看那看吧！