本人写了五年的后台管理。每次面试前就会头疼，因为写的页面除了表单就是表格。抱怨过苦恼过也后悔过，但是站在现在的时间点回想以前，发现有很多事情可以做的更好，于是有了这篇文章。

写优雅的代码

一道面试题

大概两年以前，面试美团的时候，面试官让我写一道代码题，时间单位转换。具体的题目我忘记了。

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

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。

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

关注业务

对于前端业务重要吗？

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

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

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

一场面试

还是拿真实的面试场景举例，当时前同事推我字节，也是我面试过N次的梦中情厂了，刚好那个组做的业务和我之前呆的组做的一模一样。

• 同事：“做的东西和咱们之前都是一样的，你随便走个过场就能过，我在前端组长面前都夸过你了！”


• 我：“好嘞！”

等到面试的时候：

• 前端ld：“你知道xxx吗？（业务名词）”


• 我：“我……”


• 前端ld：“那xxxx呢？（业务名词）”


• 我：“不……”


• 前端ld：“那xxxxx呢？？（业务名词）”


• 我：“造……”

然后我就挂了………………

如何了解业务

关注源码

说到源码， Vue，React 这些基本是每次必问，也有太多大佬们的总结我就不多说了。

除此之外，我想大家每次面试应该都会被问，你写了什么亮点的项目，困难的项目，你会说什么？哦，都是表单表格，都用 Element UI 实现的，没什么难度。那估计你面试也就到这里了。

那说什么，后台管理就这些啊？！

如果你用了 Element UI 你可以说写了什么自定义 Element UI 表单组件，Element UI 表单源码是什么原理，怎么通信的？用了 Axios 可以说 Axios 的原理，它的拦截器怎么实现的？用了编辑器 diff 那你知道 diff 算法是什么吗？用了 ECharts 那你知道他底层是用什么绘制的吗？用了 husky ？husky的原理是什么？用了Vite，它为什么快？是怎么打包的？写过插件吗？

可能有人觉得我离谱，事实上上面每一个问题都是我在面试中真实被问到的。当然，如果全部去了解，肯定不现实，每个人的精力有限，不可能每个用到的每个工具每个库都去了解原理，不过只要有一两个你去了解过，就可以在面试中引导面试官来问，要学会表现出你擅长的点。

至于怎么读源码？以前我不知道，现在嘛…… 为什么不问问神奇的 ChatGPT 呢？

讲一下 Axios 源码中，拦截器是怎么实现的？

Axios 的拦截器实现基于 Axios 的核心原理，即 Axios 实例是一个包含请求和响应拦截器堆栈的对象。当发出请求或接收响应时，Axios 会遍历这些拦截器，并按照添加的顺序执行请求拦截器，以及按照相反的顺序执行响应拦截器。

在 Axios 的源码中，拦截器是通过一个 AxiosInterceptorManager 实例来管理的，它维护了一个拦截器数组。每个拦截器都是一个包含 fulfilled 和 rejected 函数的对象。这两个函数分别对应于拦截器成功处理和拦截器处理出错的情况。

以下是 Axios 拦截器管理器的一个简化版本，展示了其核心实现思路：

class InterceptorManager {

  constructor() {

    this.handlers = []; // 存储拦截器的数组

  }



  use(fulfilled, rejected) {

    this.handlers.push({

      fulfilled: fulfilled,

      rejected: rejected

    });

    return this.handlers.length - 1; // 返回拦截器的ID

  }



  eject(id) {

    if (this.handlers[id]) {

      this.handlers[id] = null; // 移除拦截器

    }

  }



  forEach(fn) {

    this.handlers.forEach((h) => {

      if (h !== null) {

        fn(h);

      }

    });

  }

}

在发送请求或接收响应时，Axios 会创建一个 promise 链，并通过 forEach 方法将拦截器中的 fulfilled 和 rejected 函数添加到这个链中。这样，每个拦截器都可以对请求或响应进行处理，然后将结果传递到链的下一个拦截器，或者在出错时结束链的执行。

axios.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {

  chain.unshift(interceptor.fulfilled, interceptor.rejected);

});



axios.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {

  chain.push(interceptor.fulfilled, interceptor.rejected);

});

在 Axios 的完整实现中，这个拦截器机制被集成到了 Axios 的请求发送和响应处理流程中。通过这种方式，Axios 可以在发送请求之前和接收响应之后，但在用户定义的 .then 或 .catch 执行之前，插入自定义的逻辑。

请注意，这里提供的代码只是为了说明 Axios 拦截器的实现原理，并不是 Axios 源码的完整复制。如果你对 Axios 的拦截器实现细节感兴趣，建议查看 Axios 的官方 GitHub 仓库中的源码。

前端基建

当我们工作时间久了面试难免会遇到这些问题，前端工程化，前端监控，工作流，部署，性能等等。其实我们在工作中绝大部分时间都在写代码，对于这些不是所有人都有机会接触到，不过这些和所做的业务无关，是我们提升自己很好的一个思路。

技术选型

技术栈选 Vue 还是 React？Vue 选 Vue2 还是 Vue3？组件库选 ElementUI 还是 Ant Design？微前端有没有使用过？打包工具用 Vite 还是 Webpack？有那么多表单怎么实现的，有没有什么表单配置化方案，比如Formily？

对于我这种菜鸡，我这种只写简单的表单表格的人，这些都……无所谓……

不过为了应对面试我们还是需要了解下未选择技术栈的缺点，和已选择技术栈的优点（有点本末倒置…但是常规操作啦）

Vue 你可以说简单高效轻量级，面试必会问你为什么，你就开始说 Vue 的响应式系统，依赖收集等。

React 你可以说 JSX、Hooks 很灵活，那你必然要考虑 JSX 怎么编译， Hooks 实现方式等。

总体而言，对于技术选型，依赖于我们对所有可选项的理解，做选择可能很容易，给出合理的理由还是需要花费一些精力的。

开发规范

这个方面，在面试的时候我被问到的不多，我们可以在创建项目的时候，配置下 ESlint，stylelint， prettier， commitlint 等。

前端监控

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

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

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

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

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

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

CI/CD

持续集成（Continuous Integration, CI）和 持续部署（Continuous Deployment, CD），主要包括版本控制，代码合并，构建，单测，部署等一系列前端工作流。

场景的工作流有 Jenkins、 Gitlab CI 等。我们可以配置在合并代码时自动打包部署，在提交代码时自动构建并发布包等。

这块我了解不多，但感觉这些工具层面的东西，不太会涉及到原理，基本上就是使用的问题。还是需要自己亲自动手试一下，才能知道细节。比如在 Gitlab CI 中， Pipeline 、 Stage 和 Job 分别是什么，怎么配置，如何在不同环境配置不同工作流等。

了解技术动态

这个可能还是比较依赖信息收集能力，虽然我个人觉得很烦，但好像很多领导级别的面试很愿意问。

比如近几年很火的低代码，很多面试官都会问，你用过就问你细节，你没用过也会问你有什么设计思路。

还有最近的两年爆火的 AI，又或者 Vue React的最新功能，WebAssembly，还有一些新的打包工具 Vite Bun 什么的，还有鸿蒙开发……

虽然不可能学完每一项新技术，但是可以多去了解下。

总结

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

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

trae 深度体验：使用trae完美开发微信小程序

安装 trae

安装 trae 教程和使用文档大家可以参考官方文档，很详细。使用过 vscode 的用户几乎可以无缝切换过来。官方文档：docs.trae.ai/docs/what-i…

目前只支持 mac 系统，windows 预计 2 月份上线。

如果遇到下面的错误，请科学上网解决；

trae 项目实战：开发微信小程序

插件安装

要想在 trae 中完美体验小程序开发首先需要安装必要的两个插件WXML、微信小程序开发工具

WXML：微信小程序 .wxml 文件代码高亮，标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 code snippets）

微信小程序开发工具：提供小程序预览、打包上传、代码补全、语法高亮、项目模版等功能

安装 “wxml”插件

按照 vscode、trae 的插件安装方式安装就可以顺利安装：

安装 “微信小程序开发工具”插件

这个工具安装有一些曲折，按照 vscode 的使用习惯，首先在插件市场按名称搜索，结果大出意料，没有😄。

不知道是哪里出现了问题，按照官方文档指引去下载。

打开官方的网址 docs.trae.ai/docs/manage…， 全是英文，没关系，使用豆包 APP 打开网页，让豆包总结网页内容就行 😄：

文档中提到了两种方式：

• 从 Trae 的插件市场中安装（没搜索到微信小程序开发工具插件，此路不通😭）


• 把插件下载到本地，使用本地安装的方式。看下面动图：

右下角提示，直接安装失败！此路也不行。作为一个程序员折腾是我的本能，看看 trae 的 AI 能力能不能提供帮助。

顺便遇到个 bug：

插件安装失败后，图中的两个按钮点击了都没有任何反应，只能重启 trae 才能解决。

• 求助 trae 的 AI
  
  

  使用快捷键 command + U 打开右侧边栏，输入要问的问题：

  
  

  

看到上图，这个插件我们已经安装，在 trae chat 中给到的建议是里面有 "小程序开发助手"插件，但是没有提到如何安装。

更换模型，在 chat 的对话框右侧点击切换模型，使用 gpt-4o，来解决插件安装的问题：

多次尝试后，回答还是一如既往的固执。

在AI 给到的回复当中有个插件的命令，不过这个命令适合 vscode。

点击运行按钮试试，此时 trae 会自动打开 terminal，直接执行命令

提示安装成功，但是给 vscode 安装了。继续提问：

嗯，还是 vscode 命令，不过也没关系，更换为 trae 就行了：

trae --install-extension /Users/oo7/Downloads/crazyurus.miniprogram-vscode-extension-1.5.1.vsix

等待命令执行完毕：

安装成功。

至此两个插件就安装完毕，可以做小程序的开发了。

小结

在trae中安装用于微信小程序开发的“WXML”和“微信小程序开发工具”插件，过程各有不同：

• “WXML”插件：按照vscode、trae常规的插件安装方式即可顺利安装。


• “微信小程序开发工具”插件：在trae插件市场和vscode插件市场均搜索不到，通过从官方文档下载插件本地安装失败，求助trae的AI起初未得到有效解决，最终通过将适用于vscode的安装命令修改为适用于trae的命令trae --install-extension /xxxx/crazyurus.miniprogram-vscode-extension-1.5.1.vsix ，成功安装。


• 安装完成两个插件后，即可进行小程序开发。 同时，安装插件失败时存在点击重试和关闭按钮无反应的bug，需重启trae解决。


• 点击 chat 区域的 run 按钮一定要检测命令的安全性（不然遇到非法的命令直接运行结果很严重），同时也建议trae 只复制命令到终端即可。

小程序项目开发

在 trae 中开发小程序，还需要下载微信开发者工具，也许有人会问既然有了微信开发者工具为什么还要使用 trae？

• 微信开发者工具编写代码远远没有使用 trae 写代码快，bug 多，没有 AI。


• trae 功能插件丰富、UI nice、拥有免费的 AI👍。


• 微信开发者工具不能少，微信开发者工具有实时渲染，代码检测、性能分析、一键上传代码等微信小程序必须的功能。

使用 微信开发者工具打开你的项目，并点击打开模拟器和分离窗口，如下图：

然后打开 trae 编辑器，在你的桌面布局中配置如下排列方式：

这样我们就可以实现一边写代码一边调试效果的目地。

编写页面

代码编写

我已经有这样一个页面，不过界面太难看了，使用 Trae 来调试他：

页面 wxml 代码 ：

 <!--pages/tools/index.wxml-->

 <navigation-bar

     title="{{pageTitle}}"

     back="{{false}}"

 >

 </navigation-bar>

 <scroll-view

     type="custom"

     scroll-y

     enable-flex="{{false}}"

     scroll-with-animation="{{true}}"

     enable-back-to-top="{{true}}"

     enable-passive="{{true}}"

     show-scrollbar="{{false}}"

     refresher-default-style="white"

     bounces="{{true}}"

     fast-deceleration="{{true}}"

     lower-threshold="{{50}}"

     style="width: 100%; height: 100%;"

 >

     <sticky-section>

         <view class="toolbox" wx:if="{{tools.length > 0}}">

             <view class="item" wx:for="{{toolList}}">

                 <navigator open-type="navigate" hover-class url="{{item.url}}">

                     <image src="{{item.imageUrl}}" fade-in="{{true}}" mode="widthFix"></image>

                     <text class="title">{{item.title}}</text>

                     <view  class="description">

                         <text><span class="iconfont  icon-Fire-fill-red"></span>{{100}}</text>

                         <text class="description_right">去创作 <span class="iconfont icon-ChevronRight" style="font-size: 12px;"></span></text>

                     </view>

                 </navigator>

             </view>

         </view>

     </sticky-section>

 </scroll-view>

界面样式实在太丑了，对 .description 进行样式修改。在 index.wxss 文件中，选中 .description 的样式，在悬浮工具条中点击添加到对话，然后我们在对话区域输入我们的修改要求，trae 进行回答。然后点击应用按钮，可以直接把新的代码插入到源文件对应的行。并且 trae 还很贴心的显示了新旧代码的区分。

最后完成页面的修改，看效果：

index.wxss

 @import '../../asseat/iconfont.wxss';

 ​

 .toolbox {

     display: flex;

     flex-direction: row;

     flex-wrap: wrap;

     justify-content: space-around;

 }

 ​

 .toolbox .item {

     display: flex;

     flex-direction: row;

     flex-wrap: wrap;

     justify-content: space-around;

     width: 45%;

     background-color: white;

     margin-bottom: 20px;

     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

 }

 ​

 .toolbox .item image{

     /* height: 50px;*/

     /* max-width: 100px; */

     width: 100%; 

     overflow: hidden;

     /* border-radius: 5px; */

     border-top-left-radius: 5px;

     border-top-right-radius: 5px;

 }

 ​

 .toolbox .item .title {

     line-height: 40px;

     font-size: 15px;

     /* white-space: normal; */

     align-items: center;

     width: 100%;

     padding-left: 10px;

     font-weight: 400;

     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3)

 }

 ​

 .description {

     display: flex;

     flex-direction: row; /* 修改为列布局 */

     flex-wrap: nowrap;

 }

 .description .iconfont{

     font-size: 12px;

 }

 .description text {

     display: inline;

     line-height: 20px;

     font-size: 12px;

     width: 100%;

     padding-left: 10px;

     font-weight: 400;

     /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) */

  }

  .description text:first-child{

      color: red;

  }

 ​

 .description .description_right{

     font-size: 12px;

     text-align: right;

     width: 95%;

     display: inline-block;

     margin-right: 5px;

     color: #3cc51f;

 }

