鸭梨公共文档

主题

前端开发资源与工具 ​

1. JavaScript 工具库 ​

1.1 实用工具 ​

default-passive-events：默认设置 { passive: true } 的事件监听器，提升滚动性能。

file-saver：在浏览器中保存文件的库。

javascript
import { saveAs } from 'file-saver'

const blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' })
saveAs(blob, 'hello.txt')

globals：常用的全局变量定义。

n-gram：自然语言处理中的 n-gram 实现。

1.2 Vue 组件库 ​

vue-draggable-plus：Vue 3 拖拽组件库。

vue3-count-to：数字滚动动画组件。

xgplayer：西瓜视频播放器，功能强大的 HTML5 视频播放器。

vue-img-cutter：Vue 图片裁剪组件。

1.3 富文本编辑器 ​

Quill ​

bash
npm install quill

WangEditor 5 ​

bash
npm install @wangeditor/editor

注意：@wangeditor/editor-for-vue 已废弃，只支持 Vue 2。WangEditor 5 缺少维护，不支持移动端。

CKEditor 5 ​

bash
npm install @ckeditor/ckeditor5-vue

TinyMCE 5 ​

bash
npm install @tinymce/tinymce-vue

TOAST UI Editor ​

bash
npm install @toast-ui/editor-vue

Jodit Editor ​

bash
npm install @jodit/vue

1.4 Markdown 编辑器 ​

md-editor-v3：Vue 3 Markdown 编辑器。

bash
npm install md-editor-v3

2. 前端性能优化 ​

2.1 节流与防抖 ​

javascript
// 节流（Throttle）
export function throttle(func, wait) {
  let previous = 0
  return function () {
    const now = new Date().getTime()
    const context = this
    const args = arguments
    if (now - previous > wait) {
      func.apply(context, args)
      previous = now
    }
  }
}

// 防抖（Debounce）
function debounce(func, wait) {
  let timeout
  return function () {
    const context = this
    const args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait)
  }
}

2.2 Monaco Editor 性能优化 ​

在 Vue 3 中使用 Monaco Editor 时，getValue() 可能导致页面卡住的问题：

参考：vue3使用monaco editor踩坑记——getValue()导致页面卡住

3. Web 浏览器 API ​

3.1 Web Crypto API ​

使用原生 Web Crypto API 进行加密操作：

参考：Web Crypto API

3.2 加密库 ​

crypto-js：已经停止维护，建议使用原生 Web Crypto API。

@oslojs/crypto：JavaScript 实现的运行时无关的加密库。

参考：https://crypto.oslojs.dev/

3.3 IndexedDB ​

前端本地存储数据库 IndexedDB 完整教程：

参考：前端本地存储数据库 IndexedDB 完整教程

4. 浏览器指纹与数据存储 ​

4.1 Fingerprintjs ​

创建唯一的浏览器指纹，用于用户追踪和防欺诈。

参考：Fingerprintjs 创建唯一的浏览器指纹

4.2 MiniMongo ​

浏览器端的 MongoDB 实现，提供类似 MongoDB 的查询 API。

参考：MiniMongo: 浏览器端的MongoDB实现

5. 文件监控 ​

5.1 Chokidar ​

Node.js 跨平台文件监控库。

参考：Chokidar nodejs 跨平台文件监控

6. Vue 3 与 Web Components ​

6.1 自定义元素集成 ​

在 Nuxt 中集成 Web Components：

参考：Custom elements integration (Web components) · nuxt/nuxt · Discussion #17263

7. SEO 工具 ​

7.1 百度 SEO 点击软件 ​

使用 PyQt6 设计带 GUI 的百度 SEO 点击软件：

参考：

8. Tampermonkey 油猴脚本 ​

8.1 基础知识 ​

Tampermonkey 油猴脚本笔记：

参考：Tampermonkey 油猴脚本笔记

8.2 常用配置 ​

  • @require：引入资源文件
  • @run-at document-start：用于尽可能早地执行脚本
  • @grant unsafeWindow：用于沙箱运行

jQuery CDN：jsDelivr - A free, fast, and reliable CDN for JS and open source

9. Playwright 与 WebView2 ​

9.1 Playwright WebView2 支持 ​

使用 Playwright 测试 WebView2 应用：

参考：WebView2 | Playwright

9.2 WebView2 入门 ​

在 Win32 应用中使用 WebView2：

参考：Get started with WebView2 in Win32 apps

10. 前端精选资源 ​

10.1 开源项目 ​

11. 前端开发文章 ​