> 在某些场景下，例如表单提交，经常会需要重置表单状态。可以通过以下的方式进行组件状态优雅重置。

### xxx写法

```vue

<template>
  <div>
    <div>{{ state.name }} - {{ state.age }}</div>
    <div @click="resetState">reset ref</div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';

  const state = reactive({
    name: 1,
    age: 2,
  });

  function resetState() {
    state.name = 1;
    state.age = 2;
  }
</script>
```

### Hook 封装

```javascript
import { ref, reactive } from 'vue';

function clone(value) {
  return JSON.parse(JSON.stringify(value));
}

export function useResettableRef(value) {
  const initialValue = clone(value);
  const state = ref(value);

  const reset = () => {
    state.value = clone(initialValue);
  }

  return [state, reset];
}

export function useResettableReactive(value) {
  const state = reactive(clone(value));

  const reset = () => {
    Object.keys(state).forEach((key) => delete state[key]);
    Object.assign(state, clone(value));
  }

  return [state, reset];
}
```

### Hook 使用

```vue

<template>
  <div>
    <div>ref：{{ refState.name }} - {{ refState.age }}</div>
    <div @click="resetRefState">reset ref</div>

    <div>reactive：{{ reactiveState.name }} - {{ reactiveState.age }}</div>
    <div @click="resetReactiveState">reset ref</div>
  </div>
</template>

<script setup>
  import { useResettableRef, useResettableReactive } from '@/hooks/index.js';

  const [refState, resetRefState] = useResettableRef({
    name: 1,
    age: 2
  });

  const [reactiveState, resetReactiveState] = useResettableReactive({
    name: 1,
    age: 2
  });
</script>
```


【Vue】Vue3 重置组件状态

### 背景

SharedArrayBuffer 是 JavaScript 中一种特殊的对象类型，用于在多个 Web Workers 或主线程之间共享内存。它与普通的 ArrayBuffer
类似，但 可以在多个线程中同时访问和修改。这种功能对于需要高性能并发处理的场景非常有用，比如实时数据处理、游戏开发、音视频处理等。

> 2017.7月（Chrome 60）引入 SharedArrayBuffer。
>
> 2021.7月（Chrome 92）限制 SharedArrayBuffer 只能在 cross-origin isolated 页面使用。（Spectre 漏洞）

### 解决方案

##### 一、不启用 SharedArrayBuffer

##### 二、 在 HTTP 响应头中添加以下两个安全标头：

1. Cross-Origin-Opener-Policy (COOP):
    - 将页面与其他来源的窗口隔离开来。
    - 推荐值：same-origin。
2. Cross-Origin-Embedder-Policy (COEP):
    - 确保页面中加载的资源具备同源性或具有适当的跨源授权。
    - 推荐值：require-corp。

示例配置：

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

##### 三、Chrome Origin Trials