如果我们需要回溯代码的历史记录，我们可以选中代码，然后在工具条中选择编辑即可查看。

再来看动图，效果杠杠的🐂：

使用设计图转换为小程序代码

首先我们准备一个页面的设计图

然后使用快捷键 command+U打开右侧的chat 区域，把设计图粘贴进去，并进行对话。输入对话内容：把上图的样式布局转换为微信小程序的代码。看下面动图：

这样会生成对应微信小程序的3个文件: index.wxml、index.wxss、index.js ，然后我们使用应用按钮，将代码插入到对应的文件即可。看最后的效果：

看着效果还行，如果在使用过程中效果不是很好，可以多尝试几次。

小结

1、我们在编写代码过程中与AI 助手聊天,可以指定Trae中的内容(例如代码、文件、文件夹和工作区)作为AI助手阅读和理解的上下文。这 可确保AI助手的响应更符合您的需求。

大家在使用AI的过程中，普遍感觉就是AI不能代替程序员，写出来的代码基础就不能用，原因就是一般的 AI 无法理解用户的工程文件结构黑内容，更无法知道你文件之间、代码直接的关系。trae 做到了，通过项目、文件、代码直接的逻辑生成的答案更贴合实际情况，所以效果会更好些。

2、将图片直接转换为代码依赖强大的多模态模型，大大减低了程序员的工作量。不需要依赖任何内容，将生成的内容稍微修改就可以直接使用， good job 👍。

代码管理

trae 无缝集成了 git 的代码管理功能，我们只需要点点按钮就可以了。可以通过下面的两种方式激活代码管理：

• 如果当前打开的文件夹没有 Git 仓库，请单击初始化仓库以为其初始化一个仓库。初始化完成后，源代码控制将被启用。


• 单击发布到 GitHub直接将此文件夹发布到 GitHub 仓库。发布后，可以访问源代码控制。

Trae配置

熟悉 vscode 的用户，对于配置 Trae 也很简单，使用快捷键 command+, 打开设置项：

根据自己的喜好配置即可。

总结

• 安装 Trae：可参考官方文档进行安装，使用过 VS Code 的用户能无缝切换。


• 插件安装
  
  

  WXML 插件：按常规方式顺利安装，可实现代码高亮、智能补全等功能。

  
  

  微信小程序开发工具插件：在市场搜索无果，本地安装失败。最终将适用于 VS Code 的命令修改后成功安装。安装失败时存在按钮无响应的 Bug，需重启 Trae 解决。

  
  

  Trae 的插件市场有部分插件是无法搜索到（具体原因未知），遇到无法安装的插件建议使用离线安装的方式，使用命令安装，



• 小程序项目开发
  
  

  结合工具：同时使用微信开发者工具和 Trae，微信开发者工具于实时渲染等，Trae用于高效代码编写和利用 AI 功能。

  
  

  代码编写：可选中代码向 Trae 的 AI 提出修改要求，直接将新代码插入源文件，还能查看代码历史记录。

  
  
  
  
  • 设计图转换代码：依赖多模态的能力，可以在 chat 区域，粘贴设计图并对话，可生成小程序代码文件，效果不佳时可多次尝试。
  
  
  • 代码管理：无缝集成 Git 功能，可通过初始化仓库或发布到 GitHub 激活源代码控制。
  
  
  • 配置 Trae：熟悉 VS Code 的用户可使用快捷键打开设置项进行个性化配置。
  
  
  
  

前端开发与组件库

注：全文所说的小公司特指：资源不足、技术能力不足的团队

在一些小公司的项目开发中，我们可能常常听到这样的想法：

• 我们公司的需求比较特殊，用现有的组件库不够灵活，不如自己封装一套！


• 现有的组件库样式不符合我们的产品需求，我们需要统一风格和功能，不如自己开发一套组件库吧！

以前我会很天真的支持这样的想法，现在，我会给提出者一个大嘴巴子！看似高瞻远瞩，实则全是陷阱，甚至可能成为整个团队的噩梦。

一个loading组件引起的生产事故

我先讲一个我们公司因为组件库导致的财产损失生产事故！

之前，我们业务有实现过一个表格，由于接口非常快，我们并没有增加loading样式。

代码实现也非常简单：

<template>

    <section class="table-section">

        <m-table :columns="columns" :data-source="tableData">

        </m-table>

    </section>

</template>

<script setup>

const tableData = ref([]);

const columns = []



const getTableData = async () => {

    // ...接口调用逻辑

    queryManageList()

};



// 获取表格数据

getTableData();



onMounted(() => {

  // 动态设置表头数据

  columns = []

});

    

</script>

m-table是我们公司的内部表格组件，上面的代码在生产稳定运行。随着数据的增多，接口有些慢了，于是客户希望加个loading。

我们公司的Loading组件模仿自Elemnet Plus，api的调用也非常相似

参考文档，代码的更改也就非常容易

<template>

    <section class="table-section">

        <m-table :columns="columns" :data-source="tableData">

        </m-table>

    </section>

</template>

<script setup>

const tableData = ref([]);

const columns = []



const getTableData = async () => {

   loadingInstance = Loading('.table-section');

   // ...接口调用逻辑

   await queryManageList()

  loadingInstance.destroy

};



// 获取表格数据

getTableData();



onMounted(() => {

  // 动态设置表头数据

  columns = []

});

    

</script>

代码看着严丝合缝，十分完美，然而，部署生产后，发现columns直接没了！

经过线上排查，发现loadingInstance = Loading('.table-section')这段代码直接替换了section标签内部的所有dom元素，造成表格的vue实例出现异常，onMounted钩子根本没有执行！

反观Element PLUS，人家直接是在section标签下生成的遮罩层，就不会存在这个问题！

小公司开发的组件，由于开发者技术参差不齐，很容易出现线上问题啊！这种问题在我们的日常开发中非常常见，害人啊！

为什么小公司不要轻易封装组件库

通过上面的案例，可以看出：小公司的开发人员技术参差不齐，组件库的质量也就无法得到保证。当然，技术还不是主要原因，毕竟技术是可以提升的，但下面的几个问题才是真要命的！

资源不足：人力和时间的双重消耗

封装组件库并非单纯的开发任务，它需要大量的人力和时间投入。对小公司而言，团队往往规模有限，开发资源紧张。

• 开发人员：为了封装一个组件库，原本负责业务开发的人员必须抽出精力进行组件封装工作，业务开发的进度被迫拖延。


• 时间成本：开发一个组件库不仅仅是写几个按钮或者表单，还涉及到设计体系、文档编写、单元测试、性能优化和浏览器兼容性处理等，这是一项长期工程。

就拿我们公司举例，我们一遍要写业务代码，一遍要维护组件，非常消耗时间！

就这，公司还不断地给我们加任务，把我们当牛马，直接开启996！

加班费没有我们就忍了，996一次不够，还梅开二度！

业务开发都没时间，还维护组件库，这不是自己坑自己么？ 小公司没钱没实力，再别开发组件库了，来来回回坑自己人！

维护成本高：一时造轮子，一世修轮子

自己封装组件库容易，但长期维护它却很困难。随着项目的迭代和需求的变化，组件库也需要不断更新和优化。

• 需求增加： 业务需求多样化导致组件库功能膨胀，原本简单的组件变得复杂不堪。


• Bug 修复： 自己封装的组件库缺乏大规模使用的验证，隐藏的 Bug 往往在上线后爆发，修复工作耗费大量时间。


• 兼容性问题： 浏览器兼容、新技术支持（如 Vue 3、React 18）的适配工作更是让人头疼。

我们的组件库更新非常频繁，因为随着产品的迭代，要增加很多新功能。有时候，为了使用组件的新功能或者样式，我们不得不升级组件版本。然而，有一次升级后，组件库内部存在严重bug，导致我们原有的许多界面崩溃，造成了重大生产事故！

这种组件升级导致的页面问题时常发生，加了一个功能，导致一个隐藏bug，后续为了解决这个隐藏bug，又引入其他bug，最终一个小功能要发好几个组件版本才能解决。我已经无力吐槽，害人啊！

而且，由于组件的功能不完善，经常要花费非常多的沟通成本

技术负债：短期便利，长期拖累

自建组件库在开发初期可能感觉很“顺手”，但随着项目规模扩大，组件库的缺陷会逐渐显现，成为团队的技术负债。

• 缺乏标准化： 自建组件库的规范不够完善，不同开发者在实现同一功能时可能写出风格完全不同的代码。


• 文档不足： 由于时间和人力限制，自建组件库的文档往往不完善，后期新成员加入时难以上手。


• 升级困难： 自建组件库的每次升级都可能影响到现有业务，增加维护和测试成本。

员工离职风险：组件库成孤岛

小公司人员流动较为频繁。

如果负责组件库开发的员工离职，组件库很可能会变成“孤岛”，无人维护，直接影响到项目的可持续性。

经济形式不好，我们公司近几年也裁了不少员，导致一些组件直接没人维护了，直接影响项目进度。

所以，资金、时间不充足，咱小厂还是别学大厂维护组件库了，要钱没钱，要时间没时间，来来会会坑的都是自己！

总结

封装组件库对小公司来说是一个高风险、高成本、低收益的选择。本人建议如下：

各位Leader注意，技术的最终目的是为业务服务！别为了凸显自己牛逼，强行开发维护一个组件库，最终只会害人害，搬起石头砸自己的脚！

小公司不要让组件库拖住脚步，把资源投入到更有价值的地方，才是发展的正确道路。

注：以上所有言论只针对公司的产品、项目而言！对于个人，你怎么玩都行，玩的越花越好，毕竟以后出去都是面试的资本！

啥也不是，散会！

写给我前端同事，从事一年多前端应该要怎么成长的路线

我知道在很多中大型公司，其实有好多领导前辈、以及师傅会给那些校招生，以及应届生规划一定的学习成长路线，可能还会有定期的大佬分享。有这么一个领路人、环境在其实成长是飞速的。

我入职了一家新单位，这家单位的没有太多规范，没有太多的组件封装积累，还会考核每周的代码量,我发现有些阶段代码量（测试阶段、需求阶段等）不够的时候大家都是往项目中塞没用的代码，还有些同学会复制公共组件的代码进自己的模块充代码，技术栈使用的是vue3 + js + ant-design-vue，一大部分人做的都是项目。

苏洋同学（化名）工作了2年左右，换过2家公司，第一家是个小公司也是在写一些后台管理的功能，这是他的第二家公司入职这家公司也有一年左右时间了。他逻辑，工作态度都没问题，也算是个积极上进的零零后好青年。他当前项目中的代码开发没问题，项目中多是一些业务表单，工作流之类的东西，有用户权限控制。有的时候他会请教我一些问题我俩也就从问题聊了聊技术，并且我把我的博客分享给了他，他说他有空会看看学习下。

我跟他从我的博客文章中聊了下他可能需要怎么做来获得成长，当然现在这个环境下我不能跟他说你多学一点可能工资就会高一些，假如在3年前我一定会告诉他，你学完这些其实可以换个公司去试试一定会比你现在的要高一点。可能学习完假如被迫换工作（裁员）了，机会会大点吧

大佬请绕路，我可能给的建议并不是最好的，但是我觉得对他来说现阶段是最使用的

针对他的成长经历规划

他的js基础可能没那么好，像一些数据处理上是有些问题，那么我建议他：

1. 重新学习下js针对数组,字符串等API，像字符串的cancat、includes、indexOf、lastIndexOf、endsWith、startsWith等等，像数组的forEach、map、filter、reduce、find、findIndex、some、every等等，他说他有些好像没有使用过。 学习了解用法，并且写一样的源码。例如：

解释
解释
'123'.endsWith('3'); // true



export const _endsWith = (source: string, target: string) => {

  const len = target.length;

  const substrValue = source.substr(source.length - len, len);



  return substrValue === target;

};



_endsWith('123456', '56'); // true

• 对堆和栈要有一定的理解，对深拷贝、浅拷贝有一定的理解。
• 对宏任务和微任务以及事件执行的理解。
• 对防抖和节流有一定的理解
• 对this有一定的理解并写出apply、call、bind的实现。
• 对类型判断instanceof、typeof、Object.prototype.toString.call等方法有理解。
• 对对象方法的使用Object.keys、Object.values、Object.entries、Object.assign等等

3. 去看下lodash的源码，例如：throttle、debounce、cloneDeep、groupBy、get、difference等等一些常用的方法函数要会写源码，最好自己写一遍。
   
4. 对正则表达式能对有一定的理解，并且写出一些常用的正则。
5. CSS 中对主题适配能有一定的理解，例如使用 less 和 Scss变量做主题适配，以及使用2套样式，或者使用css全局变量做主题适配。能区分出这几种的不同点

如果能把js的以上都能掌握了，那么你的基础算是扎实的了，差的可能就是工作经验以及深入了解一些框架的源码了。

6. 这个时候可以学习下代码规范了，其实vue的话可以看看element ui组件代码的规范，组件的设计以及源码具体。至少能实现message组件以及按钮组件
7. 学习下设计模式，例如：单例模式、策略模式、代理模式、发布订阅模式等等。
8. 可以多看看怎么写防御式编程，让你的代码更加健壮（这也就是为啥项目中bug多的问题，代码写的还不够严谨）
9. 可以去学习下TS,可能不用去特别做类型体操，基本的泛型能用，例如：Array、Record、Partial、Pick、Omit、Exclude、Extract等等。
10. 如果你对vue和react想深入研究，可以对比着使用看看它们之前的差异，有自己的认识。
11. webpack的配置，对打包优化有理解，对loader和plugin有理解，对打包工具有使用过。
12. 了解下npm,对npm 发布等命令有一定的理解，并且尝试自己发布一个包。
13. 对git提交规范有理解，并且使用。可以深入了解下git规范定义以及拦截。
14. 对 nginx 有一定的了解，并且使用。因为现在好多项目都是多页应用了，nginx就显得很重要了。
15. echarts 是图表库，可以学习下他的那些简单图表怎么使用canvas画出来的。

恭喜，假如你上面都能学会，我觉得你很了不起了，至少算是中级前端工程师。

