Posts

技术博客，记录前端开发、JavaScript、Vue、React、Node.js等技术学习笔记和工作经验分享

windows

Windows 命令行密码重置

window11登录密码重置 🔗重启 🔗登录界面按住ctrl键，并点击重启按钮 重启后进入工程模式，找到命令行选项 复制命令行 🔗命令行中输入以下2个

密码重置
阅读全文
200 字
typescript

typescript 注解解读1

源注解代码 🔗 1 2 3 4 5 6 7 8 9 { readonly [K in keyof Defaults as K extends keyof T ? K : never]-?: K extends keyof T ? Defaults[K] extends undefined ? IfAny<Defaults[K], NotUndefined<T[K]>, T[K]> : NotUndefined<T[K]> : never } 解读 🔗 索引签名和可选性: readonly [K in keyof Defaults as ...] -?: readonly: 表示

typescript
阅读全文
700 字
shell

sshpass 使用

sshpass 使用 🔗在提供的文档中，提到了使用 sshpass 来实现自动化部署。sshpass 是一个非交互式 SSH 密码认证工具，它允许你通过命令行传递密码，从而实现自动化

sshpass shell
阅读全文
700 字
js

why-is-node-running

why-is-node-running 为什么一个Node.js进程没有退出 🔗why-is-node-running (Github) 用于诊断为什么一个Node.js进程没有退出。当你运行一个N

node
阅读全文
1000 字
js

webgl笔记

webgl 笔记 🔗 img 概念 🔗图形装配过程 🔗将孤立的顶点坐标装配成几何图形。几何图形由gl.drawArrays()函数的第一个参数觉得 光栅化 🔗几何图形转

webgl
阅读全文
1000 字
js

SharedArrayBuffer is not defined

SharedArrayBuffer is not defined 如何解决 🔗SharedArrayBuffer 是一种 JavaScript 对象，用于在多线程环境中共享内存。然而，由于共享内存的特性，它可能导致安全漏洞。

js
阅读全文
300 字
blender

blender 常用快捷键

blender 常用快捷键 🔗 快捷键 操作 A 全选 AA 取消全选（按两次 A） Shift +D 复制 G 移动 S 缩放 R 旋转 x 删除 shift + A 添加模型 Tab 编辑 / 物体 alt + z 透视显示 ctrl + I 反选 / 隔离

blender
阅读全文
200 字
vue

vue -- v3.4commit提交记录2

vue – v3.4commit提交记录2 🔗From 2024-02 修复hydrant过程中css 绑定变量时的报错 image.png 支持slot中简写语法 1 <slot :name /> image.png 修复compu

vue3 v3.4
阅读全文
200 字
vue

vue2 升级vue3报错问题整理

