摘要：
UniApp 支持 IndexedDB。UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它允许你编写一次代码，然后发布到多个平台，包括 Web、iOS、Android、微信小程序等。 在 UniApp 中使用 IndexedDB 的方式与在普通的 Web 应用中使用 IndexedD 阅读全文
摘要：
增删改查 以下是如何使用 Dexie.js 库进行增删改查操作的示例： 1. 初始化数据库 首先，你需要安装 Dexie.js： npm install dexie 然后，在你的代码中引入并初始化 Dexie.js： import Dexie from 'dexie'; const db = new 阅读全文
摘要：
IndexDBWrapper 是一个简化 IndexedDB 操作的 JavaScript 库。以下是如何使用 IndexDBWrapper 库进行增删改查操作的示例。 首先，你需要引入 IndexDBWrapper 库。如果你使用的是 npm，可以通过以下命令安装： npm install ind 阅读全文
摘要：
IndexedDB 是一个低级 API，用于在用户的浏览器中存储大量结构化数据。下面是增删改查（CRUD）操作的基本示例： 1. 打开数据库并创建对象存储 let db; const request = indexedDB.open('myDatabase', 1); request.onerror 阅读全文
摘要：
在 TypeScript 中，装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问符、属性或参数上。下面是一些常见的装饰器示例： 1. 类装饰器 类装饰器用于类声明之前，用来监视、修改或替换类定义。 function sealed(constructor: Function) { Objec 阅读全文
摘要：
在 IndexedDB 中，游标（Cursor）是一个用于遍历对象存储（Object Store）中记录的指针。游标提供了一种高效的方式来遍历和操作存储在对象存储中的大量数据。通过游标，你可以按顺序访问数据，并根据需要执行操作，如读取、更新或删除记录。 游标的工作原理 打开游标：首先，你需要打开一个 阅读全文
摘要：
在 JavaScript 中，当你从一个模块导出一个类的实例时，其他模块在导入这个实例时将获得该实例的一个引用。这意味着，如果你修改了这个实例的属性或调用它的方法，所有导入该实例的模块都会看到这些更改，因为它们引用的是同一个对象。 以下是一个示例： moduleA.js: class MyClass 阅读全文
摘要：
IndexedDB 是一种在用户浏览器中存储大量结构化数据的方式。它是一个低级 API，用于在客户端存储大量数据，并使用索引来进行高性能搜索。以下是如何在前端 JavaScript 中使用 IndexedDB 的基本步骤： 1. 打开数据库 首先，你需要打开一个数据库。如果数据库不存在，它会自动创建 阅读全文
摘要：
对于 Vue 3 和 Pinia，有一个名为 pinia-plugin-persist 的插件可以用来持久化 Pinia store 的状态到 localStorage 或 sessionStorage。这个插件简化了状态持久化的过程，使得你不需要手动编写保存和加载状态的逻辑。 以下是如何使用 pi 阅读全文
摘要：
使用 window.crypto.subtle，可以实现非对称加密（也称为公钥加密）。非对称加密使用一对密钥：公钥用于加密数据，私钥用于解密数据。以下是一个示例，演示如何使用 window.crypto.subtle 实现非对称加密和解密： 生成密钥对 首先，生成一个 RSA 密钥对： async 阅读全文
摘要：
使用 window.crypto.subtle.digest 方法，可以为字符串生成哈希签名。以下是一个示例，演示如何为字符串生成 SHA-256 哈希值： async function generateHash(text) { // 将文本编码为 UTF-8 字节数组 const encoder 阅读全文
摘要：
window.crypto.subtle 支持AES-128对称加密算法。AES（高级加密标准）是一种广泛使用的对称加密算法，它有三种密钥长度：128位、192位和256位。在Web Crypto API中，你可以选择不同的密钥长度来生成AES密钥。 以下是一个使用AES-128-CBC模式的加密和 阅读全文
摘要：
AES-GCM 加密加密算法简介 AES-GCM（高级加密标准-伽罗瓦/计数器模式）是一种对称加密算法，它结合了块加密和消息认证码（MAC）的功能，提供数据加密和完整性验证。AES-GCM 模式因其高效和安全性而被广泛应用于各种安全通信协议中，如 TLS（传输层安全）和 IPsec（互联网协议安全） 阅读全文
摘要：
autoNamePlugin.js export default { install: (app) => { const router = app.config.globalProperties.$router; if (router) { router.beforeEach(async (to, 阅读全文
摘要：
import './assets/main.css'; import './assets/tailwind.css'; import './components/myts'; import { createApp } from 'vue'; import { createPinia } from ' 阅读全文
摘要：
// 1. 原型链继承 function Animal(name) { this.name = name; this.colors = ['black', 'white']; } Animal.prototype.getName = function () { return this.name; } 阅读全文
摘要：
enum既可以作为值使用，也可以作为类型使用。 枚举的打印结果是一个对象 <template> <div class='box'> <div class="enum-demo"> <h3>用户状态: {{ userStatusText }}</h3> <button @click="toggleUs 阅读全文
摘要：
<template> <div class='box'> <button @click="addItem">添加项目</button> <button @click="removeItem">删除项目</button> <TransitionGroup name="list" tag="ul" cl 阅读全文
摘要：
// 1. 普通函数中的this function normalFunction() { console.log('普通函数this指向:', this); } // 在非严格模式下，this指向window normalFunction(); // window // 严格模式下，this指向un 阅读全文
摘要：
MutationObserver 是一个强大的 API，用于监测 DOM 的变化。它可以监听节点的添加、删除、属性变化等操作，并在这些变化发生时执行指定的回调函数。以下是 MutationObserver 的基本用法和示例。 1. 创建 MutationObserver 首先，创建一个 Mutati 阅读全文
摘要：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width 阅读全文
摘要：
Shadow DOM 是 Web Components 的一部分，允许开发者将一个元素的内部结构和样式封装在一个独立的 DOM 中，从而避免与外部页面的其他样式和脚本发生冲突。以下是 Shadow DOM 的基本概念和用法： 1. 基础概念 封装性：Shadow DOM 提供了样式和内容的封装，只有 阅读全文
摘要：
拓展基础元素功能用法 is使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="wi 阅读全文
摘要：
测试代码 index.vue <template> <div class='box'> demo </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, nextTick, Pr 阅读全文
摘要：
测试代码 <template> <div class='box'> demo <el-button type="primary" @click="exportImageToExcel">test</el-button> </div> </template> <script lang='ts' set 阅读全文
摘要：
TypeScript 中的函数与类重载 在 TypeScript 中，函数和类的重载允许我们根据不同的参数类型和数量来调用相同的函数或构造函数。这种特性使得代码更加灵活和可读。本文将详细介绍如何在 TypeScript 中实现函数和类的重载。 1. 普通函数重载 示例 以下是一个普通函数重载的简单示 阅读全文
摘要：
测试代码 const obj1 = { name: "Alice", age: 25 } const obj2 = Object.create(obj1) console.log(obj2, "sdjlfsjldsfjlkf") console.log(obj1.name, "sdfsdfsfsdf 阅读全文
摘要：
在 JavaScript 中，只有函数（特别是构造函数）才有 prototype 属性。这个属性用于定义所有实例共享的方法和属性。 详细说明 函数的 prototype 属性： 每个函数都有一个 prototype 属性，默认为一个空对象。 当使用 new 关键字调用构造函数时，新创建的对象会自动将 阅读全文
摘要：
下面是 TypeScript 版本的 myNew 函数实现： function myNew<T>(constructor: new (...args: any[]) => T, ...args: any[]): T { // 创建一个新对象，原型指向构造函数的 prototype const obj 阅读全文
摘要：
TypeScript 中的类既可以作为值，也可以作为类型。让我们分别详细探讨这两个方面。 1. 类作为值 在 TypeScript 和 JavaScript 中，类实际上是构造函数的特殊形式，因此可以像其他函数一样使用。你可以将类赋值给变量、作为参数传递给函数，或者在其他上下文中使用它。 示例 cl 阅读全文
摘要：
在 TypeScript 中，构造函数类型和构造函数返回值类型是两个不同的概念，它们分别用于描述构造函数的行为和结果。下面详细解释这两者的区别。 1. 构造函数类型 构造函数类型描述的是一个类的构造函数的签名，包括构造函数的参数类型和返回类型。它定义了如何通过 new 关键字创建一个实例。 示例 c 阅读全文
摘要：
代码 子组件 import { defineComponent, PropType } from 'vue'; const MyComponent = defineComponent({ name: 'MyComponent', props: { title: { type: String as P 阅读全文
摘要：
出错代码部分 <script lang="tsx"> import { defineComponent } from 'vue'; import MyComponent from './components/childAbc'; const App = defineComponent({ name: 阅读全文
摘要：
在 Vue 3 中，useAttrs 是一个组合式 API 函数，允许你访问组件的所有属性（props）和传递给组件的非 prop 特性。这在自定义组件时非常有用，尤其是当你想要将这些属性传递给子组件或原生 HTML 元素时。 使用 useAttrs 的基本步骤 引入 useAttrs：从 Vue 阅读全文
摘要：
要移除 Yorkie 设置的 Git hooks，你可以按照以下步骤进行操作： 1. 手动删除 Git Hooks Yorkie 将 Git hooks 安装在项目的 .git/hooks 目录中。你可以手动删除这些 hooks 文件： 打开终端，导航到你的项目目录。 进入 .git/hooks 目 阅读全文
摘要：
以下是使用 Yorkie 的详细教程，包括如何在 npm postinstall 中自动运行 npx yorkie。 使用 Yorkie 的步骤 1. 安装 Yorkie 首先，在你的项目中安装 Yorkie： npm install --save-dev yorkie 2. 配置 package. 阅读全文
摘要：
npm 生命周期是指在执行 npm 命令时，特定阶段会自动触发的脚本。这些生命周期脚本可以帮助开发者在不同的安装和管理过程中的特定时刻执行自定义命令。 主要生命周期脚本 以下是常见的 npm 生命周期脚本： preinstall： 在安装依赖之前执行。 install： 在安装依赖时执行。 post 阅读全文
摘要：
步骤 先代码行点击断点 点击调试按钮 添加调试的项目配置 接着配置 写入代码运行的端口，和项目名称 开始运行断点调试 接着自动会跳出浏览器 vscode中断点的代码生效了，可以查看数据信息 停止断点 关闭浏览器即可 阅读全文
摘要：
代码测试 <template> <div class='box'> {{ demo[0]?.a?.b?.c }} </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, next 阅读全文
摘要：
代码测试 源对象改变也会改变ref内存数据 <template> <div class='box'> {{ abcDemo?.a?.b?.c }} <button @click="changeAbc">Change ABC</button> <div> {{ abdDemo?.a?.b?.c }} 阅读全文