16. 制定公司代码规范eslint, git 提交规范等等
17. git CI制定工作流是很重要的，可以学习下。
18. ...
19. ...
20. ...

结语

其实如果从事这个行业，可以把上面当作一个学习清单，然后按照顺序学习，这些都是必须且要学会的。然后把学习到的东西都记录下来。多总结，多思考，

作者：三原
来源：juejin.cn/post/7448899248475684899

一、实现一个快速评分组件

const getRate = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

console.log(getRate(0)); // ☆☆☆☆☆

console.log(getRate(1)); // ★☆☆☆☆

console.log(getRate(2)); // ★★☆☆☆

console.log(getRate(3)); // ★★★☆☆

console.log(getRate(4)); // ★★★★☆

console.log(getRate(5)); // ★★★★★

这个都不用多解释了，简直写的太妙了！

二、巧用位运算

用位运算可以实现很多功能，比如乘2、除2（或者2的倍数），向下取整这些计算操作，而且性能很高！

let num = 3.14159;

console.log(~~ num);  // 向下取整，输出3

console.log(2 >> 1); // >>表示右移运算符，除2，输出1

console.log(2 << 1); // <<表示左3移运算符，乘2，输出4

并且，利用~符,即按位取反运算符（NOT operator），还可以和字符串的indeOf方法配合使用。

const str = 'acdafadfa'

if (~str.indexOf('ac')) {

  console.log('包含')

}

其实原理很简单，举几个例子大家就明白了：

• ~-1的结果是0。


• ~0的结果是-1。


• ~1的结果是-2，~2的结果是-3。

三、漂亮随机码

const str = Math.random().toString(36).substring(2, 10)

console.log(str); // 随机输出8位随机码

这个在要为每个用户生成一个随机码的时候特别好用，具体随机码多少位可以自己控制，如果要的随机码位数特别长，可以把这个函数多调用一次，然后把结果进行字符串拼接。

四、史上最NB的报错处理

try {

  const str = '';

  str.map(); // Uncaught TypeError: str.map is not a function

} catch(e) {

  window.open("https://stackoverflow.com/search?q=js+" + e.message);

}

这应该是史上最NB的报错处理了，一般来说，抛出错误时应该打印日志并上报，这里直接带着报错信息给人家重定向到stackoverflow去了，顺便stackoverflow搜索了下这个报错，直接搜一波错误解决方案，而且这个网站是全英文的，顺便还能学一波英语，对于开发者来说，这简直太妙了！不过记得上线的时候，记得在跳转前加一个if(process.env.NODE_ENV === 'development')，不然上到线上一旦报错可就惨了!

五、倒序排序的简写

const arr = [1, 2, 3, 4, 5];

for (let i = arr.length - 1; i >= 0; i--) {

    console.log(arr[i]);      

}

可简写为：

const arr = [1, 2, 3, 4, 5];

for(let i = arr.length; i--;) {

    console.log(arr[i]);

}

代码解释：

先来回顾下for循环的书写结构，即for (初始化表达式; 条件表达式; 递增表达式),初始化表达式只会执行一次，而条件表达式和递增表达式在每次循环时都会执行一次，而正好这个倒序循环的终止执行条件为i==0，所以就可以把条件表达式和递增表达式合而为一了，主打的就是一个简洁。

六、在控制台输出一个键盘图形

console.log((_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`

    `)())

这段代码会在浏览器控制台中打印出一个键盘图形，不得不说写出这段代码的人真的太有才了！

以上就是我总结的一些前端代码的风骚操作，大家有没有更风骚的操作呢？欢迎大家留言分享！

大家好，我是一名前端工程师，也是开源图片编辑器vue-fabric-editor项目的作者，2024年5月从北京辞职，我便开始了自己的轻创业之路，接触了不同的客户和业务场景，回顾这半年，没想到学会fabric.js这个Canvas库，竟能做这么多项目。

如果你打算学习一个Canvas库或者做图片设计、定制设计相关的工具，我建议你学习一下fabric.js 这个库，它非常强大，可以做出很多有意思的项目，希望我的项目经历能给你的技术选型做一些参考。

• 开源项目：vue-fabric-editor


• 预览：http://www.kuaitu.cc

项目经历

从北京回老家邯郸后，我陆续做了很多项目，包括正件照设计、锦旗/铭牌定制工具、Shopify定制插件、批量生成图片、手机版图片设计工具、服装设计、电商工具等，这些项目都离不开fabric.js这个库。回顾这段经历，让我深刻体会到它的强大和广泛应用。

图片设计

图片设计是我接触的第一个主要应用领域。项目最初源于一个小红书成语卡片设计工具的构想，随后逐步扩展到更广泛的设计场景，包括小红书封面、公众号头图、营销海报以及电商图片等多种自媒体内容制作。

这类应用的核心功能在于自定义画布尺寸和元素排版，得益于fabric.js的原生支持，实现起来相对简单。我们主要工作是开发直观的属性编辑面板，使用户能够便捷地调整所选元素的文字和图片属性。

当然如果做的完善一些，还需要历史记录、标尺、辅助线对齐、快捷键等，这些功能fabric.js并没有包含，需要我们自己实现，这些功能可以参考vue-fabric-editor 项目，它已经实现了这些功能。

还有很多细节的功能，比如组合保存、字体特效、图层拖拽、图片滤镜等，这些功能我们做的比较完善了。

定制设计工具

图片设计的场景相对通用，没有太多定制化的需求。而定制类的设计工具则需要针对特定场景深度开发，比如正件照、锦旗/铭牌设计、相册设计等，每个场景有不同的定制功能。

正件照设计工具的核心在于自动化的处理。主要工作量集中在尺寸的匹配，确保图片能自动调整到最佳大小。同时，需要提供人物图片的裁剪功能，让用户能便捷地进行换装、切换正件尺寸、更换背景等操作。

锦旗与铭牌设计则更注重文字内容的自动排版。系统需要根据用户输入的抬头、落款、赠言等内容，自动计算最优的文字间距和整体布局，确保作品的美观性。特别是铭牌设计，还需要实现曲线文字功能，让文字能够优雅地沿着弧形排布。

相册设计工具的重点是提供灵活的画布裁剪功能。用户可以使用各种预设的形状模板来裁剪图片，需要确保裁剪后的图片既美观又协调，最终生成精美的画册作品，交互上方便用户拖拽图片快速放入裁剪区域。

电商工具

电商场景比图片设计更垂直，除了普通的平面设计，例如店铺装修、商品主图、详情图的设计，另外还需要对商品进行换尺寸、抠图、换背景、去水印、涂抹消除、超清放大等操作，这些对图片处理的要求更高一些。

批量生成

批量算是一个比较刚需的功能，比如电商的主图，很多需要根据不同产品到图片和价格来批量加边框和文字，以及节庆价格折扣等，来生成商品主图，结合图片和表格可以快速生成，减少设计师的重复工作量。

另一部分是偏打印的场景，比如批量制作一些商品的二维码条形码，用在超市价签、电子价签、一物一码、服装标签等场景，根据数据表格来批量生成。

这种项目主要的工作量在交互上，如何将画布中的文字和图片元素与表格中的数据一一对应，并批量生成，另外会有一些细节，比如条形码的尺寸、图片的尺寸如何与画布中的尺寸比例进行匹配，这些细节需要我们自己实现。

上边的方式是通过表格来批量生成图片，还有一种是根据 API来批量生成图片，很多场景其实没有编辑页面，只希望能够通过一个 API，传入模板和数据，直接生成图片，fabric.js 支持在nodejs 中使用，我们要做的就是根据模板和数据拼接 JSON，然后通过fabric.js 在后端生成图片，然后返回给前端，性能很好，实际测试 2 核 2G 的机器，每张图片在 100ms 左右。

很多营销内容和知识卡片、证书、奖状也可以通过批量生成图片API来实现。

当然，还有一些更复杂的场景，比如不同的数据匹配不同的模板，不同的组件展示不同的形式等，包括错别字检测、翻译等，我们也为客户做了很多定制化的匹配规则。

服装/商品定制

服装/商品定制是让用户在设计平台上上传图片，然后将图片贴图到对应的商品模板上，实现让用户快速预览设计效果的需求。

这种场景一般会分为 2 类，一类是是针对 C 端用户，需要的是简单、直观，能够让用户上传一张图片，简单调整一下位置就能确认效果快速下单。

我在这篇文章里做了详细介绍：《fabric.js 实现服装/商品定制预览效果》。

另一类是针对小 B 端的用户，他们对设计细节有更高的要求，比如领子、口袋、袖子等，不同的位置进行不同的元素贴图，最后将这些元素组合成一个完整的服装效果图，最后需要生成预览图片，在电商平台售卖，完成设计后，还要将不同区域的图片进行存储，提供给生产厂家，厂家快速进行生产。

比如抱枕、手机壳、T恤、卫衣、帽子、鞋子、包包等，都可以通过类似服装设计的功能来实现。

很多开发者会提出疑问，是否需要介入 3D 的开发呢？
我们也和很多客户沟通过，从业务的角度看，他回答是：3D 的运营成本太高。他们做的都是小商品，SKU 很多很杂，如果每上一个商品就要进行 3D 建模，周期长并且成本高，他们更希望的是通过 2D 的图片来实现，而且 2D 完全能够满足让用户快速预览确认效果的需求，所以 2D 的服装设计工具就成为了他们的首选。

包装设计

包装设计是让用户在设计平台上，上传自己的图片，然后将图片贴图都包装模板上，主要的场景是生成定制场景，比如纸箱、纸袋、纸盒、纸杯、纸质包装等，这些场景需要根据不同的尺寸、形状、材质、颜色等进行定制化设计，最后生成预览图片。

因为设计到不同的形状和切面，而且大部分是大批量定制生产，所以对细节比较谨慎，另外包装规格相对比较固定，所有用3D模型来实现就比较符合。

另外，在确定设计效果后，需要导出刀版图，提供给生产厂家，厂家根据刀版图进行生产，所以需要将设计图导出为刀版图，这个功能 fabric.js 也支持，可以导出为 SVG 格式直接生产使用。

AI结合

在AI 大火的阶段，就不得不提 AI 的场景了，无论在自媒体内容、电商、商品、服装设计的场景，都有 AI 介入的影子，举个例子，通过 AI生成内容来批量生成营销内容图片，通过 AI 来对电商图片进行换背景和图片翻译，通过 AI 生成印花图案来制作服装，通过 AI 来生成纹理图来生成纸盒包装，太多太多的 AI 的应用场景，也是客户真金白银定制开发的功能。

展望2025

从图片设计的场景来看，我们的产品已经很成熟了，也算是主力产品了，未来会持续迭代和优化，让体验更好，功能更强大，把细节做的更完善，例如支持打印、视频生成等功能。

从定制设计工具的场景来看，我们积累了不同商品定制设计的经验，从技术和产品到角度看，我们还可以抽象出更好的解决方案，让客户能够更高效、低成本的接入，提供给他们的客户使用，快速实现设计生产的打通。

2024 到 2025 ，从在家办公一个人轻创业，搬到了我们的办公室，期待未来越来创造更多价值。

总结

半年的时间，这些项目的需求fabric.js都帮我们实现了，所以如果你对Canvas感兴趣，我的亲身经历告诉你，学习fabric.js是一个不错的选择。

另外，对我来说更重要的是，客户教会了我们很多业务知识，这些才是宝贵的业务知识和行业经验，一定要心存敬畏，保持空杯，只有这样我们才能做好在线设计工具解决方案。

这篇文章也算是我从 2024年离职出来到现在的一个年终总结了，希望我们踩过的坑和积累的经验都变成有价值的服务，作为基石在2025年服务更多客户，文章内容供大家一些参考，期待你的批评指正，一起成长，祝大家 2025年大展宏图。

给我们的开源项目一个Star吧：github.com/ikuaitu/vue… 😄。

Timesheet.js - 轻松打造炫酷时间表

前言

在现代网页设计中，时间表是一个常见的元素，用于展示项目进度、历史事件、个人经历等信息。

然而，创建一个既美观又功能强大的时间表并非易事。

幸运的是，Timesheet.js 这款神奇的 JavaScript 开源时间表库为我们提供了一个简洁而强大的解决方案。

本文将详细介绍 Timesheet.js 的特点、使用方法，并通过一个真实的使用案例来展示其强大功能。

介绍

Timesheet.js 是一个轻量级的 JavaScript 库，专门用于创建基于 HTML5 和 CSS3 的时间表。

它无需依赖任何外部框架，如 jQuery 或 Angular.js，即可快速生成美观的时间表布局。

Timesheet.js 的优势在于其简洁性和用户友好性，仅需几行 JavaScript 代码即可实现功能，同时提供了丰富的自定义选项，允许开发者根据需求进行样式调整。

核心特性

无依赖：不依赖任何外部 JavaScript 框架，减少了项目复杂性和加载时间。
易于使用：通过简单的 JavaScript 代码即可创建时间表，易于上手。
高度可定制：提供了丰富的 CSS 类，方便开发者自定义时间表的外观。
响应式设计：支持移动设备，确保在不同屏幕尺寸上都能良好显示。

官方资源

官网：sbstjn.github.io/timesheet.j…

GitHub 仓库：github.com/sbstjn/time…

使用案例

假设我们要为一个在线教育平台创建一个展示学生学习历程的时间表。

这个时间表将展示学生从入学到毕业的各个阶段，包括参加的课程、获得的证书等信息。

步骤 1：引入库文件

首先，在 HTML 文件中引入 Timesheet.js 的 CSS 和 JavaScript 文件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timesheet.js/dist/timesheet.min.css" />

<div id="student-timeline">div>

<script src="https://cdn.jsdelivr.net/npm/timesheet.js/dist/timesheet.min.js">script>

步骤 2：准备数据

接下来，准备时间表所需的数据。

在这个案例中，我们将展示一个学生从 2018 年入学到 2022 年毕业的学习历程。

const studentTimelineData = [

  ['09/2018', '06/2019', '入学 & 基础课程学习', 'default'],

  ['09/2019', '06/2020', '专业课程学习', 'ipsum'],

  ['07/2020', '01/2021', '暑期实习', 'dolor'],

  ['09/2020', '06/2021', '高级课程学习', 'lorem'],

  ['07/2021', '01/2022', '毕业设计', 'default'],

  ['06/2022', '09/2022', '毕业 & 就业', 'ipsum']

];