vue2 升级 vue3 报错问题整理 🔗vite 路径别名 🔗 1 2 3 4 5 6 7 8 9 10 11 resolve: { // https://cn.vitejs.dev/config/#resolve-alias alias: { // 设置路径 '~': path.resolve(__dirname, './'), // 设置别名 '@': path.resolve(__dirname, './src') }, // https://cn.vitejs.dev/config/#resolve-extensions extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'] }, Catch all routes (“

vue3
阅读全文
300 字
GLSL

着色器

着色器 🔗顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）是现代图形渲染管线中的关键组成部分，尤其是在Ope

threejs glsl
阅读全文
900 字
js

expressjs 源码

expressjs 源码 🔗createApplication 🔗暴露应用逻辑 1 exports = module.exports = createApplication; express.js创建应用主体逻辑 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

expressjs
阅读全文
1300 字
threejs

threejs 笔记

162 → r163 🔗 WebGLRenderer不再支持WebGL 1。您必须将应用程序迁移到WebGL 2，以便更新到新版本的three.js。 出于性能原因

threejs
阅读全文
2400 字
js

element input数字格式化

element input数字格式化 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 formatNumber: (value, decimals = 0, max) => { let v = String(value); let reg = new RegExp(`[^\\d${decimals > 0 ? "." : ""}]`, "g"); v = v .replace(reg, "") .replace(/^0+(\d)/, "$1") // 第一位0

阅读全文
200 字
threejs

threejs 笔记

threejs 笔记 🔗 🔗 1 2 THREE.Math.DEG2RAD = 0.017453292519943295 = Math.PI / 180; THREE.Math.RAD2DEG = 57.29577951308232 = 180 / Math.PI;

threejs
阅读全文
100 字
python

python issues

python 使用笔记 🔗国内源 🔗 1 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple --upgrade pip windows初始化虚拟环境 🔗 1 python -m venv venv Could not install packages due to an EnvironmentError: [WinError 5] Access is denied: 🔗pip安装包没有权限 1 pip install -r requirements.txt --upgrade --force-reinstall --user Can

python issues
阅读全文
200 字
js

three 拼接货架

three 拼接货架 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

three demo
阅读全文
500 字
js

WebAudio笔记

WebAudio 笔记 🔗MediaElementAudioSourceNode 🔗用于传入媒体元素，可以通过代码调整媒体元素播放的参数，和audioCtx.c

webaudio
阅读全文
600 字
windows

Windows nginx重启bat脚本

Windows nginx重启bat脚本 🔗 1 2 3 4 5 6 7 8 9 10 11 @echo off taskkill /IM nginx.exe /F /T echo "The process nginx.exe has been terminated." pause start /d D:\soft\nginx-1.22.1\nginx-1.22.1 /b nginx.exe echo "Start nginx success"

bat nginx
阅读全文
100 字
js

URI malformed

url传参出现Uncaught URIError: URI malformed 🔗url加密传参有时候会出现Uncaught URIError: URI malformed的错误，这是因为你的url中包含了“%

decodeURIComponent
阅读全文
300 字
ruby

ruby 安装和升级

ruby 安装和升级 🔗 1 2 brew install ruby 由于macos本身自带了ruby但是版本比较低 这里我们不删除自带版本，重新安装一个新的 1 vim .bash_profile 1 2 3 4 export PATH="/usr/local/opt/ruby/bin:$PATH" export LDFLAGS="-L/usr/local/opt/ruby/lib" export CPPFLAGS="-I/usr/local/opt/ruby/include" export PKG_CONFIG_PATH="/usr/local/opt/ruby/lib/pkgconfig"

ruby
阅读全文
100 字
vue

element-plus 老版本cascader使用卡死问题

element-plus 老版本cascader使用卡死 🔗重写Cascader组件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import { defineComponent, onMounted, onBeforeMount } from "vue" import { ElCascader } from "element-plus"; function cascaderVisable() {

element-plus
阅读全文
200 字
js

前端memo的实现

前端memo的实现 🔗memo是react中的缓存实现 当memo中有一个依赖发生更新时，就会调用回调函数 memo这里用一个闭包进行实现 主函数体

memo
阅读全文
300 字
linux

linux 优化脚本

linux 优化脚本 🔗删除所有node_nodules 🔗 1 find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +

阅读全文
100 字
typescript

typescript 装饰器

typescript 装饰器 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 declare type MethodDecorator = <T>( target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T> ) => TypedPropertyDescriptor<T> | void type VoidFn = ((...args: any[]) => void) | ((...args: any[]) => Promise<void>) export const Performance =

typescript
阅读全文
200 字
js

microbundle 源码

microbundle 源码 🔗microbundle 是一个零配置的js打包器，基于rollup进行的开发 不需要任何配置文件就可以打包出常用的commonjs, umd, e

microbundle rollup
阅读全文
600 字
windows wsl

WSL2问题解决WslRegisterDistribution failed with error: 0x800701bc

WSL2问题解决WslRegisterDistribution failed with error: 0x800701bc 🔗 开启 1 Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux 安装最新的wsl2 linux 内核 https://learn.microsoft.com/zh-cn/windows/wsl/install-manual#step-4—download-the-linux-kernel-update-package

wsl
阅读全文
100 字
linux

SSH connection failed: connect ECONNREFUSED

Shell登录报 SSH connection failed: connect ECONNREFUSED 🔗通过VNC登录云服务器实例 🔗找到登录入口 image.png 找到vnc登录入口 image.png 查看sshd服务状态 🔗 1 netstat -tnlp | grep sshd 如果服务未启动 1

linux
阅读全文
200 字
js

请求中获取浏览器推荐语言

请求中获取浏览器推荐语言 🔗 1 2 3 4 5 6 7 8 9 10 11 12 let languages: string[] | undefined // get locale from cookie const localeCookie = request.cookies.get('locale') languages = localeCookie?.value ? [localeCookie.value] : [] if (!languages.length) { // Negotiator expects plain object so we need to transform headers const negotiatorHeaders: Record<string, string> = {} request.headers.forEach((value, key) => (negotiatorHeaders[key]

js events
阅读全文
100 字
flutter

flutter 生命周期

flutter 生命周期 🔗 createState(): When the Framework is instructed to build a StatefulWidget, it immediately calls createState() mounted is true: When createState creates your state class, a buildContext is assigned to that state. buildContext is, overly simplified, the place in the widget tree in which this widget is placed. Here’s a longer explanation. All widgets have a bool this.mounted property. It is turned true when the buildContext

flutter
阅读全文
400 字
数据结构

双向链表

双向链表 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

js doubly linkedList
阅读全文
300 字
数据结构

堆和栈

堆和栈 🔗Queue 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import LinkedList from "./LinkedList"; class Queue { constructor() { this.linkedList = new LinkedList(); } isEmpty() { return !this.linkedList.head; } peek() { if (this.isEmpty()) return null; return this.linkedList.head.value; } enqueue(value) { this.linkedList.prepend(value); } dequeue() { return this.linkedList.deleteHead();

js queue & stack
阅读全文
200 字
js

EventSource

Eventsource单向服务端推送 🔗单向服务端推送 服务端部分 🔗服务端需要设置返回头 1 "Content-Type": "text/event-stream" 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

eventsource 服务端推送
阅读全文
300 字
数据结构

单向链表

链表 🔗链表是一种物理储存上非联系，数据元素的逻辑顺序通过链表中的指针链接次序，实现的一种线性储存结构。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

js linkedList
阅读全文
500 字
js

简易的事件监听EventBus

简易的事件监听 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const createEvent = () => ({ events: {} as any, on(eventName: string, callback: Function) { this.events[eventName]?.push(callback) || (this.events[eventName] = [callback]); return () => { this.events[eventName] = this.events[eventName].filter( (e: any) => e !== callback ); }; }, emit(eventName: string, ...args: any[]) { const callbacks = this.events[eventName];

js events
阅读全文
100 字
git

fork的仓库更新分支

fork 的仓库在源仓库新增分支后更新 fork 仓库的分支 🔗1. 本地新增源仓库的远程地址 🔗 1 git remote add up xxxxxxx 2. 更新本地分支 🔗 1 git fetch up 分支名:分支名 3. 更新 fork repo 远程分

github branch
阅读全文
200 字
react

forwardRef 定义的组件添加静态属性

forwardRef 定义的组件添加静态属性 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 import React, { ReactNode, RefAttributes, ForwardRefExoticComponent } from 'react'; interface ModalProps { title: ReactNode; } interface ModalStaticProps { show(): void; hide(): void; } const STATIC_PROPS:

forwardRef typescript define
阅读全文
200 字

js 获取滚动元素

js 获取滚动父元素 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const isScrollable = function (ele) { const hasScrollableContent = ele.scrollHeight > ele.clientHeight; const overflowYStyle = window.getComputedStyle(ele).overflowY; const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1; return hasScrollableContent && !isOverflowHidden; }; const getScrollableParent = function (ele) { return !ele || ele === document.body ? document.body : isScrollable(ele) ? ele

JS
阅读全文
100 字

canvas requestAnimationFrame画一个clock

canvas requestAnimationFrame 画一个 clock 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var h1 = document.getElementsByTagName("h1")[0]; var canvas = document.getElementById("canvas"); var ctx

JS canvas
阅读全文
300 字
js

mousedown event中保持input的focus状态

mousedown event中保持input的focus状态 🔗一定要使用e.preventDefault去除默认失去焦点行为 1 2 3 <input> <button>CLICK</button> <button>MOUSEUP</button> <button>MOUSEDOWN</button> <button>MOUSEDOWN 2</button> 1 2 3 4 5 6 7

js
阅读全文
200 字
h5

IOS端h5 fixed滚动问题

IOS端h5 fixed滚动问题 🔗 1 2 3 4 5 6 visualViewport.addEventListener("resize", resizeHandler); const resizeHandler = () => { // ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 需要针对 iOS 越界弹性滚动的情况进行边界检查 styles.left =

ios-fixed
阅读全文
200 字
vue

vue -- compile结果代码解读

vue – compile结果代码解读 🔗vue中对于sfc文件最终的编译结果，可以在playground中看到 源码 1 2 3 4 5 6 7 8 9 10 11 <script setup> import { ref }

vue3 sfc
阅读全文
1900 字
vue

vue -- transformElement源码

vue transformElement 🔗transformElement 🔗 1 2 3 4 5 6 export const transformElement: NodeTransform = (node, context) => { return function postTransformElement() { // ... // 主函数，返回一个闭包函数 } } resolveComponentType 🔗动态组件 🔗 1 const isProp = findProp(node, 'is') 并

vue3 transformElement @vue/compiler-core
阅读全文
1800 字
浏览器

浏览器工作原理

浏览器工作原理 🔗Web 性能包含了服务器请求和响应、加载、执行脚本、渲染、布局和绘制每个像素到屏幕上。 地址栏输入一个 URL 🔗 DNS服务器查询对应I

工作原理
阅读全文
700 字
js

对比2个版本号的方法

对比2个版本号的方法 🔗semver 🔗使用第三方库semver 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $ npm install semver var semver = require('semver'); semver.diff('3.4.5', '4.3.7') //'major' semver.diff('3.4.5', '3.3.7') //'minor' semver.gte('3.4.8', '3.4.7') //true semver.ltr('3.4.8', '3.4.7') //false semver.valid('1.2.3')

semver 版本号
阅读全文
400 字
vite

vite 向entry html中注入代码

vite 向html中注入代码 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { name: 'bundle-time', // 打包时添加打包时间 apply: 'build', enforce: 'post', transformIndexHtml: () => { return [ { tag: 'script', children: `console.info("bundle time: %s", '${new Date().toLocaleString()}')`, injectTo: 'body' } ] } }

vite
阅读全文
100 字
小程序

小程序 -- 内部使用webview绑定微信公众号openId

小程序 – 内部使用webview绑定微信公众号openId 🔗小程序内部 🔗 1 2 3 4 5 6 7 <template> <web-view :src="url"></web-view> </template> <script setup> // 最后路径 const url = computed(() => `${baseURL}/chat-list?token=${userStore.switchToken}&officialIsBind=${official.value}&schema=${userStore.schema}&userInfo=${JSON.stringify(userStore.wxUserInfo)}`) </script> h5内部 🔗 1 2 3 4 5

小程序 openId
阅读全文
300 字

github coding同步action

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 name: Sync Repo to CODING on: push: schedule: # 每天北京时间0点同步 - cron: "0 16 * * *" jobs: build: runs-on: ubuntu-latest steps: - name: Sync Repo to CODING uses: serverlesslife-cn/sync-repo-to-coding@master env: SSH_PRIVATE_KEY: ${{ secrets.CODING_PRIVATE_KEY }} with: # 注意替换

github action
阅读全文
100 字
js

常用工具函数整理

常用工具函数整理 🔗是否是iE11 🔗 1 2 // 判断是否是iE11 const isIE11 = typeof navigator !== 'undefined' && navigator.userAgent.indexOf('Trident') !== -1; 浏览器类型 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

工具函数
阅读全文
600 字

Benchmark.js 使用

Benchmark.js 🔗安装 🔗 npm install benchmark 使用 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 var Benchmark = require("benchmark"); var suite = Benchmark.Suite("string"); suite .add("String#regexp", function () { /o/.test("Hello World!"); }) .add("String#indexOf", function () { "Hello World!".indexOf("o") > -1; }) .add("String#lastIndexOf", function () { "Hello World!".lastIndexOf("o") > -1; }) .add("String#startsWith",

Benchmark
阅读全文
200 字
import-html-entry

import-html-entry 笔记

import-html-entry 源码解读 🔗importHTML函数 🔗输入2个参数 url： 请求路径url，可以是远程路径 opts: 用户配置，可以定义用户请求的fetch函数等. 根据

阅读全文
900 字
import-html-entry

import-html-entry js沙箱实现源码

import-html-entry js沙箱实现 🔗getExecutableScript函数 🔗 scriptText: 读取js文件的内容 sourceUrl：用作sourcemap的指引 1 2 3 4 5 ;(function(window,

阅读全文
500 字
axios

axios core源码

axios 核心源码 🔗 v1.3.4 lib/core/Axios.js Class Axios 🔗constructor构造函数 🔗 1 2 3 4 5 6 7 8 9 10 11 class Axios { constructor(instanceConfig) { this.defaults = instanceConfig; this.interceptors = { request: new InterceptorManager(), response: new InterceptorManager() }; } // .... } axios在构造函数

axios
阅读全文
2100 字
jenkins

jenkins 配置模板代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 def pkgName = "pkgname" node {

jenkins linux
阅读全文
400 字
小程序

小程序开发问题整理

真机调试时： Error: accessSync:fail no such file or directory 🔗错误信息 1 2 WAServiceMainContext.js:1 [wxapplib]] [LogManagerwx8dd7a55700341e77]] accessSync fail accessSync:fail no such file or directory, access '/storage/emulated/0/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/da9ba93e6b42cc751892e59f5f751b15/miniprogramLog/log2' Error: accessSync:fail no such file or directory, access '/storage/emulated/0/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/da9ba93e6b42cc751892e59f5f751b15/miniprogramLog/log2' 切换到真机调试1.0进行调试，2.0好像还是有些bug r

小程序
阅读全文
400 字
vite

vite 代理中更改请求头问题

vite配置代理中变更请求头 🔗平时我们在对接接口时，我们都是配置代理解决跨域问题 1 2 3 4 5 6 7 proxy: { '^/api': { target: envConfig.VITE_APP_BASE_URL, changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), } } 某天你明明配置好

vite
阅读全文
900 字

Async.js

each 🔗数组循环调用iterator方法进行处理 _each方法对数组进行遍历， 内部使用iterator进行调用 only_once方法保证函数只会

阅读全文
200 字
flutter

flutter 问题整理

Undefined name ‘OutlineButton’. 🔗使用TextButton代替 Try adding either an explicit non-’null’ default value or the ‘required’ modifier. 🔗空安全报错，一旦sdk升级到2.12以上之后，那么就会执行空安全检查 添加关键字

阅读全文
800 字
js

比较两个数组的不同项

比较两个数组的不同项 🔗如何比较两个数组的不同项，并且取出组成一个新的数组 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function diffArray(one, two) { if

js
阅读全文
200 字
源码

ms源码解析

ms源码 🔗ms是一个用于毫秒时间格式化的工具，可以在语义化的时间格式和毫秒之间进行转换。 源码地址 🔗vercel/ms: Tiny millisecond conversion utility (github.com) Usage 🔗语义化时

源码 ms
阅读全文
900 字
浏览器

浏览器同源策略

浏览器同源策略（Same-origin policy） 🔗同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。 同源包括三个部分 protocol 协

同源策略
阅读全文
700 字

前端缓存笔记

缓存分类 🔗 image.png HTTP缓存 🔗Expires 🔗缓存的绝对过期时间，此时间之后缓存都会失效 Expires过期时间会受到客户端时间影响变得不精准 Cache-Control 🔗

前端缓存
阅读全文
2000 字
webpack

webpack5 schema-utils

schema-utils 🔗webpack中工具类schema-utils 🔗 yarn add -D schema-utils webpack中调用 schema-utils 校验配置对象 1 2 3 4 5 6 7 8 9 10 11 // options.json { "type": "object", "properties": { "name": { "type": "boolean" }

webpack5
阅读全文
600 字
typescript

typescript 学习笔记

模式提取 🔗推导值类型 🔗 1 2 3 type p = Promise<"hello">; type MyGetValueResult<P> = P extends Promise<infer S> ? S : never; type pr = MyGetValueResult<p>; 推导数组元素 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 // First type f = [1, 2, 3]; type MyGetFirst<P extends unknown[]> = P extends [infer F,

typescript
阅读全文
2400 字
js

esbuild api整理

esbuild 🔗基础api 🔗 option 类型 默认值 说明 bundle boolean false 把从入口开始的文件打包成一个bundle，设为true时，会把文件引用的其他文件也打包进来，默认为fa

esbuild vite
阅读全文
1600 字
vue

Vue 自定义指令的执行机制

Vue 自定义指令的执行机制 🔗 version: 2.6.14 前情提要 🔗某日，业务需要我需要在按钮点击之前验证某些条件，如果不符合即不执行click内的业务代码。思前想后，写

vue2
阅读全文
1400 字

linux 问题整理

rpmdb open failed 🔗 1 2 3 4 5 6 7 8 [root@VM-0-6-centos ~]# yum -y remove git error: rpmdb: BDB0113 Thread/process 423/140056922314816 failed: BDB1507 Thread died in Berkeley DB library error: db5 error(-30973) from dbenv->failchk: BDB0087 DB_RUNRECOVERY: Fatal error, run database recovery error: cannot open Packages index using db5 - (-30973) error: cannot open Packages database in /var/lib/rpm CRITICAL:yum.main: Error: rpmdb open failed 方案 1 2 [root@VM-0-6-centos ~]#

阅读全文
300 字
webpack

webpack5学习笔记

webpack5学习笔记 🔗配置 🔗webpack.config.js 返回单个对象：最简单的配置 返回数组：每个数组项都会是一个完整的配置对象，都

webpack5
阅读全文
2300 字
vue

elementui form多表单验证

多表单验证 🔗页面中存在多个表单验证时，要验证多个表单是否完整就比较费劲 平时业务中验证都是这样的回调形式 1 2 3 this.$refs.form1.validate((valid) => { // .... }); 重新写个高阶函数 1 2

elementui
阅读全文
200 字
webpack

Webpack5 -- Assest Module

Webpack5 – Assest Module 🔗Assest Module是webpack中加载静态资源的模块，webpack实现一个打包器就是可以把在js中引用的任何资源进行打包

阅读全文
900 字
vue

vue -- 实现MenuTree组件

vue – 实现MenuTree组件 🔗样例 🔗 image.png 具体实现 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

阅读全文
1400 字
vue

Vue -- VFor的编译处理

vue – VFor的编译处理 🔗 “version”: “3.2.37” createStructuralDirectiveTransform 🔗通用函数， 根据模板创建指令数据，匹配对应的名字或者正则 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

vue3
阅读全文
700 字

排序算法

排序算法样板代码 🔗冒泡排序 🔗typescript 🔗 1 2 3 4 5 6 7 8 9 10 11 function bubble_sort(arr: number[] = []): void { for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { if (arr[i] > arr[j]) {

排序
阅读全文
200 字
npm

yarn 问题搜集

yarn install 报错： [ERR_STREAM_PREMATURE_CLOSE]: Premature close 🔗 1 2 3 4 5 6 ➤ YN0001: │ Error [ERR_STREAM_PREMATURE_CLOSE]: Premature close at new NodeError (node:internal/errors:371:5) at PassThrough.onclose (node:internal/streams/end-of-stream:136:30) at PassThrough.emit (node:events:526:28) at emitCloseNT (node:internal/streams/destroy:145:10) at processTicksAndRejections (node:internal/process/task_queues:82:21) 方案 it has been fixed in latest yarn, so please upgrade: yarn set version latest. As v17 is not a lts, please use node v16/v14 in production (node:latest => node:lts).

yarn issues
阅读全文
100 字

c++笔记

using和namespace都是C++中的关键字。std是标准库所驻之命名空间（namespace）的名称。 指针 🔗*: 定义指针变量 &

阅读全文
300 字
webpack

webpack 模块加载原理(二)

webpack模块加载原理(二) 🔗异步加载原理 🔗示例 🔗入口文件中改变引用后执行方式 1 2 3 4 5 // index.js import("./foo").then((foo) => { foo.bar(); foo.foo(); }); 打开浏览器引用bundle.js

webpack模块加载
阅读全文
2400 字
js

Zero Width Characters

零宽字符 🔗所谓零宽字符，就是不可见的「非打印」字符，通过视觉无法看出字符串中是否有零宽字符，但是通过代码遍历，是可以获取到该字符的。 零宽字符

零宽字符
阅读全文
400 字
slate

slate.js API整理

slate.js 🔗 version : v0.47 Nodes 🔗nodes是整个最重要的类型 Editor根节点包含了整个文档树的内容 Element节点包含当前区域的语义化含义 文本Text节点

editor slate
阅读全文
800 字
slate

slate.js 富文本编辑器

slate.js 🔗 v0.47 slate是开源社区最新出的一个比较火的可定制化的富文本编辑器 https://github.com/ianstormtaylor/slate slate 是一个底层核心库，如果要使用，还需要配合slate-react等进行

editor slate
阅读全文
800 字
rollup

Rollup -- javascript模块打包器整理

rollup 🔗Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码 1 npm install --global rollup Tree-shaking 🔗在项目中使用es modules时，rollup会静态分析

阅读全文
1800 字
linux

linux 下常用命令行

linux 下常用命令行 🔗 id 查看当前登陆用户的相关信息 groups 当前用户的组 who 当前登陆账户 1 2 3 4 [root@VM-0-6-centos node-api]# id uid=0(root) gid=0(root) groups=0(root) [root@VM-0-6-centos node-api]# groups root 账户密码 🔗 1 2 3 4 5 6 [root@VM-0-6-centos node-api]# cat /etc/passwd root:x:0:0:root:/root:/bin/bash bin:x:1:1:bin:/bin:/sbin/nologin daemon:x:2:2:daemon:/sbin:/sbin/nologin adm:x:3:4:adm:/var/adm:/sbin/nologin lp:x:4:7:lp:/var/spool/lpd:/sbin/nologin

linux
阅读全文
2600 字
vue

Vue -- codegen源码

vue3 codegen代码生成 🔗版本 “version”: “3.2.37” 源码地址 packages\compiler-core\src\codegen.ts vue的template在前面经过parse之后会生成一个ast树形对象，但是对象本身也是没有办

vue3 @vue/compiler-sfc
阅读全文
3000 字
js

HTML -- Element元素滚动

判断元素是否可以滚动 🔗通过设置元素的scrollTop后再查看是否变化 🔗 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function eleCanScroll(ele) { if (!ele instanceof HTMLElement) { console.log("fuck off"); return; } if (ele.scrollTop > 0) { return

元素滚动
阅读全文
300 字
shell

shell教程

shell笔记 🔗 单引号变量，不识别特殊语法 双引号变量，可以识别特殊语法 每次调用bash/sh解释器执行脚本，都会开启一个子shell，因此不

shell
阅读全文
1900 字

shell脚本书写规则

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 #!/usr/bin/bash dirs=("ba" "crew" "file" "knowledge" "main" "oils" "system" "voyageno" "certificate") function toggleRef() { for dir in ${dirs[@]} do cd "./packages/shoreside-${dir}" # if ( $1 ) # then

shell
阅读全文
200 字
regex

正则表达式

正则表达式 🔗 特殊字符 正则表达式 记忆方式 换行符 \n new line 换页符 \f form feed 回车符 \r return 空白符 \s space 制表符 \t tab 垂直制表符 \v vertical tab 回退符 [\b] backspace,之所

regex
阅读全文
1700 字
vue

vue3 -- @vue/compiler-sfc 工具源码解读

@vue/compiler-sfc 🔗 “version”: “3.2.37” parse 源码 🔗接收2个参数 source: 传入的模版文件的内容 option: 解析配置 1 2 3 4 5 6 7 8 9 10 11 12 13 export function parse( source: string, { sourceMap = true, filename = DEFAULT_FILENAME, sourceRoot = '', pad = false, ignoreEmpty = true, compiler = CompilerDOM }: SFCParseOptions =

vue3 @vue/compiler-sfc
阅读全文
1800 字

TCP/IP学习笔记

TCP/IP 🔗TCP（传输控制协议）和IP（网际协议 是最先定义的两个核心协议，所以才统称为TCP/IP协议族 应用层 🔗 HTTP 万维网 FTP 文件传输服务 SMTP 电子邮件服

tcp ip
阅读全文
900 字

JSON.stringify方法

JSON.parse 🔗 1 JSON.parse(text[, reviver]) reviver 🔗转换器，如果传入该参数 (函数)，可以用来修改解析生成的原始值，调用时机在 parse 函数返回之前。 解析值本身以及它所包含的所有属性，会按

JSON.stringify
阅读全文
500 字
vue

vue -- 内置指令源码分析

vue内置指令 🔗 “version”: “3.2.37” vue因为在核心中内置了一些指令，开箱即用就非常nice v-model 🔗vue中最具特色的指令就是v-mode了，可以把input的

vue3
阅读全文
2700 字
vue

vue -- cssVars css绑定变量

Vue3 cssVars 🔗 “version”: “3.2.37” vue3中单文件SFC有个新特性，就是在css里可以使用变量了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <div> <h1>123</h1> </div> </template> <script lang='ts' setup> const color = 'red' </script> <style scoped> h1 { color: v-bind(color)

vue3
阅读全文
2000 字
webrtc

webrtc 相关概念

webRTC传输技术 🔗 040fd1c2f7955b86ce561e22ef9317ab.jpg RTP 🔗RTP（Real-time Transport Protocol，实时传输协议）通过IP网络实时传输音频和视频。RTP常用于流媒体服

阅读全文
800 字
vite

vite -- 客户端错误弹窗展示

Vite client overlay 🔗利用Custom Component中的自定义组件，封装了一个自定义的web 标签 1 2 3 4 export const overlayId = 'vite-error-overlay' if (customElements && !customElements.get(overlayId)) { customElements.define(overlayId, ErrorOverlay) } 实例化方法 🔗 1 2 3 4

vite client
阅读全文
500 字
Jenkins

jenkins docker安装说明

安装 🔗以docker部署jenkins为例 拉取镜像 1 docker pull jenkinsci/blueocean 运行 1 2 3 4 5 6 7 docker run \ -u root \ --name jenkins -p 8080:8080 \ -v /data/jenkins-data:/var/jenkins_home \ -v /var/run/docker.sock:/var/run/docker.sock \ jenkinsci/blueocean 把8080端口映射到宿主80

阅读全文
400 字
Jenkins

jenkinsfile 配置说明

agent 🔗运行环境，每个pipeline都需要定义运行环境 在执行引擎中，agent 指令会引起以下操作的执行： 所有在块block中的步骤steps会

阅读全文
1100 字

windows下docker运行jenkins

windows下docker运行jenkins 🔗image 🔗 docker pull jenkinsci/blueocean run 🔗 docker run –name jenkinsci-blueocean -u root –rm -d -p 7005:8080 -p 50000:50000 -v D:\workspace\jenkinsData:/var/jenkins_home jenkinsci/blueocean

阅读全文
100 字
vite

vite Client客户端源码

vite Client客户端源码 🔗vite 客户端使用来响应服务端文件改动， 最终客户端的代码通过注入的方向，注入到index.html中，实现热更新功

vite client
阅读全文
1300 字
vite

vite -- 从0阅读vite之1

从0阅读vite 🔗commit1 🔗vite项目的第一个提交，只有6个文件有代码，真实代码不会超过1000行，所以说真的是又个好的想法，尽管去

vite plugin
阅读全文
1000 字
vite

vite--hmr热更新源码解读

vite hmr热更新源码 🔗vite中在文件发生改动时，server端会监听文件的变化，当文件发生变化会通知客户端重新发起请求，重新渲染页面 源码位置

hmr
阅读全文
900 字
vite

vite中env环境变量使用

vite中env环境变量使用 🔗 “version”: “3.0.0-alpha.9” vite中可以通过loadEnv函数去读取指定环境变量文件，可以方便在vite配置文件中动态的导入到配置中

vite env
阅读全文
600 字
vite

vite 中websocket使用

vite 中有关 websocket 的使用 🔗封装 🔗项目是基于第三方npm包 ws, 这个包是为服务端使用websocket而设计的，并不适用浏览器中，项目地址 https://github.com/websockets/ws 项目中文件路径

websocket
阅读全文
1200 字
tools

mp3 数据结构

mp3数据结构 🔗MP3文件大体上分为三个部分：ID3V2 + 音频数据 + ID3V1 image.png id3v1 🔗id3v1固定128个byte，以tag字符开头 id3v2 🔗 1 2 3 4 5 6

mp3
阅读全文
500 字
tools

Caddy

caddy 🔗是一个类似于nginx的web服务器，只不过是用Go写的，在配置上，要比nginx配置更简单，配置文件使用caddyfile， 默认开箱就

阅读全文
1100 字
vite

vite -- 打开浏览器原理

vite – open browser 🔗 “version”: “3.0.0-alpha.9” open 🔗open是一个第三方开发的开源库，用于在命令行打开浏览器，本身已经对各个平台的的代码做了兼融，知识对外部暴露了api 使用方

vite open browser
阅读全文
200 字
react

React ForwardRef用法

ForwardRef 🔗forwardRef 🔗ref 🔗 Ref挂载到DOM元素上时，就是对DOM元素本身的使用 Ref挂载到Class组件的时候，就是class组件

react
阅读全文
600 字
vite

源码解析

vite 🔗resolveConfig 🔗 找到vite对应的config文件，并且判断config文件类型，是否是ts文件还是mjs文件 通过esbui

vite
阅读全文
200 字

elementui Tab样式改造

对于ElementUI样式进行改造 image.png 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 .#{$prefix}-field-drawer

elementui
阅读全文
200 字
webpack

webpack 代码分片

webpack CommonsChunkPlugin 🔗代码分片是webpack中重要的优化手段，对于一个比较大的chunk，有必要提取出当前chunk中依赖的不经常变化的库 usage 🔗 1 new webpack.optimize.CommonsChunkPlugin() 配置项

webpack
阅读全文
300 字

React Usage Issue

not assignable to type LegacyRef<xxxxx> 🔗useRef定义一个ref时，报不能推断类型 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import React, { useRef, RefObject } from 'react'; function Test() { const node = useRef<HTMLElement>(null); if ( node && node.current && node.current.contains() ){ console.log("current accessed")} return <div ref={

阅读全文
400 字
react

React Ref and CreateRef

useRef vs createRef 🔗 组件每次渲染都会执行createRef生成一个ref对象 useRef在第一次渲染后创建一个ref对象, 重新渲染后如果发现已经创建就不

react
阅读全文
300 字
typescript

typescript 泛型类型

Partial 🔗可选类型, 把原本必选的参数都改成可选参数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 interface Crew { age: number; name: string; } const Jerry:Crew = { age: 10, name: 'jack' }; type AnonymousPeople = Partial<Crew>; const tom: AnonymousPeople = { name: 'Tom' }; keyof 🔗ke

typescript
阅读全文
1000 字
vite

vite--server对应源码

vite server 🔗 3.0.0 源码位置 🔗packages/vite/src/node/server/index.ts createServer 🔗步骤 解析配置文件 1 const config = await resolveConfig(inlineConfig, 'serve', 'development') 创建中间件

vite websockt
阅读全文
700 字
vite

Vite Websocket源码

Vite – websocket相关源码 🔗 2.9.8 packages/vite/src/node/server/ws.ts createWebSocketServer 🔗源码通过在函数内实例化ws，返回一个对象函数，充分利用js闭包的属性 1 2 3 4 5 6 7 8 9 function createWebSocketServer() { // .... source code

vite websocket
阅读全文
700 字

react 使用方法

Hooks 🔗1. forceUpdate 🔗 1 2 const [state, updateState] = React.useState(); const forceUpdate = React.useCallback(() => updateState({}), []); Class Componet 🔗1.forceUpdate 🔗 1 this.forceUpdate();

阅读全文
100 字
react

create-react-app 使用中相关问题整理

1.test添加代码覆盖率 🔗命令修改为 1 react-scripts test --coverage --watchAll=false package.json 1 2 3 4 5 6 7 8 9 10 11 12 "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx,ts,tsx}", "!<rootDir>/node_modules/" ], "coverageThreshold": { "global": { "lines": 90, "statements": 90 } } }

阅读全文
100 字
react

React Rerender重绘原理

react rerender原理 🔗react中组件重绘是一个不可避免的问题，因为react中组件的更新方式就是旧组件销毁，新组件替代旧组件的形式。而且

阅读全文
900 字

js Event Loop 事件循环执行机制

Javascript engine list 🔗v8引擎高效原因 V8 — open source, developed by Google, written in C++ Rhino — managed by the Mozilla Foundation, open source, developed entirely in Java SpiderMonkey — the first JavaScript engine, which back in the days powered Netscape Navigator, and today powers Firefox JavaScriptCore — open source, marketed as Nitro and developed by Apple for Safari KJS — KD

阅读全文
1500 字
webpack

webpack 打包原理

webpack 🔗知识点 🔗 通过入口文件循环遍历每个模块，把对应的模块交给对应的loader去处理, 所以webpack建议把你开发应用所有需要的资源都通过j

阅读全文
400 字

go Frp 工具使用

frp使用 🔗frp是golang开发的内网穿透工具，日常我们本地的服务由于公网ip不固定，外网无法访问，有了内网穿透工具，就可以很轻松的把我

工具 go
阅读全文
600 字

Lerna 包管理器命令行

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $ npm install lerna -g $ mkdir lerna-demo $ cd lerna-demo && lerna init --independent # 用的默认的固定模式，vue babel等都是这个 $ cd packages $ mkdir moduleA && mkdir moduleB ... #分别进入三个

js nodejs
阅读全文
500 字

Classnames库代码解读

classnames库是日常工作中用来操作dom中class相关的工具函数，这里我们对它进行解读 使用 npm install classnames –save 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

js
阅读全文
300 字

Lodash ToNumber

toNumber 🔗lodash中转数字函数 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

js
阅读全文
700 字

数字加减问题解决精度问题

1 2 3 4 5 6 7 8 9 10 11 function plus(num1, num2) { const num1Digits = (num1.toString().split('.')[1] || '').length; const num2Digits = (num2.toString().split('.')[1] || '').length; const baseNumber = Math.pow(10, Math.max(num1Digits, num2Digits)); return (num1 * baseNumber + num2 * baseNumber) / baseNumber; } function minus(num1, num2) { return plus(num1, -1 * num2); }

js
阅读全文
100 字

判断是不是DOM元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function isElement(obj: any) { try { // Using W3 DOM2 (works for FF, Opera and Chrome) return obj instanceof HTMLElement; } catch (e) { // Browsers not supporting W3 DOM2 don't have HTMLElement and // an exception is thrown and we end up here. Testing some // properties that all elements have (works on

js dom
阅读全文
100 字

Classname Operation

操作相关classname工具函数 1 2 3 4 5 6 7 8 9 10 11 // 增加目标class function addClass(target = '', srcCls = '') { const clss = target.split(/\s+/) return [...clss.filter(cls => !clss.includes(cls)), srcCls] } function removeClass(target = '', srcCls = '') { const clss = target.split(/\s+/) return [...clss.filter(cls

css js
阅读全文
100 字
js

事件总线EventBus

日常我们在vue开发的时候使用公共事件总线进行跨组建数据传递，这里我们自己封装一个事件总线，了解其背后的原理 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

js events
阅读全文
200 字
webpack

Webpack Loader Plugin

webpack Loaders and Plugins different 🔗Loaders: 🔗Loaders work at the individual file level during or before the bundle is generated. loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，

js webpack
阅读全文
500 字

防抖与节流

no-refresh-page 🔗 history.pushState( {}, null, this.$route.path + ‘#’ + encodeURIComponent(params) )

js
阅读全文
100 字

HTML Element API 用法

Element.append 🔗方法在 Element的最后一个子节点之后插入一组 Node 对象或 DOMString 对象。 被插入的 DOMString 对象等价为 Text 节点。 Element.append((Node or DOMString)… nodes); 示例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Element js
阅读全文
1000 字

常用判断函数

是否是promise 🔗 1 2 3 export function isPromise(object: any): object is Promise<any> { return Promise.resolve(object) === object; }

js
阅读全文
100 字

Linux 常用命令

查看端口占用 🔗 lsof -i tcp:80 所有端口 🔗 netstat -ntlp 查看端口进程 🔗 netstat -lnp|grep 端口号 netstat -anp|grep 端口号 Linux内核版本命令 🔗 cat /proc/version uname -a 查看Linux系统版本的命令 🔗 lsb_release -a cat /etc/redhat-release cat

linux
阅读全文
300 字
jenkins

jenkins忘记密码后重置或找回密码

Jenkins 忘记密码后重置或找回密码 🔗方法1 🔗找到jenkinshome目录中的config.xml把其中 1 <useSecurity>false</useSecurity> false 改为 true 家目录正常在 /var/lib/jenkins ~/.jenkins /var/jenkins_home 方法2 🔗输出的

jenkins linux
阅读全文
200 字

BaseFindIndex

baseFindIndex 🔗查找数组中的索引 1 2 3 4 5 6 7 8 9 10 11 function baseFindIndex(array, predicate, fromIndex, fromRight) { const { length } = array let index = fromIndex + (fromRight ? 1 : -1) while ((fromRight ? index-- : ++index < length)) { if (predicate(array[index], index, array)) { return index } } return -1 }

JS lodash
阅读全文
100 字

ArrayEach

ArrayEach实现循环 🔗用while中的break实现原来Array.prototype.forEach未实现的打断功能 1 2 3 4 5 6 7 8

JS lodash
阅读全文
200 字
git

git 使用方法

git使用手册 🔗track 🔗git branch --track master origin/main 等价于 git branch --set-upstream-to=origin/main master 其中--set-upstream-to 和 -u等价 git branch -u origin/main master 跟踪本地master分支到

git
阅读全文
400 字

git submodule 使用方法

submodule 🔗平时我们在管理项目的时候都是用git来进行管理，git管理很方便，但是一旦项目越来越大，单个git仓库管理起来就没有那么方便了 这个时候我

git
阅读全文
500 字