joken1310 - 博客园

浏览器2个标签页面如何通信，传递数据

摘要：在Vue应用中，使用postMessage方法可以在两个不同的浏览器标签页之间进行通信。下面是一个简单的示例，展示如何在两个标签页之间发送和接收消息。发送消息的标签页（Sender）假设这是第一个标签页，我们将在这个标签页中发送消息到另一个标签页。 <!-- src/views/pageH/in 阅读全文

posted @ 2024-12-29 21:29 joken1310 阅读(384) 评论(0) 推荐(0)

ts bigint使用

摘要：在 TypeScript 中，bigint 是一种用于表示任意精度整数的数据类型。bigint 类型在处理非常大的整数时非常有用，因为它不受 Number 类型的精度限制（即 Number 类型的最大安全整数是 2^53 - 1）。以下是关于如何在 TypeScript 中使用 bigint 的详阅读全文

posted @ 2024-12-28 10:06 joken1310 阅读(331) 评论(0) 推荐(0)

ts 函数重载

摘要： TypeScript 中的函数重载允许你定义多个函数签名，以便更好地描述函数的行为。函数重载的主要目的是提供更好的类型检查和代码可读性。以下是 TypeScript 函数重载的基本用法：定义多个函数签名：在实现函数之前，先定义多个函数签名，每个签名描述了一种可能的调用方式。实现一个函数体：实阅读全文

posted @ 2024-12-28 09:47 joken1310 阅读(195) 评论(0) 推荐(0)

exceljs 导出html table，并能合并多表头表格

摘要： <template> <div>  <table class="styled-table" ref="table"> <thead> <tr> <th rowspan="3">姓名</th> <th rowspan="3">年龄</th> <th colsp 阅读全文

posted @ 2024-12-26 22:03 joken1310 阅读(213) 评论(0) 推荐(0)

vite 使用rollup和esbuild 分别来构建生产环境代码、开发环境代码

摘要： rollup和esbuild 在 Vite 中，开发环境和生产环境使用了不同的构建工具：开发环境：Vite 使用 esbuild 进行快速的热重载和模块编译。esbuild 以其极高的速度著称，可以显著提高开发体验。生产环境：Vite 使用 Rollup 进行最终的打包和优化。Rollup 是一阅读全文

posted @ 2024-12-24 21:13 joken1310 阅读(1271) 评论(0) 推荐(1)

Webpack DLL（Dynamic Link Library）和 `manifest.json`

摘要： webpack 使用dll实现编译缓存，manifest.json作为缓存目录功能使用在 Webpack 中，DLL（Dynamic Link Library）和 manifest.json 是两个不同的概念，它们在构建过程中扮演着不同的角色： DLL（动态链接库）： DLL 是一个包含预编译代码阅读全文

posted @ 2024-12-24 20:53 joken1310 阅读(111) 评论(0) 推荐(0)

Windows DLL 文件,动态链接库，可以调用已编译的全局公共方法

摘要：创建一个 Windows DLL 文件通常需要使用 C 或 C++ 编程语言，并且需要一个编译器，如 Microsoft Visual Studio。下面是一个简单的示例，展示了如何创建一个包含基本函数的 DLL 文件。首先，创建一个名为 MyLibrary.h 的头文件，它声明了 DLL 中将要阅读全文

posted @ 2024-12-24 20:46 joken1310 阅读(105) 评论(0) 推荐(0)

webpack 使用hard-source-webpack-plugin缓存编译文件，加快编译速度

摘要： hard-source-webpack-plugin 是一个为 webpack 提供中间缓存功能的插件。它可以将模块的编译结果缓存到磁盘中，这样在后续的编译过程中，如果模块的源代码没有发生变化，就可以直接使用缓存的结果，从而加快编译速度。插件地址 https://www.npmjs.com/pac 阅读全文

posted @ 2024-12-24 20:40 joken1310 阅读(566) 评论(0) 推荐(0)

vue3 使用拖动插件vuedraggable@next

摘要：基本使用下面是一个使用 Vue Draggable Next 的 Vue 3 组件示例。这个示例展示了一个可拖动的列表。安装依赖首先，确保安装了 Vue Draggable Next： npm install vuedraggable@next 示例组件 <template> <div> <h 阅读全文

posted @ 2024-12-23 22:37 joken1310 阅读(5635) 评论(0) 推荐(1)

hotspot-vue3 图片拖动划分热点区域使用

摘要： github地址 https://github.com/shadow-Fiend/hotspot-vue3 测试代码 <template> <div class="interactive-image"> <hotspot :image="image" :zonesInit="zones" :type 阅读全文

posted @ 2024-12-23 22:30 joken1310 阅读(267) 评论(1) 推荐(0)

html map area标签，图片热点区域