步骤 3：初始化 Timesheet.js

最后，使用 Timesheet.js 初始化时间表，并传入准备好的数据。

完整代码

将上述代码整合到一个 HTML 文件中，即可创建出一个展示学生学习历程的时间表。

html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>学生学习历程时间表title>

  <link rel="stylesheet" href="./timesheet.js/dist/timesheet.min.css" />

head>

<body>

  <div id="student-timeline">div>

  <script src="./timesheet.js/dist/timesheet.min.js">script>

  <script>

    const studentTimelineData = [

      ['09/2018', '06/2019', '入学 & 基础课程学习', 'default'],

      ['09/2019', '06/2020', '专业课程学习', 'ipsum'],

      ['07/2020', '01/2021', '暑期实习', 'dolor'],

      ['09/2020', '06/2021', '高级课程学习', 'lorem'],

      ['07/2021', '01/2022', '毕业设计', 'default'],

      ['06/2022', '09/2022', '毕业 & 就业', 'ipsum']

    ];

    const timesheet = new Timesheet('student-timeline', 2018, 2022, studentTimelineData);

  script>

body>

html>

效果如下

总结

Timesheet.js 是一个非常实用的 JavaScript 时间表库，它以简洁的代码和强大的功能为开发者提供了一个创建时间表的便捷工具。

通过本文的介绍和使用案例，相信你已经对 Timesheet.js 有了基础的了解。

无论是在个人项目还是企业应用中，Timesheet.js 都能帮助你快速创建出美观且功能强大的时间表，提升用户体验。

如果你对 Timesheet.js 感兴趣，不妨尝试在自己的项目中使用它，探索更多可能。

前言

最近公司项目有时需要和多个后端同时对接（😔小公司一对N），于是对公司项目基础配置文件做了些修改，最终达到能对于多个后端同时启动多个前端服务，而不是每次都需要和A同学对接完，代理地址再换成B同学然后重新启动项目

个人经验0.5年，菜鸡前端一枚，第一次写文章，只是对个人工作简要记录😂!!!

公司项目有vue脚手架搭建的也有vite搭建的，下面让我们分两种方式来修改配置文件

vue-cli方式【webpack】

1. 个人习惯把proxy单独抽离出来放到.env.development

# 启动端口号

VUE_PORT = 8000



# 代理配置

# A同学

VUE_PROXY_A = [["/api","http://localhost:3001"]]



# B同学

VUE_PROXY_B = [["/api","http://localhost:3002"]]

2. 使用cross-env来加载不同的代理

npm i -D cross-env

重新编写下script

3. 读取环境变量

vueCli内部dotenv已经加载到process.env,我们再做一层包裹，之前配置的proxy，这种其实是字符串，需要处理

const { VUE_PROXY, VUE_PORT } = require("./constant.js")



// Read all environment variable configuration files to process.env

function wrapperEnv(envConf) {

  const ret = {}

  const SERVER_NAME = process.env.NODE_ENV_PROXY || VUE_PROXY



  for (const envName of Object.keys(envConf)) {

    if (!envName.startsWith('VUE')) {

      continue

    }

    let realName = envConf[envName].replace(/\\n/g, '\n')

    realName = realName === 'true' ? true : realName === 'false' ? false : realName



    if (envName === VUE_PORT) {

      realName = Number(realName)

    }

    if (envName === SERVER_NAME && realName) {

      try {

        realName = JSON.parse(realName.replace(/'/g, '"'))

      } catch (error) {

        realName = ''

      }

    }

    ret[envName === SERVER_NAME ? VUE_PROXY : envName] = realName

    if (typeof realName === 'string') {

      process.env[envName] = realName

    } else if (typeof realName === 'object') {

      process.env[envName] = JSON.stringify(realName)

    }

  }

  return ret

}



module.exports = {

  wrapperEnv

}

这样我们就可以拿到所有的环境变量，并且proxy是数组，而不是字符串

4. 生成proxy

/**

 * Used to parse the .env.development proxy configuration

 */



const httpsRE = /^https:\/\//



/**

 * Generate proxy

 * @param list

 */

function createProxy(list = []) {

  const ret = {}

  for (const [prefix, target] of list) {

    const isHttps = httpsRE.test(target)



    // https://webpack.docschina.org/configuration/dev-server/#devserverproxy

    ret[prefix] = {

      target: target,

      changeOrigin: true,

      ws: true,

      pathRewrite: { [`^${prefix}`]: '' },

      // https is require secure=false

      ...(isHttps ? { secure: false } : {}),

    }

  }

  return ret

}



module.exports = {

  createProxy,

}

5. 修改vue.config.js

const { defineConfig } = require('@vue/cli-service')

const { wrapperEnv } = require('build/vue/util')

const { createProxy } = require('./build/vue/proxy')



const {

  VUE_PORT,

  VUE_PROXY

} = wrapperEnv(process.env)



module.exports = defineConfig({

  transpileDependencies: true,

  // webpack-dev-server 相关配置

  devServer: {

    host: '0.0.0.0',

    port: VUE_PORT,

    open: false,

    overlay: {

      logging: 'info',

      errors: true,

      warnings: true

    },

    proxy: createProxy(VUE_PROXY),

    disableHostCheck: true

  },

})

6. 使用mock模拟两个后端服务

A同学使用3001端口
B同学使用3002端口

7. 测试是否达到效果

同样我们前端也起两个8000和8001

接下来看下8000端口请求

再看下8001请求

vite

结语

以上只写了webpack不过vite和这也差不多！！！

这样就写好一个游戏了.

游戏逻辑开发是和 html5 游戏一样的, 最后一小节我再赘述下吧.

游戏逻辑编写

游戏逻辑在 ts 的脚本文件中编写.

所有新建的 ts 文件都会有一个初始模板. 内容是export class XXX extends cc.Component {}.

这个类有2个生命周期方法. start()和update().

update()方法的参数deltatime是离上一帧的时间, 不了解的去看下 h5 游戏的执行就好了.

游戏逻辑一定涉及到元素, 只要在脚本文件里声明一个属性, 就能在节点属性面板上看到一个属性.

把这个属性需要控制的元素拖过去就行.

然后元素节点也可以绑定脚本. 这个脚本可以通过this.node提供的 api 来操作元素的位置.

元素节点一般会绑定动画, 也需要把动画声明在属性里, 然后从资源列表把动画拖动到自己的节点属性面板上, 就可以在脚本里调用动画了.

我现在理解的层级是这样的:

• 总脚本gameControl写在单独节点里. 写游戏逻辑与结算判断.
• 会动的元素, 自己绑定节点, 写一些方法供总脚本调用.
• 编辑一些动画, 供上一步"会动的元素"调用. 一般是和元素位置的移动同时调用的.

贴一些代码

这里分享个具体的demo代码. demo内容很简单, 按方向键角色就会在地图上走路.

走路的时候会播放一个帧动画, 是从微信表情里导出的20个png.

脚本文件只有2个. 一个是gameControl游戏控制, 只做了监听键盘事件, 并调用player脚本的对应方法.

另一个player脚本写了对应的方法, 改变一些参数, 在update()方法根据参数来设置角色的位置.

gameControl.ts

import { _decorator, Component, Node, input, Input, EventKeyboard } from 'cc'

const { ccclass, property } = _decorator



import { player } from './player'



@ccclass('gameControl')

export class gameControl extends Component {

    @property(player)

    public player: player = null



    start() {

        input.on(Input.EventType.KEY_DOWN, (event) => {

            switch (event.keyCode) {

                case 37:

                    this.player.left()

                    break

                case 38:

                    this.player.up()

                    break

                case 39:

                    this.player.right()

                    break

                case 40:

                    this.player.down()

                    break



            }

        })

    }



    update(deltaTime: number) {



    }

}

player.ts

import { _decorator, Component, Node, Animation, tween, Vec3, math } from 'cc'

const { ccclass, property } = _decorator



@ccclass('player')

export class player extends Component {



    @property(Animation)

    anim: Animation = null



    @property(Node)

    lulu: Node = null



    private direction = new Vec3(1, 0, 0)

    private isMoving = false

    private movePeriod = 0



    start() {



    }



    update(deltaTime: number) {

        if (this.isMoving) {

            if (this.movePeriod < 1) {

                let target = this.node.position

                Vec3.add(target, this.node.position, this.direction)

                this.node.setPosition(target)

                this.movePeriod += deltaTime

            } else {

                this.isMoving = false

            }

        }

    }



    left() {

        if (!this.isMoving) {

            this.lulu.setRotationFromEuler(0, 0, 180)

            this.direction = new Vec3(-1, 0, 0)

            this.startMove()

        }

    }



    right() {

        if (!this.isMoving) {

            this.lulu.setRotationFromEuler(0, 0, 0)

            this.direction = new Vec3(1, 0, 0)

            this.startMove()

        }

    }



    up() {

        if (!this.isMoving) {

            this.lulu.setRotationFromEuler(0, 0, 90)

            this.direction = new Vec3(0, 1, 0)

            this.startMove()

        }

    }



    down() {

        if (!this.isMoving) {

            this.lulu.setRotationFromEuler(0, 0, 270)

            this.direction = new Vec3(0, -1, 0)

            this.startMove()

        }

    }



    startMove() {

        this.anim.play()

        this.isMoving = true

        this.movePeriod = 0

    }

}

另外做的demo是跟着cocos creator 文档的2d游戏做的. 有兴趣的也可以跟我一样, 先照着这个做一遍, 再自己新建个空项目自己操作.

最后

我认为 cocos creator 对 web 开发者来说真的是非常好上手了.

我认为小游戏的设计分为2个吧. 核心游戏场景, 与, 游戏运营.

其实核心游戏场景都不复杂的, 那怎么能让玩家一直玩呢.

其实就是策划运营, 操作一些数据, 让每次玩同一个场景, 看到不同的数字, 和不同的皮肤.

用户就会为了这些数字(pay for ability), 和皮肤(pay for love)来付费了.

我认为游戏脚本不难. 难在2点:

真的烦躁，一个月拿着死工资，每天写着增删改查，不知道以后能做什么，有时候真的想离职，进广东电子厂....

这段时间，XXXX 要加一个海康监控，哎。

苦命开发

从官网下载下来的web包

\webs\codebase 目录中有，第一个是插件，必须安装的， 后面两个JS文件是开发必要的。还要一个 JQ的，它内部使用了jq

初始化插件

引入了提供的jS后，就可以开始牛马了。。。。

首先注册插件，并检查更新

因为我这是4个摄像头，所以窗口是 2 * 2

WebVideoCtrl.I_InitPlugin 是用于初始化插件，成功回调是cbInitPluginComplete

WebVideoCtrl.I_CheckPluginVersion 用于检查更新。

在自动登录这里，我准备了数组，包含登录端口密码等信息，建议每一个之后都要等1秒。多个账号登录，插件只加载一次即可。

init() {

    // 这里的代码会在文档完全加载后执行

    WebVideoCtrl.I_InitPlugin({

        iWndowType: 2,    // 设置分屏类型为 2*2，显示 4 个窗口

        bWndFull: true,    // 支持单窗口双击全屏

        bDebugMode: true, // 关闭调试模式

        cbInitPluginComplete: async () => {

            console.log("插件初始化完成")

            try {

                // 加载插件

                await WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin")

                // 检查插件是否最新

                const bFlag = await WebVideoCtrl.I_CheckPluginVersion()

                if (bFlag) {

                    alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！")

                }



                for (const item of this.channel) {

                    // 自动登陆

                    this.clickLogin(item)

                    await new Promise(resolve => setTimeout(resolve, 1000))

                }

            } catch {

                alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！")

            }

        },

        iTopHeight: 0 // 插件窗口的最高高度

    })

}

实现登录

WebVideoCtrl.I_Login 是登录接口

• 参数1：ip地址


• 参数2：1 是http，2 是https


• 参数3：端口


• 参数4：平台账户


• 参数5：平台密码

// 登陆

clickLogin(item) {

    WebVideoCtrl.I_Login(item.ip, 1, item.port, 'admin', 'admin123', {

        timeout: 3000,

        success: () => {

            console.log('登陆成功')

            setTimeout(() => {

                setTimeout(() => {

                    this.getChannelInfo(item)

                }, 1000)

            }, 10)

        },

        error: (oError) => {

            if (this.ERROR_CODE_LOGIN_REPEATLOGIN === oError.errorCode) {

                console.log('已登录过！')

            } else {

                console.log(" 登录失败！", oError.errorCode, oError.errorMsg)



            }

        }

    })

}

获取通道信息

getChannelInfo 函数需要传递一个当前控制摄像头的信息对象。

模拟通道接口：WebVideoCtrl.I_GetAnalogChannelInfo

这里会使用 jq的一些方法，会对获取的xml元素进行遍历，并将获取的信息，加入到数组集合中，进行预览视频。

• id：获取的通道号是预览的必要字段。


• 数字通道：支持高清甚至超高清分辨率，如 1080P、2K、4K 等，但是对网络要求较高


• 零通道：无法播放，坏掉了。


• 模拟通道：成本小，实时性高。

// 初始化通道

getChannelInfo(item) {

    // 模拟通道

    WebVideoCtrl.I_GetAnalogChannelInfo(item.ip, {

        success: (xmlDoc) => {

            const oChannels = $(xmlDoc).find('VideoInputChannel')

            $.each(oChannels, (i, channelObj) => {

                let id = $(channelObj).find('id').eq(0).text(),

                    name = $(channelObj).find('name').eq(0).text()

                if ("" === name) {

                    name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1))

                }

                const ch = this.channel.find(arr => arr.ip === item.ip)

                ch.channelId = id

                ch.name = name

            })

            console.log(item.ip + '获取模拟通道成功！')



        },

        error: function (oError) {

            console.log(ip + '获取模拟通道失败！', oError.errorCode, oError.errorMsg)



        }

    })

    // 数字通道

    WebVideoCtrl.I_GetDigitalChannelInfo(item.ip, {

        success: function () {

            // console.log(item.ip + '获取数字通道成功！')

        },

        error: function (oError) {

            // console.log(item.ip + '获取数字通道失败！', oError.errorCode, oError.errorMsg)

        }

    })

    // 零通道

    WebVideoCtrl.I_GetZeroChannelInfo(item.ip, {

        success: function () {

            // console.log(item.ip + '获取零通道成功！')

        },

        error: function (oError) {

            // console.log(item.ip + '获取零通道失败！', oError.errorCode, oError.errorMsg)

        }

    })

    // 直接预览

    this.clickStartRealPlay(item)

}