申请地址：[Trial for SharedArrayBuffers in non-isolated pages on Desktop platforms](https://developer.chrome.com/origintrials/#/view_trial/303992974847508481)

### 参考资料

- [关于 SharedArrayBuffer spectre 攻击的讨论](https://github.com/tc39/security/issues/3)
- [使用 SharedArrayBuffer 进行 Spectre 攻击的原理](https://www.giantbranch.cn/2018/01/09/腾讯玄武实验室检测浏览器spectre的原理)
- [使用 COOP 和 COEP 将网站设置为“跨源隔离”](https://web.dev/articles/coop-coep?hl=zh-cn)
- [A year with Spectre: a V8 perspective](https://v8.dev/blog/spectre)


【Wasm】SharedArrayBuffer(SAB) is not defined

### 在 React 中进行模拟触发输入

> 参考：https://github.com/facebook/react/issues/11488

在自动化测试或在线调试React项目中，会遇到直接修改input的valut值UI变化，但是内部state并没有修改的情况。因此需要hack方法来解决：

```javascript
let input = document.querySelector('xxx');
let lastValue = input.value;
input.value = 'xxx';
let event = new Event('input', {bubbles: true});
event.simulated = true;
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue)
}
input.dispatchEvent(event);
const enterKeyEvent = new KeyboardEvent('keypress', {
  key: 'Enter',
  keyCode: 13,
  code: 'Enter',
  which: 13,
  bubbles: true,
});
input.dispatchEvent(enterKeyEvent);
```

```javascript
const fileInput = document.querySelector('input[type="file"]');

async function simulateRemoteFileSelection(url) {
  const response = await fetch(url);
  const blob = await response.blob();

  const file = new File([blob], "file.mp4", {
    type: blob.type,
  });

  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(file);

  fileInput.files = dataTransfer.files;

  const event = new Event('change', {bubbles: true});
  fileInput.dispatchEvent(event);
}

simulateRemoteFileSelection('xxxx');
```

【React hack】在React中模拟触发输入

### 基于路由的访问控制（Route-Based Access Control）

> 前端 routes.js 中定义完整路由，每个路由 meta 信息中的 role 来标识权限值。登陆之后通过用户的权限过滤完整路由，最终生成用户路由。

#### 特点

- 集中管理：在 routes.js 中集中管理所有路由及其权限信息。
- 动态生成用户路由：用户登录时根据权限动态过滤路由，生成符合用户权限的路由配置。
- 基于角色的访问控制：通过 meta.role 来管理和控制角色权限，可以支持多角色的访问权限需求。

#### 流程

- 定义完整路由表：在 routes.js 中定义所有路由和对应的 meta.role 信息。
- 用户登录后获取权限：用户登录后，获取用户权限信息（如角色、权限 ID 等）。
- 动态过滤路由：根据用户的权限信息过滤完整路由表，生成仅包含用户有权限访问的路由。
- 动态注入路由表：将过滤后的路由表动态注入到路由配置中。

### 业务背景

> 基于上述流程。在实际业务中，如果用户进入无匹配路由页面时（**实际路由确实不存在、权限不足导致无匹配路由**），会重定向至 404
> 页面（此动作由 vue-router 的 路由匹配完成）。
>
> [捕获所有路由或 404 Not found 路由](https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#捕获所有路由或-404-Not-found-路由)

```javascript
// 需在用户路由表生成后添加
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: '/404',
};
```

#### 问题

通过以上操作，一旦匹配不到路由就会重定向至 404 页面。此时无法区分进入 404 的原因到底是因为 **实际路由不存在** 还是 **权限不足
**
**。

#### 解决方案

为了解决上述问题可以修改 **NotFound** 中的 **redirect** 如下:

```javascript
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: (to) => {
    console.log(to);
    return '/404';
  },
};
```

在将 **redirect** 配置项设置为方法后：

1. 参数 **to**：可以访问跳转前的路由信息，帮助了解用户试图访问的路径。
2. 方法 **router.getRoutes**：可以获取所有已注册的路由表，便于进行权限和路径验证。

在此基础上，需要实现以下两重判断：

1. 路径存在性判断：利用 **to.path** 检查目标路径是否在路由表中。
    - 若路径存在：说明目标路径已注册。（可忽略。~~进一步判断用户是否有权限访问。此时，如果用户跳转到了 **404**
      页面，通常意味着当前用户没有访问该路径的权限。~~）
    - 若路径不存在：说明路由没有进行注册。
2. 增加标记：可以通过修改 **to.query** 或其他方式，标记跳转到 **404** 的原因，便于前端展示不同的提示内容。

通过这种判断，能够精准地确认跳转至 **404** 的原因，进一步支持前端展示出更具体的权限提示信息。


【Vue router】动态路由匹配下的权限处理

> 在获取视频任意时刻的截图时，通常大多数的做法都是
> - 通过视频播放，canvas绘制
> - 借助ffmpeg
> 
> 除此之外，还有另外一种方式：URI Queries

### 使用方式

只需要在url后面带上#t=xx（秒）即可，如果是本地文件的话，上传之后需要拿到blobUrl

```html

<div>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=1.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=2.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=3.5"></video>
</div>


<div>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=1.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=2.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=3.5"></video>
</div>


<script>
  fetch('https://www.w3school.com.cn/i/video/shanghai.mp4').then(res => res.blob()).then(blob => {
    const blobUrl = URL.createObjectURL(blob);
    console.log(blobUrl);
  })
</script>
```

到此就可以渲染出指定时刻的图片。就这？是的，没错，就这。

### 优点

- 快
- 简单

### 缺点

- 每一张图实际是一个video，会导致资源重复请求，视频文件过大，图片过多，网络压力较大。
- 请求网络地址进而转换成本地地址，虽然可以解决并发导致的网络压力，但是如果文件过大，首次加载依旧需要消耗比较长的时间。

### 总结

具体使用什么方式，还需根据业务需求决定。

> 参考文档：https://www.w3.org/TR/media-frags/#media-fragment-syntax

【秒级】获取视频时刻图

# 适用于Vite环境的JavaScript混淆插件

>仓库地址：[vite-plugin-bundle-obfuscator](https://github.com/z0ffy/vite-plugin-bundle-obfuscator)

## ⭐️ 特性

- [x] ⚡ 支持 Vite 项目中的 JavaScript 混淆。
- [x] 🚀 多线程支持，以获得更好的性能。
- [x] ⚙️ 可定制的混淆器选项，以满足您的需求。
- [x] 🛡️ 自动排除 node_modules。
- [x] 📦 支持 node_modules 拆分块。

## ⚠️ 注意

- 如果混淆选项stringArray为true。
    - 您的结果可能会丢失一些捆绑包（在__vite__mapDeps数组中）。
    - 我正在寻找一个准确的案例。
- 如果打包过程中出现内存溢出。修改打包命令为：cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_CJS_IGNORE_WARNING=true vite build，其中 max-old-space-size 根据机器配置自行设置。
- 在设置 node_modules 分包时，请把准确的包名前置。例如：["vue-router", "vue"]，"vue"可以同时匹配到 vue 以及 vue-router。

## 🌐 在线示例

✦ [Vite - Vanilla](https://stackblitz.com/edit/vitejs-vite-zsytij?file=vite.config.js)
✦ [Vite - Vue](https://stackblitz.com/edit/vitejs-vite-ywho91?file=vite.config.js)
✦ [Vite - React](https://stackblitz.com/edit/vitejs-vite-wyeur4?file=vite.config.js)
✦ [Vite - PReact](https://stackblitz.com/edit/vitejs-vite-oujmks?file=vite.config.js)
✦ [Vite - lit](https://stackblitz.com/edit/vitejs-vite-ru4gws?file=vite.config.js)
✦ [Vite - Svelte](https://stackblitz.com/edit/vitejs-vite-fthdtu?file=vite.config.js)
✦ [Vite - Solid](https://stackblitz.com/edit/vitejs-vite-dcx3eh?file=vite.config.js)
✦ [Vite - Qwik](https://stackblitz.com/edit/vitejs-vite-i2bjvq?file=vite.config.js)
✦ ...


## 📦 安装

```bash
# 使用npm
npm install vite-plugin-bundle-obfuscator -D

# 使用pnpm
pnpm add vite-plugin-bundle-obfuscator -D

# 使用yarn
yarn add vite-plugin-bundle-obfuscator -D
```

## 👨‍💻 使用

1. 使用您首选的软件包管理器安装插件。
2. 在vite.config.js中注册插件。
3. 自定义混淆器配置或使用默认选项。

示例:

```javascript
import vitePluginBundleObfuscator from 'vite-plugin-bundle-obfuscator';

const defaultObfuscatorConfig = {
  excludes: [],
  enable: true,
  log: true,
  autoExcludeNodeModules: false,
  threadPool: false,
  options: {
    compact: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 1,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: 0,
    disableConsoleOutput: false,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    numbersToExpressions: false,
    renameGlobals: false,
    selfDefending: true,
    simplify: true,
    splitStrings: false,
    stringArray: false,
    stringArrayCallsTransform: false,
    stringArrayCallsTransformThreshold: 0.5,
    stringArrayEncoding: [],
    stringArrayIndexShift: true,
    stringArrayRotate: true,
    stringArrayShuffle: true,
    stringArrayWrappersCount: 1,
    stringArrayWrappersChainedCalls: true,
    stringArrayWrappersParametersMaxCount: 2,
    stringArrayWrappersType: 'variable',
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false,
  }
};

export default {
  plugins: [
    // vitePluginBundleObfuscator()
    vitePluginBundleObfuscator(defaultObfuscatorConfig)
  ]
};
```