摘要： <map> 和 <area> 标签在 HTML 中用于定义图像映射。图像映射是一种在图像上定义多个热点（区域）的技术，每个热点可以是一个矩形、圆或者多边形，并且每个热点都可以链接到不同的 URL 或者执行不同的操作。下面是关于这两个标签的详细说明和示例： <map> 标签 <map> 标签用于定义阅读全文

posted @ 2024-12-23 22:14 joken1310 阅读(459) 评论(0) 推荐(0)

js 如何区分页面刷新还是关闭

摘要：在JavaScript中，要区分浏览器是关闭还是刷新，可以通过监听 beforeunload 事件和 unload 事件，并结合 sessionStorage 来实现。下面是一个示例代码，展示了如何区分这两种情况： // 页面加载时执行 window.onload = function() { // 阅读全文

posted @ 2024-12-19 21:09 joken1310 阅读(763) 评论(0) 推荐(0)

sse 浏览器端技术使用，Server-Sent Events ，EventSource，来建立长连接保持与服务端的通讯

摘要： Server-Sent Events (SSE) 是一种允许服务器向客户端推送更新的技术。它使用 HTTP 协议，通过一个持久的 HTTP 连接，服务器可以在任何时间发送新的事件到客户端。SSE 通常用于实时更新，如股票价格、新闻更新等。以下是一个简单的 SSE 使用示例：服务器端 (Node. 阅读全文

posted @ 2024-12-19 21:00 joken1310 阅读(426) 评论(0) 推荐(0)

uni app 人脸识别实现

摘要：前端代码（UniApp） // 使用 uni.createCameraContext 拍照 const cameraContext = uni.createCameraContext(); cameraContext.takePhoto({ quality: 'high', success: fun 阅读全文

posted @ 2024-12-19 20:53 joken1310 阅读(710) 评论(0) 推荐(0)

js 如何调用浏览器摄像头api，MediaDevices.getUserMedia

摘要：在 JavaScript 中，可以使用 MediaDevices 接口和 getUserMedia 方法来访问用户的摄像头，并拍摄照片或录制视频。以下是一个简单的示例，展示了如何使用这些 API 来拍照和录制视频。拍照 <!DOCTYPE html> <html lang="en"> <head> 阅读全文

posted @ 2024-12-19 20:48 joken1310 阅读(902) 评论(0) 推荐(0)

js workder 如何导入其他脚本，importScripts使用

摘要：在 JavaScript 中，Web Workers 提供了一种在后台线程中执行脚本的方法，而不会影响主线程的性能。Web Workers 本身不支持直接导入其他脚本，但你可以通过几种方式来间接实现这一点。使用 importScripts importScripts 是 Web Workers 提阅读全文

posted @ 2024-12-19 20:46 joken1310 阅读(1061) 评论(0) 推荐(0)

js requestIdleCallback使用，避免阻塞主线程页面主要js执行

摘要： requestIdleCallback 是一个浏览器提供的 API，用于在主线程空闲时执行低优先级的操作，而不会阻塞主线程的执行。这对于执行一些非紧急的任务（如统计、数据预处理等）非常有用。以下是 requestIdleCallback 的基本使用方法：定义一个回调函数：这个函数将在主线程空闲时阅读全文

posted @ 2024-12-19 20:38 joken1310 阅读(1299) 评论(0) 推荐(0)

vite 创建react hook项目

摘要： create-vite安装 create-vite 是一个用于快速搭建 Vite 项目的脚手架工具。你可以通过 npm（Node 包管理器）来安装它。通常情况下，你不需要单独安装 create-vite，因为你可以直接使用 npx（Node 包运行器）来运行它。npx 是 npm 5.2.0 版本及阅读全文

posted @ 2024-12-17 21:26 joken1310 阅读(299) 评论(0) 推荐(0)

indexdb 存储blob文件

摘要：直接存储blob 以下是一个简单的 IndexedDB 封装方法，用于存储和检索 Blob 文件： class IndexedDBStore { constructor(dbName, storeName) { this.dbName = dbName; this.storeName = store 阅读全文

posted @ 2024-12-17 21:14 joken1310 阅读(291) 评论(0) 推荐(0)

js如何获取元素的高度的几种方式

摘要：在 JavaScript 中，你可以使用多种方法来获取元素的高度。以下是一些常见的方法：使用 offsetHeight 属性： offsetHeight 属性返回元素的像素高度，包括元素的边框、内边距和水平滚动条（如果存在）。 const element = document.getElement 阅读全文

posted @ 2024-12-17 21:10 joken1310 阅读(2688) 评论(0) 推荐(0)

react hook使用mobx，并使用Provide实现全局注入store

摘要：在 React 应用中，你可以使用 MobX 的 Provider 组件来全局注入你的 store，这样你的整个应用都可以访问到这些 store。以下是如何使用 MobX 和 React Hooks 配置全局注入的示例：首先，确保你已经安装了 MobX 和它的 React 绑定库： npm ins 阅读全文

posted @ 2024-12-17 21:05 joken1310 阅读(364) 评论(0) 推荐(0)

react 子组件如何暴漏方法或者数据给父组件直接访问

摘要：在 React 中，子组件可以通过几种方式将方法或数据暴露给父组件，以便父组件可以直接访问。以下是几种常见的方法： 1. 使用 props 传递回调函数父组件可以通过 props 向子组件传递一个回调函数，子组件可以在适当的时候调用这个回调函数并将数据或方法作为参数传递给父组件。 // 子组件 c 阅读全文

posted @ 2024-12-16 21:33 joken1310 阅读(815) 评论(0) 推荐(0)

react 常用的hook使用举例

摘要： React 提供了许多内置的 Hook，用于在函数组件中添加状态管理和副作用等特性。以下是一些常用的 Hook 及其用法示例： 1. useState useState 用于在函数组件中添加状态。 import React, { useState } from 'react'; const Coun 阅读全文

posted @ 2024-12-16 21:30 joken1310 阅读(106) 评论(0) 推荐(0)

react hook 修改对象数据的几种方式

摘要：修改对象的方式在 React 中使用 useState 钩子来修改对象数据时，通常推荐使用函数式更新方式，以确保状态的不可变性，并让 React 能够正确地检测到状态变化并触发组件的重新渲染。以下是一些修改对象数据的例子：例子 1：修改对象的一个属性 import React, { useSta 阅读全文

posted @ 2024-12-16 21:24 joken1310 阅读(489) 评论(0) 推荐(0)

react hooks 使用provide传递数据给任意子组件数据

摘要：下面是一个完整的实例，展示了如何在 React 中使用 React Context 和 useContext Hook 在组件树中传递数据。首先，我们创建一个上下文 MyContext： // MyContext.js import React from 'react'; // 创建一个上下文 c 阅读全文

posted @ 2024-12-16 20:58 joken1310 阅读(93) 评论(0) 推荐(0)

react hook 父子组件数据传递方式

摘要：在 React 中，父子组件之间的数据传递是一个常见的需求。父组件可以通过 props 将数据传递给子组件，而子组件可以通过回调函数将数据传递回父组件。下面是一个简单的例子，展示了如何使用 React Hooks 在父子组件之间传递数据。首先，我们创建一个父组件 ParentComponent，它阅读全文

posted @ 2024-12-16 20:54 joken1310 阅读(213) 评论(0) 推荐(0)

react hook如何监听数据的变化，useEffect

摘要：在 React 中，如果你需要监听某个状态或属性的变化，可以使用 useEffect Hook。useEffect 可以让你在函数组件中执行副作用操作，例如数据获取、订阅或手动更改 React 组件中的 DOM。基本用法 import React, { useState, useEffect } 阅读全文

posted @ 2024-12-16 20:47 joken1310 阅读(1240) 评论(0) 推荐(0)

UniApp 使用 IndexedDB

摘要： UniApp 支持 IndexedDB。UniApp 是一个使用 Vue.js 开发所有前端应用的框架，它允许你编写一次代码，然后发布到多个平台，包括 Web、iOS、Android、微信小程序等。在 UniApp 中使用 IndexedDB 的方式与在普通的 Web 应用中使用 IndexedD 阅读全文

posted @ 2024-12-09 20:27 joken1310 阅读(1003) 评论(0) 推荐(0)

Dexie.js 库增删改查indexdb示例，游标、索引使用等

摘要：增删改查以下是如何使用 Dexie.js 库进行增删改查操作的示例： 1. 初始化数据库首先，你需要安装 Dexie.js： npm install dexie 然后，在你的代码中引入并初始化 Dexie.js： import Dexie from 'dexie'; const db = new 阅读全文

posted @ 2024-12-09 20:16 joken1310 阅读(1771) 评论(0) 推荐(0)

IndexDBWrapper库操作indexdb示例

摘要： IndexDBWrapper 是一个简化 IndexedDB 操作的 JavaScript 库。以下是如何使用 IndexDBWrapper 库进行增删改查操作的示例。首先，你需要引入 IndexDBWrapper 库。如果你使用的是 npm，可以通过以下命令安装： npm install ind 阅读全文

posted @ 2024-12-09 20:12 joken1310 阅读(125) 评论(0) 推荐(0)

indexdb增删改查示例

摘要： IndexedDB 是一个低级 API，用于在用户的浏览器中存储大量结构化数据。下面是增删改查（CRUD）操作的基本示例： 1. 打开数据库并创建对象存储 let db; const request = indexedDB.open('myDatabase', 1); request.onerror 阅读全文

posted @ 2024-12-09 20:09 joken1310 阅读(226) 评论(0) 推荐(0)

ts 装饰器使用示例

摘要：在 TypeScript 中，装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问符、属性或参数上。下面是一些常见的装饰器示例： 1. 类装饰器类装饰器用于类声明之前，用来监视、修改或替换类定义。 function sealed(constructor: Function) { Objec 阅读全文

posted @ 2024-12-09 20:05 joken1310 阅读(186) 评论(0) 推荐(0)

indexdb 游标cursor

摘要：在 IndexedDB 中，游标（Cursor）是一个用于遍历对象存储（Object Store）中记录的指针。游标提供了一种高效的方式来遍历和操作存储在对象存储中的大量数据。通过游标，你可以按顺序访问数据，并根据需要执行操作，如读取、更新或删除记录。游标的工作原理打开游标：首先，你需要打开一个阅读全文

posted @ 2024-12-05 22:29 joken1310 阅读(108) 评论(0) 推荐(0)

一个js文件导出一个new class实例，其他多个地方import引用的是同一个实例对象吗

摘要：在 JavaScript 中，当你从一个模块导出一个类的实例时，其他模块在导入这个实例时将获得该实例的一个引用。这意味着，如果你修改了这个实例的属性或调用它的方法，所有导入该实例的模块都会看到这些更改，因为它们引用的是同一个对象。以下是一个示例： moduleA.js: class MyClass 阅读全文

posted @ 2024-12-05 22:26 joken1310 阅读(281) 评论(0) 推荐(0)

js 如何操作IndexedDB 存储

摘要： IndexedDB 是一种在用户浏览器中存储大量结构化数据的方式。它是一个低级 API，用于在客户端存储大量数据，并使用索引来进行高性能搜索。以下是如何在前端 JavaScript 中使用 IndexedDB 的基本步骤： 1. 打开数据库首先，你需要打开一个数据库。如果数据库不存在，它会自动创建阅读全文

posted @ 2024-12-05 22:23 joken1310 阅读(829) 评论(0) 推荐(0)

pinia 持久化存储库pinia-plugin-persist使用

摘要：对于 Vue 3 和 Pinia，有一个名为 pinia-plugin-persist 的插件可以用来持久化 Pinia store 的状态到 localStorage 或 sessionStorage。这个插件简化了状态持久化的过程，使得你不需要手动编写保存和加载状态的逻辑。以下是如何使用 pi 阅读全文

posted @ 2024-12-05 22:21 joken1310 阅读(2637) 评论(0) 推荐(0)

window.crypto.subtle 实现非对称加密RSA-OAEP

摘要：使用 window.crypto.subtle，可以实现非对称加密（也称为公钥加密）。非对称加密使用一对密钥：公钥用于加密数据，私钥用于解密数据。以下是一个示例，演示如何使用 window.crypto.subtle 实现非对称加密和解密：生成密钥对首先，生成一个 RSA 密钥对： async 阅读全文

posted @ 2024-12-05 22:15 joken1310 阅读(606) 评论(0) 推荐(0)

使用 `window.crypto.subtle.digest` 为字符串生成SHA-256哈希签名

摘要：使用 window.crypto.subtle.digest 方法，可以为字符串生成哈希签名。以下是一个示例，演示如何为字符串生成 SHA-256 哈希值： async function generateHash(text) { // 将文本编码为 UTF-8 字节数组 const encoder 阅读全文

posted @ 2024-12-05 22:13 joken1310 阅读(663) 评论(0) 推荐(0)

window.crypto.subtle 实现AES-128对称加密算法

摘要： window.crypto.subtle 支持AES-128对称加密算法。AES（高级加密标准）是一种广泛使用的对称加密算法，它有三种密钥长度：128位、192位和256位。在Web Crypto API中，你可以选择不同的密钥长度来生成AES密钥。以下是一个使用AES-128-CBC模式的加密和阅读全文

posted @ 2024-12-05 22:08 joken1310 阅读(785) 评论(0) 推荐(0)

前端应用中使用 AES-GCM 加密算法

摘要： AES-GCM 加密加密算法简介 AES-GCM（高级加密标准-伽罗瓦/计数器模式）是一种对称加密算法，它结合了块加密和消息认证码（MAC）的功能，提供数据加密和完整性验证。AES-GCM 模式因其高效和安全性而被广泛应用于各种安全通信协议中，如 TLS（传输层安全）和 IPsec（互联网协议安全）阅读全文

posted @ 2024-12-05 21:47 joken1310 阅读(1450) 评论(0) 推荐(0)

joken-前端工程师