- 博客(174)
- 收藏
- 关注
RSS订阅
原创 前端面试HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试
变量声明不开辟内存,只是告诉编译器,要声明的部分存在,要预留部分的空间。var i;变量定义开辟内存。var i=123;props公开，单向数据流值，父子组件间的唯一通信不可改1.每个组件对象都会有props（properties的简写）属性2.组件标签的所有属性都保存在props中3.内部读取某个属性值：this.props.propertyNamestate私有（通过Ajax获取回来的数据，一般都是私有数据），React 把组件看成是一个状态机（State Machines），
2022-05-07 21:13:34
31874
14
原创 electron嵌入web内容
应用， 兼容 Mac, Windows(xp不兼容) 和 Linux，于 Chromium 和 Node.js, 可以使用 HTML, CSS 和 JavaScript 构建应用。IPC 本身不是 Electron 独有的概念，它是 Inter-Process Communication 的缩写，意思就是不同进程之间如何交换数据。因为主进程作为统一的数据来源,可以避免不同窗口状态不一致的问题，而主进程和渲染进程。：每个Electron窗口都是独立的渲染进程，拥有自己的Vue实例和组件树。
2026-10-27 23:02:19
300
原创 Service Worker、强制刷新、清除缓存刷新、卸载重装
极个别接口 发送请求失败（code码都没），未到达服务端失败的那个极个别接口可能需要“刷脸”或携带了“特殊违禁品”，在安检（服务器、网关）那一关被精准拦下了强刷两遍才把两个接口依次救活，这是一个非常典型的现象。uploadauthno-cache(已被验证)api.com在现代网页和 App 开发中，数据和代码被存在多个不同的“抽屉”里。以下是导致这种奇特现象的具体原因：{C}%3C!{C}%3C!1. 强刷清理了 Service Worker 代理{C}%3C!现代网页（PWA）广泛使用技术。
2026-09-02 17:37:56
322
原创 多端生态AI：消息流式、 富文本渲染
/ 代码语言类型// highlight.js自动高亮代码文本// 构造代码块的HTML结构// 构造代码标题栏，显示语言类型和复制按钮</div>`;// 将标题栏和代码块组合成完整结构break;break;break;default://之前的逻辑，后续可以全换成自定义指令去处理// 使用自定义渲染器// 其他 marked.js 选项});
2026-08-08 18:37:55
175
原创 像素vs条数级虚拟列表
目标都一样：少画 DOM。差别在「少」怎么算。总高度用估算/缓存高度撑出来就是真实 DOM 总高滚动条可对应「全部消息」的假高度只对应「当前窗口」真实高度不定高必须测高/估高直接渲染，省事代价实现难、和气泡耦合重DOM 仍可能几十~一两百，不是极致常说的/面试：（像素级）虚拟列表 = 按 scrollTop + viewport 算 index 区间 + spacer/transform。实际开发：条数级虚拟列表 = 按条数slice，不维护总虚拟高度。
2026-08-06 17:04:44
253
原创 CSS 悬挂空白与选区溢出
在（或pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。原则 A：空格必须保留（因为是pre-wrap原则 B：空格后面没有宽度了，必须换行。如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。这些行尾的空白字符不消失，而是“悬挂”在行末的边界之外。它们存在于这一行，但被当作“零零兵”，不占用整行盒子的实际布局宽度（Advance Width）。
2026-06-16 18:02:25
487
原创 Shell 脚本语言（Bash/Sh）基础 与 应用
说明你的项目较老（比如 Webpack 3/4），而你电脑的 Node.js 版本较新（Node 17+），不加这一句项目会直接报错崩掉。--checksum：算 MD5 / rolling checksum，再决定是否传输（更精确，但对大目录会慢很多，一般不加）。是 Shell 脚本（Shell Script）的标准文件扩展名。1>/dev/null # 把标准输出（正常信息）丢进 /dev/null（屏幕看不到）：原本是查看文件的命令，但配合后面的符号，在这里变成了“接收输入并输出”。
2026-05-29 23:33:57
432
原创 Claude Code安装+配置国产大模型+CC Switch
Claude Code是一款终端AI编程助手，具备文件操作权限。安装需Node.js 18+，通过npm全局安装。配置需修改settings.json文件，设置GLM模型API及环境变量，并绕过区域限制。使用时进入项目目录执行claude命令，建议添加--dangerously-skip-permissions参数跳过权限提示。最新2.1.42版本已验证可用，支持通过MCP服务器扩展视觉、搜索等功能。注意需完全信任目录才跳过权限检查。
2026-05-16 13:47:10
713
原创 图解Vue3 响应式，手动实现核心原理
fill:#333;color:#333;color:#333;fill:none;GET读取SET修改Proxy总控响应式数据Track收集依赖Trigger通知更新Dep管理依赖Effect改变值视图更新Ref基本类型Reactive引用类型toRef/toRefs同步引用属性。
2025-10-23 23:11:30
528
原创 electron之win/mac通知免打扰
new后会在用户设备的通知中心中创建一个通知条目，* title: "字符串"但一般是把条目按需放在通知中心，等待显示。且通知样式是固定的，只能传部分参数。
2025-08-15 12:57:48
1472
原创 浏览器解析url--＞建立TCP连接--＞发起https请求--＞关键渲染路径CRP
脚本开启和关闭：将直接添加到样式表中意味着目标元素通常会在不久的将来发生变化，而浏览器会保留优化更长的时间。过度使用将导致内存使用过多，并导致更复杂的渲染发生，因为浏览器试图为可能的更改做准备。这将导致更差的性能。/* 关键字值 *//* <custom-ident> 示例 *//* <custom-ident> 示例 *//* 两个 <animatable-feature> 例子 *//* 全局值 */
2024-08-23 14:25:38
1455
3
原创 Error in callback for watcher “function () { return this._data.$$state }“: “Error: [vuex] do not ...
Vuex 中，所有的状态变更应该通过 mutation 来进行，以确保状态变更的可追踪性和可预测性。直接修改一个数组或对象，Vue 无法跟踪这种改变的来源，导致可能的数据流问题和组件渲染错误。当直接修改 Vuex 的状态，比如通过。
2024-08-23 11:15:53
772
原创 Vuex、Redux状态管理库
Redux比较独立，可以跟很多框架结合使用，不过主要还是跟React配合比较好，也是最常见的React状态管理的库。当 Vuex 中的状态发生变化时，computed 属性会自动更新。但状态变更是通过称为 mutations 的同步函数来处理的，而异步逻辑则需要放在 action 中处理。这样store对象就可以在其他组件中进行使用了，例如在组件中。第一个箭头函数作为 Vuex getter 的定义部分，它可以访问到。在 Vuex 中，有类似于 Redux 的 action 的概念，
2024-07-24 11:22:11
1437
原创 通信流程：https【SSL/TLS】，git仓库【https/SSH】，蓝牙【面对面快传/AirDrop】
用散列/哈希函数得到摘要/哈希值MD5： 128位散列值 (要被淘汰了)SHA-1： 160位散列值SHA-256: 产出256位的散列值。
2024-07-15 16:11:41
1441
原创 vue：标签属性绑定Vue实例【ref，reactive，内置指令v-bind，v-on】,预定义变量、方法【$methods，$computed】
trim：自动过滤输入的首尾空白字符。.number：自动将用户的输入转为数值类型。.lazy：将实时更新的input事件改为移出输入焦点或回车的change事件，适用于大量输入，或者需要精确验证（邮件、号码）-- 过滤首尾空白字符 -->-- 将输入转为数值 -->-- 使用 change 事件替代 input 事件 -->
2024-07-14 11:04:20
1464
原创 ES6-ES13符号：单双引号、变量的解构赋值、占位符 、字符串模版`${} `、扩展运算符...、?,??,_,||=,&&=,in
是 truthy 值（不是 false、null、undefined、空字符串、0、NaN），则将。是 falsy 值（false、null、undefined、空字符串、0、NaN），则将。且等于(&&=) ： a &&= b 等同于 a && (a = b);或等于(||=) ：a ||= b 等同于 a || (a = b);) 的情况下不会引起错误，该表达式短路返回值是。含局部变量时用模板字符串（反引号 ``` `）链式运算符，不同之处在于，在引用为空 (
2024-07-14 10:18:17
1335
原创 开发常识：命令行终端、库源码、版本、开发环境阶段、API和SDK、PV/UV
在开发和测试阶段，使用 HTTP 可能更方便，避免了配置证书和加密协议的复杂性，节省了开发时间。开放的CDN（内容分发网络）平台，用于托管开源的JavaScript、CSS和NPM包。的测试，包括功能测试、性能测试、兼容性测试等，以确保软件的质量和稳定性。的网络环境或特定的攻击场景，此时使用 HTTP 可能更合适。软件版本提交给测试团队后的。测试，旨在快速验证软件的。
2024-07-04 21:17:53
555
原创 h5兼容移动端【调试vconsole +单位postcss-pxtorem】
此Hook利用了的resize事件，处理移动设备上因等导致视口变化API 提供了有关视觉视口（visual viewport）的信息，即用户实际看到的部分，这部分可能会因为UI元素（如地址栏和键盘）的显隐而改变。
2024-04-19 21:43:08
1138
原创 navigator.clipboard/ textarea 选择剪切
如果不支持或者用户没有授权访问剪贴板，代码会回退到使用一个不可见的。API 来复制文本。元素来实现复制功能。
2024-04-19 11:38:56
664
原创 【不变，拖延，少做 分类】前端性能优化
1.做（三省）：懒能不能？的：减少渲染+缓存静态资源；如果要做，能不能？紧急缓慢/万一不用做了的：延迟非必要+预处理必要；拖不下去的时候，能不能？：压缩体积，多路复用2.能否更快更好3.预防。
2024-04-16 22:54:12
982
原创 原子化CSS框架：Tailwind CSS
扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件。
2024-02-04 19:21:30
3881
1
原创 yarn/npm certificate has expired
目录报错原因：HTTPS 证书验证失败方法a.检查网络安全软件：可能会拦截或修改 HTTPS 流量b.strict-ssl:false关闭验证【临时方法】yarn 安装包时报“certificate has expired”_yarn certificate has expired-优快云博客
2024-02-04 18:06:53
2656
原创 国际化（i18n)：react、vue、element兼容
i18n应用中，下述 JSON 对象通常会根据不同的语言或功能模块被拆分成多个独立的 JSON 文件，如zh->home.json，en->login.json。从本地化资源文件中获取特定键的字符串，并且可以动态地插入变量。"CN" 则表示该语言的特定区域，即中华人民共和国（China）。（namespace，如下述zh.json中的login），避免了不同组件间状态管理的复杂性和冗余性。包含国际化设置的对象，判断和切换语言。等在整个应用程序中需要访问的数据。，.xml，.ts存储对象。
2024-02-04 17:29:51
3338
原创 setTimeout、setInterval、requestAnimationFrame区别，及定时器不准时
变动观察器）是一种Web API，它允许开发者监视DOM树的变化并在这些变化发生时执行回调函数允许监视DOM树的变化，因此它也可以用于异步任务的调度。不同设备的屏幕刷新频率可能不同， setTimeout/setInterval只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同。考虑极端情况，假如定时器里面的代码需要进行大量的计算，或者是DOM操作，代码执行时间超过定时器的时间，会出现定时器不准的情况。是一种宏任务，但是优先级较低，可能在其他异步任务之后执行。这样设计的原因，如果在GUI渲染的时候，
2024-01-30 19:04:44
1643
原创 js中字符串string，遍历json/Object【匹配url、邮箱、电话，版本号，千位分割，判断回文】
URL结构一般包括协议、主机名、主机端口、路径、请求信息、哈希。
2024-01-26 11:20:27
949
原创 匿名/箭头函数，立即执行函数IIFE；函数声明式和函数表达式；
本文摘要： 文章系统梳理了JavaScript函数的多种定义方式与特性差异，重点对比了箭头函数与传统匿名函数。箭头函数无function声明、继承上层this、无prototype，不能作为构造函数；匿名函数有function声明、可变量提升、是function实例。同时解析了对象方法简写、IIFE自执行函数、函数声明与表达式的区别，并详细说明React中处理this的5种方法（箭头函数、bind等）。通过代码示例演示不同函数调用时的this指向差异，帮助开发者理解函数作用域与调用上下文的关系。
2024-01-19 19:07:03
860
原创 前端环境安装【mac/window，nvm/node，npm/yarn，react/vue/ts，git，ai IDE(vs，沙箱/测试，package与package-lock/yarn.lock】
nvm 主要是用来管理和 npm 版本的工具，可以用来切换不同版本的 nodejs。安装nvm之前先卸载node。
2024-01-15 19:28:29
1811
原创 JSON数据处理以及常用方法、yaml、json diff patch
如果是一个字符串，表示使用该字符串作为缩进。如果是一个数字，表示缩进的空格数；
2023-12-14 10:58:25
1923
原创 css预处理器之sass（scss）
mixin中插值不能作为赋值语句的值部分，只能用做属性名定义或者选择器构建时@include中不能使用插值。通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起.1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”%声明的代码，如果不被 @extend 调用的话，不会产生任何代码。在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个。比如在不同的地方调用一个相同的混合宏时，不能将两个。2、类似 JS的注释方式，使用“//” 两者区别，
2023-11-29 22:24:00
2497
原创 【面试】typescript【类成员，接口interface与别名type，高级/工具类型】
TS与java不同，TS默认隐式。所以可以通过ts特有的元组限制。但有时需要存储不同类型的值。
2023-11-29 17:16:32
1431
原创 手写promise A+、catch、finally、all、allsettled、any、race
同步版1.将promise的resolve和reject函数传给实例用2.实例给resolve和reject函数传值。
2023-11-28 23:13:50
776
原创 封装进度条onUploadProgress+axios取消请求的上传组件
点击或拖拽上传文件-- 使用正则表达式替换所有点号 -->请上传{{ format.replace(/\./g, "") }}格式文件，上传多份文件时以最后一次为准
2023-11-27 14:56:18
1368
原创 【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型
不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。，它是浏览器提供的绘制动画的 api。
2023-11-26 22:24:54
1244
原创 react组件通信
4、将子组件中想要传递给父组件的数据，作为参数传递给这个函数。3、子组件通过props获取到父组件传递过来的西数，并旦地。，这样就可以在逻辑中通过this.context。也可以定义一个静态方法。2、将函数作为属性的。属性进行向下传递的，那么接收的语法是通过。
2023-11-24 23:06:04
1148
2023年最全前端笔面（20w字）pdf
2023-05-07
2022轻量级端口转发rinetd.tar.gz
2022-12-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人