预览窗口

clickStartRealPlay 函数需要传递一个当前控制摄像头的信息对象。

WebVideoCtrl.I_GetWindowStatus 可以获取窗口的状态，比如传递 0 ，可以查看 第一个窗口的状态。返回值如果不是null，表示在播放了。

WebVideoCtrl.I_Stop 用于关闭当前播放的窗口，参数 iWndIndex 用于控制关闭的那个窗口，默认会根据当前选中的窗口。

WebVideoCtrl.I_StartRealPlay 预览视频

• 参数一：ip地址 + 下划线 + 端口，拼接的字符串，比如：'192.168.1.101_80'


• 参数二：是码流，1 主码流，2 子码流


• 参数三：是前面通过通道获取的通道ID


• 参数四：默认是false，表示是否播放零通道


• 参数五：RTSP端口号

// 预览窗口

clickStartRealPlay(item) {

    const ips = item.ip + '_' + item.port

    // 获取窗口的状态

    const oWndInfo = WebVideoCtrl.I_GetWindowStatus(item.g_iWndIndex)

    const iRtspPort = ''

    const iChannelID = item.channelId

    const bZeroChannel = item.zeroType

    const szInfo = ''



    const startRealPlay = function () {

        WebVideoCtrl.I_StartRealPlay(ips, {

            iWndIndex: item.g_iWndIndex,

            iStreamType: 1,

            iChannelID: iChannelID,

            bZeroChannel: bZeroChannel,

            iPort: iRtspPort,

            success: function () {

                console.log(ips + '开始预览成功！')

            },

            error: function (oError) {

                console.log(ips + " 开始预览失败！", oError.errorCode, oError.errorMsg)

            }

        })

    }



    if (oWndInfo != null) { // 已经在播放了，先停止

        WebVideoCtrl.I_Stop({

            success: function () {

                startRealPlay()

            }

        })

    } else {

        startRealPlay()

    }

}

摄像头功能控制

接口：WebVideoCtrl.I_PTZControl

• 参数一：操作类型（1-上，2-下，3-左，4-右，5-左上，6-左下，7-右上，8-右下，9-自转，10-调焦+， 11-调焦-, 12-F聚焦+, 13-聚焦-, 14-光圈+, 15-光圈-


• 参数二：true 停止，false 启动


• 参数三：对象：iWndIndex 窗口号，默认为当前选中窗口，iPTZSpeed 云台速度，默认为4

<div class="jiu" :style="{display: isOpen ? 'flex': 'none'}">

    <div class="remote-control">

        <el-tooltip content="向左上转动" placement="top-start" effect="light">

            <div class="button top-left" @mousedown="mouseDownPTZControl(5, false)"

                @mouseup="mouseDownPTZControl(1, true)"></div>

        </el-tooltip>

        <el-tooltip content="向上转动" placement="top-start" effect="light">

            <div class="button" @mousedown="mouseDownPTZControl(1, false)"

                @mouseup="mouseDownPTZControl(1, true)">

                <i class="iconfont icon-shangjiantou1"></i>

            </div>

        </el-tooltip>

        <el-tooltip content="向右上转动" placement="top-start" effect="light">

            <div class="button top-right" @mousedown="mouseDownPTZControl(7, false)"

                @mouseup="mouseDownPTZControl(1, true)"></div>

        </el-tooltip>

        <el-tooltip content="向左转动" effect="light">

            <div class="button" @mousedown="mouseDownPTZControl(3, false)"

                @mouseup="mouseDownPTZControl(1, true)">

                <i class="iconfont icon-zuojiantou"></i>

            </div>

        </el-tooltip>

        <el-tooltip content="开启自动旋转" effect="light">

            <div class="button center" @click="mouseDownPTZControl(9, false)">

                <i class="iconfont icon-zidongxuanzhuan"></i>

            </div>

        </el-tooltip>

        <el-tooltip content="向右转动" effect="light">

            <div class="button" @mousedown="mouseDownPTZControl(4, false)"

                @mouseup="mouseDownPTZControl(1, true)">

                <i class="iconfont icon-youjiantou"></i>

            </div>

        </el-tooltip>

        <el-tooltip content="向左下转动" effect="light">

            <div class="button bottom-left" @mousedown="mouseDownPTZControl(6, false)"

                @mouseup="mouseDownPTZControl(1, true)"></div>

        </el-tooltip>

        <el-tooltip content="向下转动" effect="light">

            <div class="button" @mousedown="mouseDownPTZControl(2, false)"

                @mouseup="mouseDownPTZControl(1, true)">

                <i class="iconfont icon-xiajiantou1"></i>

            </div>

        </el-tooltip>

        <el-tooltip content="向右下转动" effect="light">

            <div class="button bottom-right" @mousedown="mouseDownPTZControl(8, false)"

                @mouseup="mouseDownPTZControl(1, true)"></div>

        </el-tooltip>

    </div>

</div>

<!-- 下方操作按钮 -->

<div class="div-group" :style="{display: isOpen ? 'block': 'none'}">

    <div style="display: flex; justify-content:space-around;">

        <el-button-group>

            <el-tooltip content="焦距变大" placement="top" effect="light">

                <div class="btn-groups" @mousedown="mouseDownPTZControl(10, false)" @mouseup="mouseDownPTZControl(11, true)">

                    <i class="iconfont icon-fangdajing-jia"></i>

                </div>

            </el-tooltip>

            <el-tooltip content="焦距变小" placement="top" effect="light">

                <div class="btn-groups" @mousedown="mouseDownPTZControl(11, false)" @mouseup="mouseDownPTZControl(11, true)">

                    <i class="iconfont icon-fangdajing-jian"></i>

                </div>

            </el-tooltip>

        </el-button-group>

        <el-button-group>

            <el-tooltip content="焦点前调" placement="top" effect="light">

                <div class="btn-groups" @mousedown="mouseDownPTZControl(12, false)" @mouseup="mouseDownPTZControl(12, true)">

                    <i class="iconfont icon-jiaodianqiantiao"></i>

                </div>

            </el-tooltip>

            <el-tooltip content="焦点后调" placement="top" effect="light">

                <div class="btn-groups" @mousedown="mouseDownPTZControl(13, false)" @mouseup="mouseDownPTZControl(12, true)">

                    <i class="iconfont icon-jiaodianhoutiao"></i>

                </div>

            </el-tooltip>

        </el-button-group>

        <!-- <el-button-group>

            <el-tooltip content="光圈扩大" placement="top" effect="light">

                <el-button>

                    <i class="iconfont icon-guangquankuoda"></i>

                </el-button>

            </el-tooltip>

            <el-tooltip content="光圈缩小" placement="top" effect="light">

                <el-button>

                    <i class="iconfont icon-guangquansuoxiao"></i>

                </el-button>

            </el-tooltip> -->

        </el-button-group>

    </div>

</div>

mouseDownPTZControl(iPTZIndex, selection) {

    // 获取窗口状态

    const oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.item.g_iWndIndex)

    if (oWndInfo == null) {

        return

    }



    // 如果是零通道，直接返回

    if (this.item.zeroType) {

        return

    }

    let iPTZSpeed = selection ? 0 : 4

    // 表示开启了自动

    if (9 === iPTZIndex && this.g_bPTZAuto) {

        // 将速度置为 0

        iPTZSpeed = 0



    } else {

        this.g_bPTZAuto = false

    }



    // 控制云平台

    WebVideoCtrl.I_PTZControl(iPTZIndex, selection, {

        iWndIndex: this.item.g_iWndIndex, iPTZSpeed,

        success: (xmlDoc) => {

            if (9 == iPTZIndex) {

                this.g_bPTZAuto = !this.g_bPTZAuto

            }

        },

        error: function (oError) {

            console.log(oWndInfo.szDeviceIdentify + " 开启云台失败！", oError.errorCode, oError.errorMsg)

        }

    })



}

到此就结束了，海康这个还不错，就是没有vue webpack的包，在webpack 的环境下，是会报错的。

扯皮

最近接到了一个需求：前端点击按钮触发某个任务并开启轮询获取任务进度，直至 100% 任务完成后给予用户提示

这个业务场景还挺常见的，但是突然上周后端联系到我说现在的效果有点差，之前都是小任务那进度条展示还挺不错的，现在有了一些大任务且会存在排队阻塞的情况，就导致视图上经常卡 0% 排队，用户体验太差了，问能不能在刚开始的时候做个假进度先让进度条跑起来😮

因此就有了这篇文章，简单做一下技术调研以及在项目中的应用

正文

其实假进度条也不难做，无非是轮询的时候我们自己做一个随机的自增，让它卡到 99% 等待后端真实进度完成后再结束

只不过还是想调研一下看看市面上有没有一些成熟的方案并去扒一下它们的源码🤓

NProgress

首先当我听到这里的需求后第一时间想到的就是它：rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc

记得大学期间做的一些中后台系统基本都少不了路由跳转时的顶部进度条加载，那时候就有了解到 NProgress，它的使用方式也很简单，完全手控：NProgress: slim progress bars in JavaScript，去文档里玩一下就知道了

视图呈现的效果就是如果你不手动结束那它就会一直缓慢前进卡死 99% ，挺符合我们这里的需求，可以去扒一下它内部进度计算相关的逻辑

NProgress 的内容实际上比较少，源码拉下来可以看到主要都在这一个 JS 文件里了：

需要注意的是我们看的是这个版本：rstacruz/nprogress at v0.2.0，master 分支与 npm 安装的 0.2.0 内部实现还是有些差别的

我们这里不关注它的样式相关计算，主要来看看对进度的控制，直奔 start 方法：

还是比较清晰的，这里的 status 就是内部维护的进度值，默认为 null，所以会执行 NProgress.set，我们再来看看 set 方法：

set 方法里有一大堆设置动画样式逻辑都被我剪掉了，关于进度相关的只有这些。相当于利用 clamp 来做一个夹层，因为初始进来的 n 为 null，所以经过处理后进度变为 0.08

再回到 start 的逻辑，其中 work 就是内部轮询控制进度自增的方法了，初始配置 trickle 为 true 代表自动开启进度自增，由于进度条在 set 方法中已经设置为 0.08，所以走到后面的 NProgress.trickle 逻辑

看来这里就是进度控制的核心逻辑了， trickle 里主要调用了 inc，在 trickle 中给 inc 传递了一个参数：Math.random() * Settings.trickleRate，显然这里范围是：0 <= n < 0.02

而在 inc 中，如果传递的 amount 有值的话那就每次以该值进行自增，同时又使用 clamp 将最大进度卡在 0.994

最后再调用 set 方法，set 里才是更新进度和视图进度条的方法，涉及到进度更新时都需要回到这里

当然 NProgress.inc 也可以手动调用，还对未传参做了兼容处理：

amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95)

即根据当前进度 n 计算剩余进度，再随机生成自增值

再来看 done 方法，它就比较诡异了：

按理来说直接将进度设置为 1 就行，但它以链式调用 inc 再调用 set，相当于调用了两次 set

而这里 inc 传参又没什么规律性，推测是为了 set 中的样式处理，感兴趣的可以去看看那部分逻辑，还挺多的...😶

一句话总结一下 NProgress 的进度计算逻辑：随机值自增，最大值限制

但是因为 NProgress 与进度条样式强绑定，我们肯定是没法直接用的

fake-progress

至于 fake-progress 则是我在调研期间直接搜关键词搜出来的😶：piercus/fake-progress: Fake a progress bar using an exponential progress function

很明显看介绍就是干这个事的，而且还十分专业，引入数学函数展示假进度条效果，具有说服力：

所以我们项目中其实就是用的这个包，只不过和 NProgress 类似，两个包都比较老了，瞟一眼源码发现都是老 ES5 了🤐

因为我们项目中用的是 React，这里给出 React 的 demo 吧，为了编写方便使用了几个 ahooks 里的 hook：

其实使用方法上与 NProgress 都类似，不过两者都属于通用的工具库不依赖其他框架，所以像视图渲染都需要自己手动来做

注意实例化中的传参 timeConstant，某种意义上来讲这个值就相当于“进度增长的速率”，但也不完全等价，我们来看看源码

因为不涉及到样式，fake-progress 源码更简单，核心就在这里：

下方的数学公式就是介绍图中展示的，只能说刚看到这部分内容是真的是死去的数学只是突然又开始攻击我😅，写了那么多函数，数学函数是啥都快忘了

我们来简单分析一下这个函数 1 - Math.exp(-1 * x)，exp(x)= $e^x$，$e^x$ 的图像长这样，高中的时候见的太多了：

那假如这里改成 exp(-x) 呢？有那味了，以前应该是有一个类似的公式 $f(x)$ 与 $f(-x)$ 图像效果是关于 y 轴对称，好像是有些特殊的不符合这个规律？🤔反正大部分都是满足的

OK，那我们继续进行转换，看看 -exp(-x) 的效果

同样有个公式 $f(x)$ 与 $-f(x)$ 图像效果是关于 x 轴对称：

初见端倪，不知道你们有没有注意 -exp(-x) 最终呈现的图像是无限接近于 x 轴的，也就是 0：

那有了🤓，假如我再给它加个 1 呢？它不就无限接近于 1 了，即 -exp(-x) + 1，这其实就是 fake-progress 里公式的由来：

但你会发现如果 x 按 1 递增就很快进度就接近于 1 了，所以有了 timeConstant 配置项来控制 x 的增长，回看这个公式：1 - Math.exp(-1 * this._time / this.timeConstant)

this._time 是一直在增长的，而 this.timeConstant 作为分母如果被设置为一个较大的值，那可想而知进度增长会巨慢

所以 fake-progress 的核心原理是借助数学函数，以函数值无限接近于 1 来实现假进度条，但是这种实现有一个 bug，可以看我提的这个 issues，不过看这个包的更新时间感觉作者也不会管了😅：

bug: progress may reach 100% · Issue #7 · piercus/fake-progress

useFakeProgress

虽然我们现在项目中使用的是 fake-progress，但是个人感觉用起来十分鸡肋，而且上面的 bug 也需要自己手动兼容，因此萌生出自己封装一个 hook 的想法，让它更符合业务场景

首先我们确定一下进度计算方案，这里我毫不犹豫选择的是 NProgress 随机值增长方案，为什么？因为方便用户自定义

