Hugo lovelt的搜索坑
lovelt主题的搜索，提供了Lunr.js 、algolia, 两个搜索引擎，但是都很麻烦。 首先lunr简单，但不支持中文检索，中文分词依赖库
2023年5月之前的blog存档
鼠标、键盘事件
由于开发富文本中遇到中文输入法输入等问题，所以总结一下。 键盘事件 触发顺序 普通输入 keydown ->keypress -> input->change-> keyup 输入法输入 输入时 keydown ->CompositionStart->CompositionUpdate -> input->change->onCompositionEnd ->keyup 普通事件 在keyup 事件
Slate transform API 详细说明
通用配置 NodeOptions interface NodeOptions { at?: Location; // 需要操作的节点，默认为选区。 match?: NodeMatch<T>; // 自定义匹配方法。 // 指明Editor.nodes(),以哪种模式遍历slate node tree // 'all':
保留小数位-toFixed的坑
背景 开发过程中，遇到 需要对小数进行四舍五入的需求：首先想到的是 Number.toFixed(pre) 这个 API 的使用。 问题 预期的四舍五入结果： 65967.005.toFixed(2) // 65967.01 12859.005.toFixed(2) // 12859.01 控制台实际输出的结果： 65967.005.toFixed(2) //
Zustand
zustand是一个react的状态管理库，可以替代context、redux使用。 创建Store set用于修改store属性，get获取s
CodeStyle.md
Code Style 提前返回 在 function 中经常会遇到变量值为 undefined 的情况，这个时候则需要提前判断并阻止执行，避免一些不必要的分支（无 else），让代码更精炼。 if (userInfo) { // 执
异常监控
异常类型 JS错误 在 JavaScript 中，Error 是一种标准的内置对象，用于表示运行时错误和异常。Error 对象可以通过 throw 语句抛出，由 try…catch 语句捕获并处理。 一个
依赖倒置、控制反转，依赖注入
通过定义抽象的接口，我们可以将高层应用和具体的底层模块解耦。应用程序不需要关心具体实现细节，而是通过接口来访问底层模块的功能。当需要使用不同
状态管理
关于react 的状态管理 Provider + Context（useContext） 一个完整的例子 import React, { createContext, Dispatch, SetStateAction, useState, } from 'react'; export interface IState { theme: string; color: string; } interface Props { count: number; setCount: Dispatch<SetStateAction<number>>; } const Context =
性能监控基础
性能监控基础 前端应用渲染模型 CSR：Client Side Rendering，客户端（通常是浏览器）渲染； SSR：Server Side Rendering，
性能优化之分片
痛点 在进行耗时长的任务时，如果同步执行，会造成页面卡顿。比如js进行复杂的运算，页面渲染大量的DOM节点。在这种情况可以通过分片的思想来优化
vscode 插件开发踩坑
中文翻译文档：https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/ 关于@types/no
JS装饰器（Decorator）
概念 装饰器是 ES7 的一个新语法，在Typescript已经支持。作用就是**对一些对象进行装饰后返回一个被包装过的对象。**装饰器本质是基于Ob
Hook原理
作者：宫秋 链接：https://juejin.cn/post/7119102104337121316 来源：稀土掘金 原理 hooks 的实现就是基于 fiber 的，
AOP思想
基本思想 面向切面编程，把一些跟核心业务逻辑无关的功能抽离出来，再通过动态组织的方式掺入业务逻辑模块中。 let func = ()=>{ //业务逻辑 console.log('func'); } func = func.before(()=>{ console.log('before'); }).after(()=>{ console.log('after'); })
浅拷贝与深拷贝
总结 浅拷贝：只拷贝了栈内存 深拷贝：拷贝栈内存和堆内存。 浅拷贝 手写， 用for in遍历，但不支持Symbol属性的处理。 用Object.keys
this指向问题
总结 this始终指向调用它的那个对象。 场景： 给元素的某个行为绑定方法，当事件行为触发，方法中的this是元素本身。 构造函数体中的this是当
js中三类For循环
总结 性能对比： for 与 while 基础 var 循环的时候，两者性能差不多 let arr = new Array(9999999).fill(0); console.time('for') for(var i = 0; i < arr.length; i++) {} console.timeEnd('for') // for: 8.13818359375 ms console.time('while') var i = 0; while(i < arr.length) { i++; } console.timeEnd('while') // while: 8.020751953125 ms var 没有块级作用域
js的继承
原型链继承 原理 让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性
DOM事件
事件流 事件两种模型：捕获和冒泡 javascript复制代码// 鼠标点击子元素后，打印顺序为 // 父捕获 // 子捕获 // 子冒泡 // 父冒泡 <html> <div class="parent"> <div class