乐胖代购免代理版

Canvas基础

一什么是canvas ？ MDN 中这样定义：是 HTML5 新增的元素，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。我们可以这样认为，标签只是一个矩形的画布。JavaScript 就是画笔，负责在画布上画画。Canvas 是为了解决 Web 页面中只能显示静态图

Data

数据

缩放

原创 2023-11-23 10:34:57 205 阅读

Webgl 基础以及canvasKit学习

一基础概念 1. 关于canvas 、 webgl 、 skia 、canvasKit ctx.getContext('2d ' / 'webgl ' / 'webgl2')；类型 2d 、webgl、webgl2 有什么不同？ canvas2d 主要的性能问题就在于，绘制中间对象没法缓存，以及部分能力需要 CPU 计算这两点上。而 canvaskit 在提供了类似 canvas 2d 的

2d

图形绘制

着色器

原创 2023-11-23 10:33:07 239 阅读

图片基础知识

图片基础知识像素点物理像素点设备像素比几倍图缩略图格式图（webp，jpeg，png，jpg，gif）尺寸大小阴影图片压缩图片分片上传图片分片渲染（几张图片渲染成一张大图）Buffer 格式，如何渲染成图片？位图 bigBitImage，如何渲染，哪种渲染图片更快？如何缓存位图？

像素点

位图

图片压缩

原创 2023-11-23 10:29:41 59 阅读

ahooks 源码实现

ahooks库源码实现 state模块useSetState功能点： 1. 实现类似class组件中 setState功能，只更新传入的值，其他值不用更新； 2. 且可以穿入第二个回调函数参数同步获取更新后的最新state用于操作。 1. import { useState } from 'react'; export const useSetState = (init = {}) =>

数据

功能点

初始化

原创 2023-11-23 10:28:47 100 阅读

React 遇到的奇奇怪怪的问题

React 遇到的奇奇怪怪的问题在 ref 初始化时执行的函数，结果组件刷新都要执行一遍。比如，const ref = useRef(createWorder()); 导致 worker 创建了无数个，内存也霸占了一大半。

初始化

原创 2023-11-23 10:27:16 59 阅读

React-redux 中useSelector使用

