joken1310 - 博客园

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

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

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

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

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

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

uni app 人脸识别实现

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

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

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

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

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

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

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

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

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

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

posted @ 2024-12-19 20:38 joken1310 阅读(1065) 评论(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 阅读(209) 评论(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 阅读(186) 评论(0) 推荐(0)

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

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

posted @ 2024-12-17 21:10 joken1310 阅读(2147) 评论(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 阅读(288) 评论(0) 推荐(0)

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

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

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

react 常用的hook使用举例

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

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

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

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

posted @ 2024-12-16 21:24 joken1310 阅读(342) 评论(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 阅读(64) 评论(0) 推荐(0)

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

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

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

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

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

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

UniApp 使用 IndexedDB

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

posted @ 2024-12-09 20:27 joken1310 阅读(783) 评论(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 阅读(1368) 评论(0) 推荐(0)

IndexDBWrapper库操作indexdb示例

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

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

indexdb增删改查示例

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

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

ts 装饰器使用示例

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

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

indexdb 游标cursor

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

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

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

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

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

js 如何操作IndexedDB 存储

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

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

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

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

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

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

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

posted @ 2024-12-05 22:15 joken1310 阅读(437) 评论(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 阅读(480) 评论(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 阅读(557) 评论(0) 推荐(0)

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

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

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

vue 实现自动根据路由表的路由name同步定义引入的页面组件的name实现

摘要： autoNamePlugin.js export default { install: (app) => { const router = app.config.globalProperties.$router; if (router) { router.beforeEach(async (to, 阅读全文

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

vue main.js 捕获错误日志并上传后端接口示例

摘要： import './assets/main.css'; import './assets/tailwind.css'; import './components/myts'; import { createApp } from 'vue'; import { createPinia } from ' 阅读全文

posted @ 2024-12-02 21:28 joken1310 阅读(64) 评论(0) 推荐(0)

js 原生js几种函数继承方式

摘要： // 1. 原型链继承 function Animal(name) { this.name = name; this.colors = ['black', 'white']; } Animal.prototype.getName = function () { return this.name; } 阅读全文

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

ts enum 使用示例

摘要： enum既可以作为值使用，也可以作为类型使用。枚举的打印结果是一个对象 <template> <div class='box'> <div class="enum-demo"> <h3>用户状态: {{ userStatusText }}</h3> <button @click="toggleUs 阅读全文

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

vue3 TransitionGroup 组件使用示例

摘要： <template> <div class='box'> <button @click="addItem">添加项目</button> <button @click="removeItem">删除项目</button> <TransitionGroup name="list" tag="ul" cl 阅读全文

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

前端this的几种指向示例

摘要： // 1. 普通函数中的this function normalFunction() { console.log('普通函数this指向:', this); } // 在非严格模式下，this指向window normalFunction(); // window // 严格模式下，this指向un 阅读全文

posted @ 2024-11-27 22:39 joken1310 阅读(18) 评论(0) 推荐(0)

前端 MutationObserver api来监听dom变化劫持获取变化信息

摘要： MutationObserver 是一个强大的 API，用于监测 DOM 的变化。它可以监听节点的添加、删除、属性变化等操作，并在这些变化发生时执行指定的回调函数。以下是 MutationObserver 的基本用法和示例。 1. 创建 MutationObserver 首先，创建一个 Mutati 阅读全文

posted @ 2024-11-27 22:25 joken1310 阅读(462) 评论(0) 推荐(0)

前端html img 请求的时候header请求头带token实现参考

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width 阅读全文

posted @ 2024-11-27 22:19 joken1310 阅读(548) 评论(0) 推荐(0)

前端Shadow DOM 使用，Shadow DOM教程，Shadow DOM 作用

摘要： Shadow DOM 是 Web Components 的一部分，允许开发者将一个元素的内部结构和样式封装在一个独立的 DOM 中，从而避免与外部页面的其他样式和脚本发生冲突。以下是 Shadow DOM 的基本概念和用法： 1. 基础概念封装性：Shadow DOM 提供了样式和内容的封装，只有阅读全文

posted @ 2024-11-27 22:09 joken1310 阅读(596) 评论(0) 推荐(0)

前端html自定义元素,拓展元素

摘要：拓展基础元素功能用法 is使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="wi 阅读全文

posted @ 2024-11-27 22:07 joken1310 阅读(74) 评论(0) 推荐(0)

vue3 useRouter可以在hook函数中使用测试

摘要：测试代码 index.vue <template> <div class='box'> demo </div> </template> <script lang='ts' setup> import { ref, reactive, computed, onMounted, nextTick, Pr 阅读全文

posted @ 2024-11-21 20:59 joken1310 阅读(69) 评论(0) 推荐(0)

joken-前端工程师