而且 NProgress 相比于 fake-progress 有一个巨大优势：手动 set 进度后仍然保持进度正常自动递增

这点在 fake-progress 中实现是比较困难的，因为你无法保证手动 set 的进度是在这个函数曲线上，相当于给出函数 y 值反推 x 值，根据反推的 x 值再进行递增，想想都麻烦

确定好方案后我们来看下入参吧，参考 NProgress 我定义了这几个配置项：

这里我简单解释一下 rerender 和 amount 配置：

实际上在封装这个 hook 的时候我一直在纠结这里的 progress 到底是 state 还是 ref，因为大多数场景下 hook 内部通过轮询定时器更新进度，而真实业务代码中也会开启定时器去轮询监听业务接口的

所以如果写死为 state，那这个场景 hook 内部的每次更新 render 是没必要的，但是假如用户又想只是使用假进度展示，没有后端业务接口呢？

思来想去其实完全可以放权给用户进行配置，因为 state = ref + update，统一使用 ref，用户配置 rerender 时我们在每次更新时 update 即可

至于 amount 我是希望放权给用户进行自定义递增值，你可以配置成一个固定值也可以配置成随机值，更可以像 NProgress master 分支下这样根据当前进度来控制自增，反正以函数参数的形式能够拿到当前的 progress：

至于实现细节就不再讲述了，实际上就是轮询定时器没什么复杂的东西，直接上源码了：

import { useRef, useState } from "react";



interface Options {

  minimun?: number;

  maximum?: number;

  speed?: number;

  rerender?: boolean;

  amount?: (progress: number) => number;

  formatter?: (progress: number) => string;

  onProgress?: (progress: number) => void;

  onFinish?: () => void;

}



export function useFakeProgress(options?: Options): [

  { current: string },

  {

    inc: (amount?: number) => void;

    set: (progress: number) => void;

    start: () => void;

    stop: () => void;

    done: () => void;

    reset: () => void;

    get: () => number;

  }

] {

  const {

    minimun = 0.08,

    maximum = 0.99,

    speed = 800,

    rerender = false,

    amount = (p: number) => (1 - p) * clamp(Math.random() * p, minimun, maximum),

    formatter = (p: number) => `${p}`,

    onProgress,

    onFinish,

  } = options || {};



  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const progressRef = useRef(0);

  const progressDataRef = useRef(""); // formatter 后结果

  const [, update] = useState({});



  const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);



  const setProgress = (p: number) => {

    progressRef.current = p;

    progressDataRef.current = formatter(p);

    onProgress?.(p);

    if (rerender) update({});

  };



  const work = () => {

    const p = clamp(progressRef.current + amount(progressRef.current), minimun, maximum);

    setProgress(p);

  };



  const start = () => {

    function pollingWork() {

      work();

      timerRef.current = setTimeout(pollingWork, speed);

    }



    if (!timerRef.current) pollingWork();

  };



  const set = (p: number) => {

    setProgress(clamp(p, minimun, maximum));

  };



  const inc = (add?: number) => {

    set(progressRef.current + (add || amount(progressRef.current)));

  };



  const stop = () => {

    if (timerRef.current) clearInterval(timerRef.current);

    timerRef.current = null;

  };



  const reset = () => {

    stop();

    setProgress(0);

  };



  const done = () => {

    stop();

    setProgress(1);

    onFinish?.();

  };



  return [

    progressDataRef,

    {

      start,

      stop,

      set,

      inc,

      done,

      reset,

      get: () => progressRef.current,

    },

  ];

}

这里需要补充一个细节，在返回值里使用的是 progressDataRef 是 formatter 后的结果为 string 类型，如果用户想要获取原 number 的 progress，可以使用最下面提供的 get 方法拿 progressRef 值

一个 demo 看看效果，感觉还可以：

当然由于直接返回了 ref，为了防止用户篡改可以再上一层代理劫持，我们就省略了

这也算一个工具偏业务的 hook，可以根据自己的业务来进行定制，这里很多细节都没有补充只是一个示例罢了🤪

End

以上就是这篇文章的内容，记得上班之前还在想哪有那么多业务场景需要封装自定义 hook，现在发现真的是各种奇葩需求都可以封装，也算是丰富自己武器库了...

引言

Rust语言是一门现代系统编程语言，由Mozilla Research于2009年开始开发，Mozilla Research 是 Mozilla 基金会旗下的一个研究部门，专注于推动开放网络和创新技术的发展，Rust语言正是在 Mozilla Research 中孕育并发展的。

Rust 最早是 Mozilla 雇员 Graydon Hoare 的个人项目，在2006年开始了Rust语言的初步设计，Mozilla 随后投入资源，支持Rust的发展，并最终于2010年公开这个项目，2015年发布1.0版本。

以下引用自Rust 语言圣经

大家可能疑惑 Rust 为啥用了这么久才到 1.0 版本？与之相比，Go 语言 2009 年发布，却在 2012 年仅用 3 年就发布了 1.0 版本[^1]。

● 首先，Rust 语言特性较为复杂，所以需要全盘考虑的问题非常多；

● 其次，Rust 当时的参与者太多，七嘴八舌的声音很多，众口难调，而 Rust 开发团队又非常重视社区的意见；

● 最后，一旦 1.0 快速发布，那绝大部分语言特性就无法再被修改，对于有完美强迫症的 Rust 开发者团队来说，某种程度上的不完美是不可接受的。

因此，Rust 语言用了足足 6 年时间，才发布了尽善尽美的 1.0 版本。

大家知道 Rust 的作者到底因为何事才痛下决心开发一门新的语言吗？

说来挺有趣，在 2006 年的某天，作者工作到精疲力尽后，本想回公寓享受下生活，结果发现电梯的程序出 Bug 崩溃了，要知道在国外，修理工可不像在中国那样随时待岗，还要知道，他家在 20 多楼！

最后，他选择了妥协，去酒店待几天等待电梯的修理。

当然，一般人可能就这样算了，毕竟忍几天就过去了嘛。但是这名伟大的程序员显然也不是一般人，他面对害他流离失所的电梯拿起了屠龙宝刀 - Rust。

自此，劈开一个全新的编程世界。

深入了解Rust

为什么要创建Rust这门语言？

在 Rust 出现之前，系统级编程领域主要由 C 和 C++ 统治。虽然这两种语言在性能方面表现出色，但它们也存在一些固有的缺陷，促使了 Rust 的诞生。

什么是系统级编程语言？

简单来说，系统级编程语言用于开发操作系统、驱动程序、嵌入式系统、游戏引擎、数据库等对性能和硬件控制要求极高的软件。

有以下特性：

• 硬件访问： 系统级语言需要能够直接访问硬件资源，直接操作硬件
• 高性能： 系统级程序通常需要直接操作硬件，对性能要求非常高。因此，系统级语言通常具有高效的内存管理机制和优化的编译器，以生成高效的机器码。
• 较强的类型系统和编译时检查：为了尽早发现潜在的错误，系统级语言通常具有较强的类型系统和编译时检查机制，以提高代码的可靠性和安全性。
• 并发和并行： 现代计算机系统通常具有多核处理器，系统级程序需要能够有效地利用多核资源，实现并发和并行执行，以提高性能。
• 内存控制： 系统级编程需要对内存进行精细的控制，包括内存分配、释放、布局等。一些系统级语言允许开发者直接操作内存地址，以实现更高的灵活性和效率

有哪些系统级编程语言？

• C/C++

  无GC，性能高，内存不安全

• Rust

  无GC，性能高，内存安全

• Go

  有GC，性能不如Rust，安全性不如Rust。

• Assembly Language（汇编语言）

  性能高，开发效率低

• zig

  无GC，性能高，安全性不如Rust，发展初期

C/C++ 的缺陷

• 内存安全问题： C/C++ 允许开发者手动管理内存，这虽然提供了灵活性，但也容易导致各种内存安全问题，如：
  • 空指针（Null Pointers）： 访问未初始化的指针或空指针会导致程序崩溃。
  • 野指针（Wild Pointers）： 指针变量没有被初始化。任何指针变量刚被创建时不会自动成为NULL指针，它的缺省值是随机的，它会乱指一气。所以，指针变量在创建的同时应当被初始化，要么将指针设置为NULL，要么让它指向合法的内存。。
  • 悬垂指针（Dangling Pointers）： 指针指向曾经存在的对象，但该对象已经被释放，再次访问该指针会导致未定义行为，悬垂指针是野指针的一种。
  • 双重释放（Double Free）： 释放同一块内存两次，导致崩溃或不可预测的行为。
  • 内存泄漏（Memory Leaks）： 分配的内存没有被及时释放，导致内存占用不断增加，最终可能导致系统崩溃。
  • 缓冲区溢出（Buffer Overflows）： 向缓冲区写入超出其容量的数据，可能覆盖相邻的内存区域，导致程序崩溃或安全漏洞。
• 并发安全问题： C/C++ 的并发编程容易引入数据竞争（Data Races）等问题，导致程序行为不确定，难以调试和维护。
• 缺乏现代化的语言特性： C/C++ 的语法相对陈旧，缺乏一些现代化的语言特性，如模式匹配、类型推断等，使得代码编写和维护相对繁琐。

Rust 的创建正是为了解决 C/C++ 等语言的这些不足，同时保留其高性能的优点。具体来说，Rust 的设计目标是：

• 解决内存安全问题： Rust 通过所有权系统、借用检查器等机制，在编译时就杜绝了空指针、野指针、数据竞争等内存安全问题。
• 提供安全的并发编程： Rust 的所有权系统和类型系统也对并发安全提供了保障，使得开发者可以更容易地编写安全的并发程序。
• 提供现代化的语言特性： Rust 引入了模式匹配、类型推断、trait 等现代化的语言特性，提高了代码的简洁性、可读性和可维护性。
• 保持高性能： Rust 的设计理念是“零成本抽象”，即提供高级的抽象能力，但不会带来额外的运行时开销，且无需垃圾回收器等运行时机制，从而避免了额外的性能开销，媲美 C/C++。

简而言之，因为还缺一门无 GC 且无需手动内存管理、性能高、工程性强、语言级安全性、广泛适用性的语言，而 Rust 就是这样的语言。

为什么选择Rust语言？

• 保证安全、内存占用小的同时能提供和C/C++ 一样的性能
• 广泛的适用性，系统编程、网络服务、命令行工具、WebAssembly等场景都能应用
• 生态渐渐完善，有大量的库和框架，完整的工程化开发工具链，强大的包管理
• 社区非常活跃和友好，文档全面

Rust不是闭门造车的语言，能看出来设计者是做过大量不同语言的项目的人，Rust从解决实际问题出发，借鉴和融合其他语言的优点，又能够创新地提出所有权和生命周期，这个强大的能力带来了0开销的内存安全和线程安全。

凡事有利必有弊，Rust是站在前人的肩膀上，它集百家之长，借鉴了其他语言的许多优秀特性，如npm的包管理、go的channel来进行并发通信、Haskell的trait（类似java的接口），还有元组、泛型、枚举，闭包、智能指针这些特性并非rust原创，但Rust确实把这些优点全部吸收了进来，而没有做过度的设计和发散，让有一些其他语言基础的人还能够减轻一些上手成本。

即使这样，Rust依然是在一众语言里学习曲线最陡峭的语言之一，此外，Rust为了提高运行时性能必然是会牺牲一些编译时的效率的。

但是，这丝毫不会影响Rust成为一门伟大的语言，如果有一门语言可以改变你的编程思维方式，倒逼你进行更好的代码设计，让你在初学过程中连连发出“原来是这样啊”的感叹，那么它一定是Rust。

Rust 核心设计理念对前端有哪些启示

Rust的很多设计理念都可以在前端领域中或多或少地找到影子，让你明白前端某些技术为什么要这么设计，以及为什么不那么设计。

安全性设计

1. 类型安全

• 静态类型检查：

  Rust 提供了一个非常强大的类型系统，确保了类型安全。在编译时，Rust 会强制要求所有变量和函数都有明确的类型声明。这使得很多潜在的错误能够在编译时被捕获，避免了运行时出现类型错误。

  反观JavaScript，作为js开发者，那是太有发言权了，由于js是动态类型语言，所以很多错误只能在运行时被发现，跑着跑着可能就出一个线上bug，这是多少前端开发者的痛啊。

  当在写了一段时间Rust后，我们就会明白TypeScript为什么会火了，以及TS为什么是必要的，TS不能解决所有问题，但能解决大部分低级问题。

  如果你不用TS，提高代码健壮性也是有方法的，只不过心智负担更重。参照文章接口一异常你的页面就直接崩溃了？

• 不可变性和可变性：

  在 Rust 中，变量默认是不可变的，只有显式声明为可变 (mut) 才能修改。这种设计减少了错误发生的概率，因为不可变数据是线程安全的，不会在多个地方被修改。

  在JS中也有类似的设计，联想到ES6的const和let，const 只能保证变量引用不可变，但如果引用的是对象或数组，内容依然可以改变。可谓是相当鸡肋。

2. 内存安全

Rust 提供了一种独特的所有权系统来自动管理内存，避免了许多传统语言中常见的内存错误，如内存泄漏、悬垂指针和双重释放。

Rust 的内存安全设计包括以下几个方面：

• 所有权系统：Rust 中的所有权系统确保每个资源只有一个所有者，而所有权可以转移。一旦所有权转移，原所有者无法再访问或修改该资源，资源离开作用域时会自动释放，这就避免了双重释放和内存泄漏的问题。
• 借用检查器：Rust 的借用检查器确保在同一时间只能存在不可变借用或一个可变借用。这避免了并发情况下的内存冲突。
• 生命周期：Rust 的生命周期系统确保引用的有效性，在编译时检查引用的生命周期与持有它的资源的生命周期是否匹配，从而防止悬空引用和野指针。

反观JavaScript 中的内存问题：