在一个 action 被分发(dispatch) 后，useSelector() 默认对 select 函数的返回值进行引用比较 ===，并且仅在返回值改变时触发重渲染。但是，不同于 connect()，useSelector()并不会阻止父组件重渲染导致的子组件重渲染的行为，即使组件的 props 没有发生改变。useSelector 源码分析 import { useContext, use

函数返回值

浅拷贝

数据

原创 2023-11-23 10:27:12 981 阅读

代码规范

React 组件代码规范 1 命名规范函数命名组件的私有方法都用 _ 开头所有事件监听的方法都用 handle 开头传递给子组件以on开头render函数的分支，以render开头

私有方法

事件监听

代码规范

原创 2023-11-23 10:27:01 68 阅读

聊聊 RXJS

一什么是rxjs？ RxJS（Reactive Extensions for JavaScript）是一个用于响应式编程的 JavaScript 库。它通过使用可观察对象（Observables）和操作符（Operators）来处理异步和事件驱动的代码。什么是响应式编程？程序的输入可以被当成一个数据流，例如 excel表格的累加。响应式编程世界里知名度最高的框架 - Reactive E

数据

操作符

异步操作

原创 2023-11-23 10:26:58 77 阅读

ts配置

我们将使用 babel 去编译 TypeScript，babel 在编译 TypeScript 代码是直接去掉 TypeScript 的类型，然后当成普通的 javascript 代码使用各种插件进行编译，tsc 并没有介入编译过程，因此 tsconfig.json 中很多选项例如 target 和 module 是没有用的，可以让 VSCode 等编辑器正确提示错误在项目中使用ts yarn

typescript

json

缓存

原创 2023-11-23 10:26:15 69 阅读

git

上传

远程仓库

原创 2023-11-23 10:26:03 83 阅读

Git 流程优化-实践

用 git cz 代替 git commit 操作全局安装 npm install -g commitizen cz-conventional-changelog npm i -g cz-customizable写入配置 echo'{ "path": "cz-customizable" }' > ~/.czrc在项目根目录下写入文件.cz-config.jsmodule.exports =

git

分支合并

分支结构

原创精选 2023-11-23 10:25:20 328 阅读

VSCode 小技巧配置代码模版 vscode snippets

第一步 mac 输入 shift + command + p （windows 输入 ctrl + shift + p）, 输入snippets, 点击如下图选项。第二步，选中新建全局代码片段文件。第三步，输入一个全局配置文件名，例如 snippet.config第四步，进行配置{ // Place your 全局 snippets here. Each snippet is defined u

配置文件

javascript

sed

原创 2023-11-23 10:24:51 294 阅读

画板-性能优化方案

一画板现阶段性能瓶颈图片内存占用过高操作（拖动，缩放）导致的过度重绘制react、redux数据更新机制导致绘图出现延迟二内存优化现阶段内存的瓶颈在哪里？到底是哪些东西占用了内存？优化点1：地图Map中的图片大小尽可能小现阶段地图所有的数据都是走的服务端（非webp图片）的百分之25%缩略图，当出现超大图大图，每次都去缓存超大图的25%图片作为地图的数据，当地图中大图的数量较多的时候

重绘

缩放

数据

原创 2023-11-23 09:33:12 122 阅读

报错提醒机制

全局报错捕获js window.addEventListener('unhandledrejection', event => { let request = event.target; // IndexedDB 本机请求对象 let error = event.reason; // 未处理的错误对象，与 request.error 相同 // ……报告错误…… });

系统

原创 2023-11-23 09:32:11 72 阅读

webpack

一基础概念 Webpack 是什么？答：现代javascript构建工具，静态资源打包工具什么叫构建？构建就是把我们在开发环境写的代码，转换成生产环境的代码。构建过程应该包括预编译、语法检查、词法检查、依赖处理、文件合并、文件压缩、单元测试、版本管理等Vite 利用浏览器支持ES module 二核心概念（二八原则）entry 入口文件，可以是一个或者多个。表示从这个入口文

html

模版

css

原创 2023-11-23 09:32:08 66 阅读

设计模式

设计原则开放封闭原则对扩展开放，对修改关闭例子1 - axios 设计符合开闭原则（通过axios.interceptors 对外部扩展进行开放）、以及redux中间件设计方式例子2 1. enum MemberName { normal:'normal', vip:'vip', vipPlus:'vipPlus' } // 不符合开闭原则，因为如果新增了会员类型，则需要修改Prod

子类

缓存

代理模式

原创 2023-11-23 09:31:41 67 阅读

es6

let 和 var的区别变量声明提升暂时性死区不允许重复声明块级作用域（函数作用域，全局作用域 - 用函数作用域（匿名立即执行函数表达式）代替块级作用域）不与全局对象挂钩（window，global，self, globalThis）变量的结构赋值（数组，对象-原型链上也可-包装类型也可）用途交换变量的值从函数中返回多个值（放在对象中返回，再解构）函数参数的定义，以及默

作用域

块级作用域

字符串

原创 2023-11-23 09:31:17 61 阅读

函数调用栈-执行上下文栈

一调用栈我们知道栈的特点是，先进后出的。那么函数的执行上下文栈又是怎么样的呢？先看这段代码var a = 2 function p2(b,c){ return b+c； }function p1(b,c){ var d = 10; result = p2(b,c); return a + result + d;//2+9+10 }console.log(p1(3,6));//21

执行上下文

词法

作用域

转载 2023-11-23 09:31:09 71 阅读

前端url的几种实用情况

一相对地址转绝对地址使用场景：某个函数需要在使用的时候传递一个地址，函数内部会利用这个地址进行某些操作（比如生成worker，生成image，数据转化等）如下：如果直接使用相对位置，会根据url 进行拼接。但当一些利用利用了router的单页项目，页面的url 并不能获取到真实的file 地址。所以出现如下情况其他几种浏览器中相对地址转绝对地址的方法利用a标签1. functi

字符串

相对地址

绝对地址

原创精选 2023-11-23 09:31:02 217 阅读

前端二进制流

FileReader ---- 读取 file/blob 数据 FileReader.readAsArrayBuffer() 异步方法，读取完成 result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。 FileReader.readAsDataURL() ：一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

json

数据

二进制数

原创 2023-11-23 09:30:50 146 阅读

画布拖动方案

画布拖动策略：为提升性能，防止画布(canvas) 跟随mouseMove事件不断重绘，选择先移动画布容器，在鼠标mouseup 事件执行时，重绘画布，让画布容器的还原。具体实现 // 视口宽高：为画板可视区域的宽高，不包含header高度； const clientRect = { width:, height:, };// 定义一个偏移量，为视口的宽高：理由是在鼠标从视口左上角拖到到

宽高

偏移量

3d

原创 2023-11-23 09:30:42 100 阅读

indexDB介绍与封装

indexDB介绍与封装一前端缓存的发展 Cookie：内存小4kb，现多用于服务端存一些数据在客户端 localstorage/sessionStorage ：5M左右，同步缓存，读取速度较快 Cache Storage 与 serviseWorker 配合使用。（ios 浏览器很小，其他浏览器可以无限存） indexDB：内存基本无上限。异步读取数据，适合用来做离线缓存工具。二

数据

数据库

缓存

原创 2023-11-23 09:30:32 378 阅读

Storage 封装

一 JSON - javascript Object Notation（符号）基于JavaScript原生语法，能够序列化对象、数组、数值、字符串、布尔值和 null。 JSON.parse(s,(key,value)=>{ console.log(key,value); // s 为字符串 '"字符"' 或者 '数字' 、'null' 、'{}'、'[]' key 都为空，valu

JSON

字符串

缓存

原创 2023-11-23 09:30:01 75 阅读

React 18 并发渲染

一升级react 18 React 18 改变所有setState 都是异步，不管是否在react的“管辖范围内”。原来在定时器，在监听函数中是同步的。Root 书写方式需要改变Router 需要改变？？二启用并发渲染useDeferredValue 1. const [text, setText] = useState('喵爸'); const deferredText = useDe

Text

原创 2023-11-23 09:29:39 85 阅读

自定义文档 Selection、Range 属性

一 document.execCommand 现阶段项目中使用方法document.execCommand 可直接操控选中文本，添加属性（操控文档）。但是由于fdocument.execCommand 方法兼容性不好，浏览器之间的实现不一致，没有一个统一的标准。且自定义程度不高。官方已经将该方法移除。推荐使用 Selection 和 Range 进行操作。罗列一下 document.ex

偏移量

sed

子节点

原创 2023-11-23 09:29:19 98 阅读

前端模块化专题

Commonjs （同步模块加载，运行时加载） exports 和 moudle.exports 的区别？ exports 是 module 中exports 对象的引用。当模块中使用了 moudle.export = {} 的时候，所有 exports 都会失效。exports 只能 exports.a = a; 这样使用，不能 exports = {};这种使用方式无效。每个模块其实都相当于

加载

模块化

后缀名

原创 2023-11-23 09:29:09 78 阅读

性能优化指标分析

原则不要阻塞主线程将长任务进行拆分（大图切片，因为image.decode 大图会形成长任务）Js 单线程与长任务主线程是浏览器中大多数任务运行的地方。它被称为主线程是有原因的:几乎所有编写的JavaScript都在主线程中工作。主线程一次只能处理一个任务。当任务持续时间超过某一点(确切地说是50毫秒)时，它们被归类为长任务。如果用户在运行较长时间的任务时试图与页面交互，或者需要进行重要的

优先级

主线程

用户交互

原创精选 2023-11-23 09:29:06 183 阅读

useEffect 和 useLayoutEffect浅析

执行时期的区别一 useEffect 回调函数的执行时期useEffect为异步执行，执行时期为触发状态更新（如：setState，forceUpdate）React渲染函数执行（render）将更新渲染到页面上执行useEffect回调函数二 useLayoutEffect 回调函数的执行时期触发更新React渲染函数执行同步执行 useLayoutEffect回调函数 (如果此函数中存在触发

回调函数

页面渲染

生命周期

原创 2022-10-08 09:48:00 207 阅读

浅析package.json 和 package-lock.json的区别

一 package.json 中的版本符号{ "react"："^18.2.0", "react-dom"："~18.2.0" "react-refresh": "0.11.0",}插入符号 ^18.2.0 ：匹配 18.X.X 的最新版本。波浪符号 ~18.2.0 ：匹配 18.2.X 的最新版本。固定版本 0.11.0 ：匹配 0.11.0，不会更新版本。二 package-lo

json

安装包

新版本

原创 2022-10-08 09:47:47 117 阅读

前端浏览器打印

window.print()const bodyHtml = document.body.innerHTML document.body.innerHTML= $0.innerHTML window.print(); document.body.innerHTML = bodyHtml location.reload(); // 刷新页面$0 为打印的节点；location

html

刷新页面

css

原创 2022-10-08 09:47:35 370 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx6131c9d86142a的博客

Canvas基础

Webgl 基础以及canvasKit学习

图片基础知识

ahooks 源码实现

React 遇到的奇奇怪怪的问题

React-redux 中useSelector使用

代码规范

聊聊 RXJS

ts配置

Git相关原理

Git 流程优化-实践

VSCode 小技巧配置代码模版 vscode snippets

画板-性能优化方案

报错提醒机制

webpack

设计模式

es6

函数调用栈-执行上下文栈

前端url的几种实用情况

前端二进制流

画布拖动方案

indexDB介绍与封装

Storage 封装

React 18 并发渲染

自定义文档 Selection、Range 属性

前端模块化专题

性能优化指标分析

useEffect 和 useLayoutEffect浅析

浅析package.json 和 package-lock.json的区别

前端浏览器打印

欢迎