• 内存泄漏（Memory Leak）： 内存泄漏是指程序无法释放不再使用的内存，导致内存资源被浪费。在 JavaScript 中，由于垃圾回收机制，内存泄漏通常发生在以下几种情况：
  • 全局变量：

    全局变量是在全局作用域中声明的，它们在程序执行期间存在，直到程序结束时才会被销毁。因此，无论这些全局变量是否仍在使用，它们都将保持存在，无法被垃圾回收器回收。

      // 全局变量
    
    var globalVar = { name: 'example' };
    
    
    
    // 该对象即使没有被引用，仍然会存在，直到页面关闭
    
    

    在浏览器中，全局变量被视为 window 对象的属性，在 Node.js 中，则是 global 对象。

    垃圾回收器一般不会回收全局变量，原因之一是全局变量的清理通常意味着整个应用程序的关闭或重载。如果要强制回收全局变量，会导致额外的复杂性和性能开销。因此，大多数 JavaScript 引擎（如 V8）选择让全局变量一直存活。

    全局变量不仅会导致内存泄漏还有容易被意外覆盖的风险，尽量使用模块化、闭包等方式来避免将变量暴露到全局作用域中。

    同理，全局变量也会导致无法准确的进行treeshaking优化，因为全局变量是有副作用的。

  • 闭包（Closures）：

    闭包可能会保持对外部函数作用域变量的引用，从而防止这些变量被回收。

    function createClosure() {
    
      let largeObject = new Array(1000000).fill('Memory leak');
    
    
    
      // 返回一个函数，访问 largeObject
    
      return function() {
    
        console.log(largeObject[0]);
    
      };
    
    }
    
    
    
    const closure = createClosure();
    
    
    
    // 使用完闭包后，显式清除引用
    
    closure = null;  // 删除对闭包的引用，垃圾回收器可以回收 largeObject
    
    

    largeObject 是一个占用大量内存的对象。当我们调用 createClosure 时，它返回一个内部函数 closure，这个内部函数会引用 largeObject。尽管 largeObject 的生命周期在 createClosure 执行完之后结束，但由于 closure 仍然持有对 largeObject 的引用，这个对象就无法被垃圾回收器回收，从而导致内存泄漏。

    闭包本身不会引起内存泄漏，但如果闭包捕获了外部函数的引用，且这些引用长时间未清除，就可能导致内存泄漏。

• 事件监听器：

  如果没有正确移除事件监听器，可能导致无法释放关联的内存。

  如果我们为 DOM 元素注册了事件监听器，但没有在适当的时候移除它们，尤其是在元素被删除或不再需要时，事件监听器会一直保持对 DOM 元素的引用，从而防止垃圾回收。

  "my-element">Click me!
  
  
  
  
  <script>
  
    let element = document.getElementById('my-element');
  
  
  
    // 给 DOM 元素添加事件监听器
  
    function handleClick() {
  
      console.log('Element clicked');
  
    }
  
  
  
    element.addEventListener('click', handleClick);
  
  
  
    // 假设我们从 DOM 中移除了该元素
  
    document.body.removeChild(element);
  
  
  
    // 但是我们没有移除事件监听器，事件监听器仍然持有对该元素的引用
  
    // 因此该元素无法被垃圾回收
  
  script>
  
  

  需要手动清除事件监听器

  element.removeEventListener('click', handleClick);  // 移除事件监听器
  
  element = null;  // 清除对 DOM 元素的引用
  
  

• DOM 元素引用：

  如果 DOM 元素的引用在不再需要时没有清除，垃圾回收机制也无法回收它们。

  当我们通过 DOM 操作获取并引用一个 DOM 元素时，如果该元素的引用没有及时清除，即使该元素已经被移除或不再需要，它也不会被垃圾回收，从而导致内存泄漏。

  "my-element">Hello, World!
  
  
  
  
  <script>
  
    // 获取 DOM 元素并保存引用
  
    let element = document.getElementById('my-element');
  
  
  
    // 动态移除该元素
  
    document.body.removeChild(element);
  
  
  
    // 但是我们没有清除 element 引用
  
    // 这个引用仍然指向已经从 DOM 树中移除的元素
  
    // 此时垃圾回收器无法回收这个元素，因为引用仍然存在
  
  script>
  
  

  可以使用 element = null 来清除引用，但这个操作需要手动执行，容易忘记。

v8的垃圾回收器

V8 中的GC采用标记清除法进行垃圾回收。主要流程如下：

• 标记：从根对象开始，遍历所有的对象引用，被引用的对象标记为活动对象，没有被引用的对象（待清理）标记为垃圾数据。
• 垃圾清理：将所有垃圾数据清理掉

在我们的开发过程中，如果我们想要让垃圾回收器回收某一对象，就将对象的引用直接设置为 null

let a = {}; // {} 可访问，a 是其引用



a = null; // 引用设置为 null

// {} 将会被从内存里清理出去

但如果一个对象被多次引用时，例如作为另一对象的键、值或子元素时，将该对象引用设置为 null 时，该对象是不会被回收的

let a = {};

let arr = [a];



a = null;

console.log(arr)

// [{}]

因为a被arr引用，即使a不被使用了，也不会被释放，除非arr也被设置为null。

JS也考虑到了这一点，在ES6中推出了： WeakMap和WeakSet 。它对于值的引用都是不计入垃圾回收机制的，所以名字里面才会有一个"Weak"，表示这是弱引用（对对象的弱引用是指当该对象应该被GC回收时不会阻止GC的回收行为）。

let a = {};

let arr = new WeakSet();

arr.add(a);



a = null;

console.log(arr.has(a))

// false

即 arr 对a的引用是弱引用，如果a不用了，不会阻止垃圾回收。

以上代码可以在控制台自行尝试一下

即便JS给出了可以避免特定场景的内存泄漏的方案，但依然无法避免所有场景的内存泄漏，而且就算你熟谙内存泄漏的各种场景以及对应解决方案，百密也终有一疏，更何况实际开发中代码能跑起来我们就几乎不会考虑啥内存问题，而Rust则强制你一定要考虑内存安全，否则编译都不过。

3. 并发安全

Rust 的并发模型通过其所有权和借用规则确保了并发编程中的安全性。Rust 中的并发安全设计包括：

• 数据竞争防止：Rust 中，数据竞争在编译时就能被发现。Rust 通过所有权规则确保要么有多个不可变借用，要么有一个可变借用，从而避免了并发时对共享数据的非法访问。
• 线程安全：Rust 使用 Send 和 Sync 特性来标识哪些类型可以在线程之间传递或共享。Send 允许数据在不同线程之间传递，Sync 允许多个线程共享数据。
• 锁机制：Rust 提供了 Mutex 和 RwLock 等机制来确保在多线程环境下对共享资源的安全访问。

JS是单线程，但是JS的单线程是基于事件循环的非阻塞的，所以可以通过异步来实现伪并发，竞态条件、数据竞争、数据共享等问题在JS中是很难发现的，甚至别人的代码修改了你的数据你都不知道，没有一定的开发经验积累，去排查由此产生地莫名其妙的bug是相当折磨人的。

当学习了Rust之后，你就会下意识地去考虑你所定义的数据的安全性，有没有不确定的执行顺序引发的问题？有没有可能被非预期的共享和修改？我改了这个对象会不会影响到其他部分的功能表现等等？从而去想办法将可能会发生的问题扼杀在摇篮里。例如在处理组件状态时，采用不可变数据结构和函数式编程模式可以减少出错的机会。实际上对于前端开发者来说，这类bug是相当常见的。

JS其实也是在不断努力解决其本身存在的各种问题的，例如不断升级的ES新特性，使用 use stric 开启严格模式，还有函数式编程范式的流行，以及各类框架都支持的状态管理等等，这些措施都是为了让JS代码能够更加健壮，弥补JS本身的一些不足。

不可变数据结构： 在React中，使用useState和useReducer来管理状态，避免直接修改状态对象。以及redux等状态管理库，还有像Immer这样的库来简化不可变数据的操作。 函数式编程： 在JavaScript中，封装有明确输入和输出的函数，或使用高阶函数（如map、filter、reduce）来处理数据，避免修改原始数据，从而保持代码的清晰性和可测试性。

无论是函数式编程，还是状态管理，都是为了减少每个动作的副作用，有明确的数据流，让代码更安全更加可维护，低耦合高内聚不是一句空话，是业界大佬们真正在不断去实践的。只是我们自己没有感知，而实际上JS这门语言自身的缺陷真的很多，用JS去开发很容易，但是用JS去开发出健壮又高性能的代码是很难的，这可能也是为什么前端框架和库百花齐放而又前仆后继的原因。

4. 错误处理

Rust没有传统意义上的异常机制。在许多编程语言中，错误通常会通过运行时抛出异常来传递，而Rust采用了一种完全不同的方式来处理错误。

Rust通过Result类型和Option类型来明确地处理错误和空值，Rust的错误处理是编译时检查的，必须显式处理Result或Option，如果忽略了错误处理，编译器会报错，确保错误处理不被遗漏。这种做法可以避免程序出现未处理的异常，增强程序的健壮性。

Result 类型：Rust使用Result类型来显式表示一个函数可能返回的两种状态：成功(Ok(T))或失败(Err(E))。这种方式要求函数调用者在编译时就明确考虑到错误的处理，而不是依赖于运行时的异常机制。

Result是一个枚举类型，定义如下：

enum Result {

    Ok(T),

    Err(E),

}

Option 类型：在处理可能的空值时，Rust使用Option类型，它表示一个值可能存在（Some(T)）或不存在（），避免了空指针异常的问题。

enum Option {

    Some(T),

    ,

}

在前端开发中，JavaScript和TypeScript也可以借鉴Rust的错误处理机制，明确地处理每一种错误情况，尤其是空值问题，没有一个前端开发能躲过 undefined 的摧残。

高性能设计

1. 零成本抽象

零成本抽象是指使用高级编程语言的抽象（如函数式编程的高阶函数、泛型、闭包等）时，不会引入额外的性能开销或运行时成本。换句话说，编写高抽象层的代码并不会影响程序的性能，编译器能够将抽象代码转化为与低级代码相同的高效机器码。

在 Rust 中，“零成本抽象”特别重要，因为 Rust 旨在提供与 C 和 C++ 等低级语言相似的性能，同时保持高层次的代码抽象和安全性。通过静态分析和优化，Rust 能够在编译时消除大多数抽象层的开销。

零成本抽象的三个原则：

• 没有全局成本（No global cost）： 一个零成本抽象不应该对不使用该功能的程序的性能产生负面影响。

  换句话说，零成本抽象应该只在使用时产生影响，在未使用时不会引入任何额外的开销。

• 最佳性能（Optimal performance）： 一个零成本的抽象应该编译成相当于底层指令编写的最佳实现。意味着它在使用时会以尽可能接近底层代码的方式运行，即它的性能应当与手写的低级实现相当。

  可以理解为，如果你想要用rust抽象某个高级能力，那么抽象完成的性能不能比用更原始写法实现的性能差，如果你想要抽象前端框架，那么就不能比直接操作DOM的JS原生写法性能差。

• 改善开发者体验（Improves developer experience）： 抽象的意义在于提供新的工具，由底层组件组装而成，让开发者更容易写出他们想要的代码，提高开发效率和代码可读性。

举几个例子

1. Rust 的所有权系统（ownership system）和生命周期（lifetimes）。

当你写一个简单的程序，没有使用所有权系统的特性时，编译器会对这些特性进行优化，使得它们对程序的性能没有任何影响。只有当你使用这些特性时，编译器才会引入相关的检查和优化。

2. 迭代器（Iterators） Rust 的迭代器是一种高效的抽象

fn main() {

    let numbers = vec![1, 2, 3, 4, 5];

    let sum: i32 = numbers.iter().map(|x| x * 2).sum();

    println!("Sum: {}", sum);

}

在这个例子中，iter 返回一个迭代器，map 是一个高阶函数，它将一个闭包应用到每个元素。尽管你使用了高阶函数和迭代器，Rust 会在编译时优化这段代码，确保它与手写的 for 循环代码在性能上等效。

Rust 的迭代器通过惰性求值来避免不必要的中间计算。当你调用 .map() 和 .sum() 时，Rust 会合并这些操作为一个高效的迭代过程，不会在内存中创建不必要的临时集合，最终生成与手动实现同样高效的机器码。

而在JS中，几种高阶函数的使用则是有成本的，如map、foreach 等，在进行一些极端的数据量测试时，性能差异相比 for 循环就比较明显了，但是js引擎实际上也是做了很多的优化的，这点不用太过于担心，放心用就好了。

3. 泛型（Generics） Rust 中的泛型是一个典型的零成本抽象。

使用泛型时，Rust 在编译时会根据类型替换（monomorphization单态化）生成具体的代码，在运行时没有任何额外的开销。

fn add(a: T, b: T) -> T

where

    T: std::ops::Add
,

{

    a + b

}

在这个例子中，add 函数是一个泛型函数。Rust 编译器在编译时会为每种特定类型（例如 i32、f64 等）生成专门的机器码。

如果你调用 add(1, 2)，Rust 会为 i32 类型生成专门的代码。同样，如果你调用 add(1.5, 2.5)，Rust 会为 f64 类型生成专门的代码。泛型不会引入运行时的性能损失。编译后的代码与手写的具体类型版本在性能上是等价的。

4. 错误处理

包括Rust的错误处理，由于Rust不使用异常机制，程序的控制流更加清晰，避免了异常捕获时的运行时性能开销。

对前端的启示

• 抽象高级能力提升开发效率和体验： 前端框架（如 React 和 Vue）、TypeScript等都是属于抽象的高级能力。例如，React 的优化算法通过虚拟 DOM 的比对、最小化 DOM 更新，已实现类似的零成本抽象。除此之外还有很多事可以做。
• 优化代码：减少抽象代码中不必要的计算，必要时惰性引入（前端叫懒加载）或计算，减少对不相关部分的隐形影响（前端叫副作用），利用好模块化开发和treeshaking等。
• WebAssembly (Wasm)： Rust 本身可以编译为 WebAssembly，这为前端性能优化开辟了新天地。借鉴 Rust 的这一特点，前端可以通过将性能瓶颈部分的代码（如图像处理、数据加密等）使用 Rust 编写并编译为 WebAssembly 运行，从而提升性能。

总结

社区很多人并不看好Rust甚至很激进地开喷，人确实是会有自己的舒适区的，当用熟了一样语言后，便不那么容易接受某一个自己不熟悉的语言更好，但是，尝试走出舒适区，真正地去接触Rust，一定会也能够感受到Rust的设计光辉。

要学习Rust，你需要先深入理解内存、堆栈、引用、变量作用域等这些其它高级语言往往不会深入接触的内容，Rust 会通过语法、编译器和 clippy 这些静态检查工具半帮助半强迫的让你成为更优秀的程序员，写出更好的代码。

Rust 程序只要能跑起来，那代码质量其实就是相当不错的，甚至不需要调试，能编译基本就没bug（当然是避免不了逻辑bug的）。正因为较高的质量下限，我们维护别人的代码时心智负担也比较小，能编译通过基本能保证不新增bug，把精力完全放在业务逻辑上就可以了。

而如果用javascript写程序，我们必须一边写一边调试，虽然写出能跑的程序极为简单，但要想没有bug，心智负担极高，js的程序员上限不封顶，但下限极低。而且review代码成本也很高，1000个人有1000种写法，review完改一改可能又不小心改出bug了。

JS对开发者要求较低，也是时代变了，条件好了，搁以前几百兆内存、单核cpu的时候，那时候的JS开发该有多痛苦啊。

社区流传着一个很奇怪的论调，“通过学习Rust，你能写出更好的xx语言的代码”。

学习Rust后，会潜移默化地影响你写其他语言代码时的思维方式，最直观的变化就是，对javascript中各类容易造成不安全不稳定的情况会更加敏感，所以，某种程度来看，Rust的价值可能并不在于用它写出多么优秀的代码，更重要的是它带给你的全面的方法论层面的提升。

我使用Rust做了比较丰富的尝试，包括用Rust写命令行工具、用Rust写 postcss 插件、用Rust写vite 插件、用Rust写WebAssembly在前端页面中使用，整体体验和效果还是非常棒的，WebAssembly的尝试可以查看文章Rust + wasm-pack + WebAssembly 实现Gitlab 代码统计，比JS快太多了，其他实践后面会陆续和大家分享，感兴趣的小伙伴可以关注收藏插个眼~

附：

Rust在前端领域的应用

• SWC: 基于 Rust 的前端构建工具，可以理解为 Rust 版本的 Babel，但是性能有 10 倍提升。目前被 Next.js、Deno , Rspack等使用。
• Tauri：Tauri 是目前最流行的 Electron 替代方案，通过使用 Rust 和 Webview2 成功解决了 Electron 的包体积大和内存占用高的问题。Atom 团队也是看到了 Tauri 的成功，才决定基于 Rust 去做 Zed 编辑器。
• Parcel2：零配置构建工具，特点是快速编译和不需要配置，和 Vite、Webpack等打包比起来更加简单，而且是基于 Rust 开发
• Biome: 旨在取代许多现有的 JavaScript 工具，集代码检测、打包、编译、测试等功能于一身。
• Rspack: 基于 Rust 的高性能 Web 构建工具, 对标 Webpack, 兼容大部分Webpack api
• Rocket: 可以帮助开发人员轻松编写安全的Web应用程序, 对标 Expressjs，性能卓越，具体参考 Web Frameworks Benchmark
• Yew : 使用 Rust 开发 h5 页面，支持类 jsx 的语法，和 React 类似开发前端网页，打包产物是 wasm，挺有趣。
• Napi-rs: 用 Rust 和 N-API 开发高性能 Node.js 扩展，可以替代之前用 C++ 开发的 Node.js 扩展，许多基于 Rust 语言开发的前端应用都结合这个库进行使用。
• Rolldown: 基于 Rust 的 Rollup 的替代品。
• 美国国防部准备征求一个把所有C代码翻译成Rust的软件。

作者：Pursue_LLL
来源：juejin.cn/post/7450021642377199643

今年大部分时间都是在编码上和写文章上，但是也不知道自己都学到了啥，那就写篇文章来盘点一下目前的技术栈吧，也作为下一年的参考目标，方便知道每一年都学了些啥。

我的技术栈

首先我先来对整体的技术做一个简单的介绍吧，然后后面再对当前的一些技术进行细分吧。

React、Typescript、React Native、mysql、prisma、NestJs、Redis、前端工程化。

React

React 这个框架我花的时间应该是比较多的了，在校期间已经读了一遍源码了，对这些原理已经基本了解了。在随着技术的继续深入，今年毕业后又重新开始阅读了一遍源码，对之前的认知有了更深一步的了解。

也写了比较多跟 React 相关的文章，包括设计模式，原理，配套生态的使用等等都有一些涉及。

在状态管理方面，redux，zustand 我都用过，尤其在 Zustand 的使用上，我特别喜欢 Zustand，它使得我能够快速实现全局状态管理，同时避免了传统 Redux 中繁琐的样板代码，且性能更优。也对 Zustand 有比较深入的了解，也对其源码有过研究。

NextJs

Next.js 是一个基于 React 的现代 Web 开发框架，它为开发者提供了一系列强大的功能和工具，旨在优化应用的性能、提高开发效率，并简化部署流程。Next.js 支持多种渲染模式，包括服务器端渲染（SSR）、静态生成（SSG）和增量静态生成（ISR），使得开发者可以根据不同的需求选择合适的渲染方式，从而在提升页面加载速度的同时优化 SEO。

在路由管理方面，Next.js 采用了基于文件系统的路由机制，这意味着开发者只需通过创建文件和文件夹来自动生成页面路由，无需手动配置。这种约定优于配置的方式让路由管理变得直观且高效。此外，Next.js 提供了动态路由支持，使得开发者可以轻松实现复杂的 URL 结构和参数化路径。

Next.js 还内置了 API 路由，允许开发者在同一个项目中编写后端 API，而无需独立配置服务器。通过这种方式，前后端开发可以在同一个代码库中协作，大大简化了全栈开发流程。同时，Next.js 对 TypeScript 提供了原生支持，帮助开发者提高代码的可维护性和可靠性。

Typescript

今年所有的项目都是在用 ts 写了，真的要频繁修改的项目就知道用 ts 好处了，有时候用 js 写的函数修改了都不知道怎么回事，而用了 ts 之后，哪里引用到的都报红了，修改真的非常方便。

今年花了一点时间深入学习了一下 Ts 类型，对一些高级类型以及其实现原理也基本知道了，明年还是多花点时间在类型体操上，除了算法之外，感觉类型体操也可以算得上是前端程序员的内功心法了。

React Native

不得不说，React Native 不愧是接活神器啊，刚学完之后就来了个安卓和 ios 的私活，虽然没有谈成。

React Native 和 Expo 是构建跨平台移动应用的两大热门工具，它们都基于 React，但在功能、开发体验和配置方式上存在一些差异。React Native 是一个开放源代码的框架，允许开发者使用 JavaScript 和 React 来构建 iOS 和 Android 原生应用。Expo 则是一个构建在 React Native 之上的开发平台，它提供了一套工具和服务，旨在简化 React Native 开发过程。

React Native 的核心优势在于其高效的跨平台开发能力。通过使用 React 语法和组件，开发者能够一次编写应用的 UI 和逻辑，然后部署到 iOS 和 Android 平台。React Native 提供了对原生模块的访问，使开发者能够使用原生 API 来扩展应用的功能，确保性能和用户体验能够接近原生应用。

Expo 在此基础上进一步简化了开发流程。作为一个开发工具，Expo 提供了许多内置的 API 和组件，使得开发者无需在项目中进行繁琐的原生模块配置，就能够快速实现设备的硬件访问功能（如摄像头、位置、推送通知等）。Expo 还内置了一个开发客户端，使得开发者可以实时预览应用，无需每次都进行完整的构建和部署。

另外，Expo 提供了一个完全托管的构建服务，开发者只需将应用推送到 Expo 服务器，Expo 就会自动处理 iOS 和 Android 应用的构建和发布。这大大简化了应用的构建和发布流程，尤其适合不想处理复杂原生配置的开发者。

然而，React Native 和 Expo 也有各自的局限性。React Native 提供更大的灵活性和自由度，开发者可以更自由地集成原生代码或使用第三方原生库，但这也意味着需要更多的配置和维护。Expo 则封装了很多功能，简化了开发，但在需要使用某些特定原生功能时，开发者可能需要“弹出”Expo 的托管环境，进行额外的原生开发。

样式方案的话我使用的是 twrnc，大部分组件都是手撸，因为有 cursor 和 chatgpt 的加持，开发效果还是杠杠的。

rn 原理也争取明年能多花点时间去研究研究，不然对着盲盒开发还是不好玩。

Nestjs

NestJs 的话没啥好说的，之前也都写过很多篇文章了，感兴趣的可以直接观看：

• 面试官：为什么选择学习 Nestjs，而不是 Express？🧐🧐🧐


• NestJS 的生命周期钩子以及它们在不同阶段的都适合做什么？

对 Nodejs 的底层也有了比较深的理解了：

• 探究 CPU 密集型与 IO 密集型任务：提升对 Node.js 中 libuv 库的理解

Prisma & mysql

Prisma 是一个现代化的 ORM（对象关系映射）工具，旨在简化数据库操作并提高开发效率。它支持 MySQL 等关系型数据库，并为 Node.js 提供了类型安全的数据库客户端。在 NestJS 中使用 Prisma，可以让开发者轻松定义数据库模型，并通过自动生成的 Prisma Client 执行类型安全的查询操作。与 MySQL 配合时，Prisma 提供了一种简单、直观的方式来操作数据库，而无需手动编写复杂的 SQL 查询。

Prisma 的核心优势在于其强大的类型安全功能，所有的数据库操作都能通过 Prisma Client 提供的自动生成的类型来进行，这大大减少了代码中的错误，提升了开发的效率。它还包含数据库迁移工具 Prisma Migrate，能够帮助开发者方便地管理数据库结构的变化。此外，Prisma Client 的查询 API 具有很好的性能，能够高效地执行复杂的数据库查询，支持包括关系查询、聚合查询等高级功能。

与传统的 ORM 相比，Prisma 使得数据库交互更加简洁且高效，减少了配置和手动操作的复杂性，特别适合在 NestJS 项目中使用，能够与 NestJS 提供的依赖注入和模块化架构很好地结合，提升整体开发体验。

Redis

Redis 和 mysql 都仅仅是会用的阶段，目前都是直接在 NestJs 项目中使用，都是已经封装好了的，直接传参调用就好了：

import { Injectable, Inject, OnModuleDestroy, Logger } from "@nestjs/common";

import Redis, { ClientContext, Result } from "ioredis";



import { ObjectType } from "../types";



import { isObject } from "@/utils";



@Injectable()

export class RedisService implements OnModuleDestroy {

  private readonly logger = new Logger(RedisService.name);



  constructor(@Inject("REDIS_CLIENT") private readonly redisClient: Redis) {}



  onModuleDestroy(): void {

    this.redisClient.disconnect();

  }



  /**

   * @Description: 设置值到redis中

   * @param {string} key

   * @param {any} value

   * @return {*}

   */

  public async set(

    key: string,

    value: unknown,

    second?: number

  ): Promise<Result<"OK", ClientContext> | null> {

    try {

      const formattedValue = isObject(value)

        ? JSON.stringify(value)

        : String(value);



      if (!second) {

        return await this.redisClient.set(key, formattedValue);

      } else {

        return await this.redisClient.set(key, formattedValue, "EX", second);

      }

    } catch (error) {

      this.logger.error(`Error setting key ${key} in Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 获取redis缓存中的值

   * @param key {String}

   */

  public async get(key: string): Promise<string | null> {

    try {

      const data = await this.redisClient.get(key);



      return data ? data : null;

    } catch (error) {

      this.logger.error(`Error getting key ${key} from Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 设置自动 +1

   * @param {string} key

   * @return {*}

   */

  public async incr(

    key: string

  ): Promise<Result<number, ClientContext> | null> {

    try {

      return await this.redisClient.incr(key);

    } catch (error) {

      this.logger.error(`Error incrementing key ${key} in Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 删除redis缓存数据

   * @param {string} key

   * @return {*}

   */

  public async del(key: string): Promise<Result<number, ClientContext> | null> {

    try {

      return await this.redisClient.del(key);

    } catch (error) {

      this.logger.error(`Error deleting key ${key} from Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 设置hash结构

   * @param {string} key

   * @param {ObjectType} field

   * @return {*}

   */

  public async hset(

    key: string,

    field: ObjectType

  ): Promise<Result<number, ClientContext> | null> {

    try {

      return await this.redisClient.hset(key, field);

    } catch (error) {

      this.logger.error(`Error setting hash for key ${key} in Redis`, error);



      return null;

    }

  }



  /**

   * @Description: 获取单个hash值

   * @param {string} key

   * @param {string} field

   * @return {*}

   */

  public async hget(key: string, field: string): Promise<string | null> {

    try {

      return await this.redisClient.hget(key, field);

    } catch (error) {

      this.logger.error(

        `Error getting hash field ${field} from key ${key} in Redis`,

        error

      );



      return null;

    }

  }



  /**

   * @Description: 获取所有hash值

   * @param {string} key

   * @return {*}

   */

  public async hgetall(key: string): Promise<Record<string, string> | null> {

    try {

      return await this.redisClient.hgetall(key);

    } catch (error) {

      this.logger.error(

        `Error getting all hash fields from key ${key} in Redis`,

        error

      );



      return null;

    }

  }



  /**

   * @Description: 清空redis缓存

   * @return {*}

   */

  public async flushall(): Promise<Result<"OK", ClientContext> | null> {

    try {

      return await this.redisClient.flushall();

    } catch (error) {

      this.logger.error("Error flushing all Redis data", error);



      return null;

    }

  }



  /**

   * @Description: 保存离线通知

   * @param {string} userId

   * @param {any} notification

   */

  public async saveOfflineNotification(

    userId: string,

    notification: any

  ): Promise<void> {

    try {

      await this.redisClient.lpush(

        `offline_notifications:${userId}`,

        JSON.stringify(notification)

      );

    } catch (error) {

      this.logger.error(

        `Error saving offline notification for user ${userId}`,

        error

      );

    }

  }



  /**

   * @Description: 获取离线通知

   * @param {string} userId

   * @return {*}

   */

  public async getOfflineNotifications(userId: string): Promise<any[]> {

    try {

      const notifications = await this.redisClient.lrange(

        `offline_notifications:${userId}`,

        0,

        -1

      );

      await this.redisClient.del(`offline_notifications:${userId}`);



      return notifications.map((notification) => JSON.parse(notification));

    } catch (error) {

      this.logger.error(

        `Error getting offline notifications for user ${userId}`,

        error

      );



      return [];

    }

  }



  /**

   * 获取指定 key 的剩余生存时间

   * @param key Redis key

   * @returns 剩余生存时间（秒）

   */

  public async getTTL(key: string): Promise<number> {

    return await this.redisClient.ttl(key);

  }

}