- 博客(70)
- 收藏
- 关注
RSS订阅原创 URL输入到页面展示全过程
本文概述了网页访问的核心流程：首先通过DNS解析获取服务器IP地址；然后建立TCP连接（三次握手）；接着发送HTTP/HTTPS请求，服务器处理后返回响应；浏览器接收响应后解析HTML、CSS构建渲染树，完成页面渲染；最后通过四次挥手关闭TCP连接。整个过程涉及DNS查询、TCP连接、HTTP请求、服务器处理、页面渲染等关键技术环节，完整展现了从输入网址到页面显示的完整链路。
2026-03-31 13:19:35
61
原创 防抖与节流 --- 简易理解版本
本文介绍了防抖(debounce)和节流(throttle)两种函数优化技术。防抖的核心是每次触发都清空定时器重新计时，只有停止操作后才执行函数，适用于输入搜索等场景；节流的核心是固定时间内只执行一次，执行后进入冷却期，适用于滚动加载等高频事件。两者的主要区别在于：防抖会在连续触发时只执行最后一次，而节流会按固定频率执行。文章提供了两种技术的代码实现，并通过表格对比了它们的特性、核心逻辑和适用场景，最后用简洁口诀帮助记忆实现原理。
2026-03-25 10:17:59
33
原创 事件循环、宏任务、微任务
JavaScript事件循环机制是处理异步任务的核心，通过宏任务和微任务的分级调度实现单线程非阻塞执行。宏任务（如setTimeout）优先级较低，微任务（如Promise.then）优先级更高且会一次性清空队列。执行顺序遵循：同步代码→所有微任务→UI渲染→下一个宏任务的循环。常见误区包括误认为setTimeout(fn,0)会立即执行或await后的代码是同步的。掌握事件循环规则能准确预测异步代码执行顺序，解决相关面试问题。关键要理解微任务优先于宏任务，且微任务队列会彻底清空才执行下一个宏任务。
2026-03-23 17:12:25
292
原创 手写Promise
本文介绍了Promise的核心实现原理，主要包括：1）三种状态（pending/fulfilled/rejected）的不可逆转换机制；2）then方法的链式调用实现，通过返回新Promise并处理回调返回值；3）回调的异步执行与缓存机制，使用setTimeout模拟微任务；4）resolve/reject触发时的状态变更流程。文章还提供了完整的简易Promise实现代码，包含构造函数、then方法、静态方法等核心功能，并通过测试用例验证了基础异步执行、链式调用等关键特性。该实现遵循PromiseA+规范的
2026-03-20 17:13:32
167
原创 异步函数 - async/await
摘要：async/await本质是Promise的语法糖，不会将异步变为同步。await会暂停当前async函数但不阻塞主线程，其右侧表达式会被转为Promise并放入微任务队列。执行顺序是：主线程同步代码（如baz()）→微任务队列（按await顺序执行）。因此示例代码输出顺序为baz→foo→bar，验证了async/await只是"写法同步"的异步特性，并未改变JS单线程执行机制。理解这一点对正确处理异步流程至关重要。
2026-03-19 16:17:49
560
原创 Promise A+ 核心思想（通俗版 + 核心规则）
摘要：PromiseA+规范是Promise的标准化方案，核心思想是将异步操作的状态管理与回调处理解耦。其三大核心规则：1) 状态机机制，包含pending、fulfilled、rejected三种不可逆状态；2) 回调延迟绑定+异步执行，确保回调统一放入微任务队列；3) then方法的链式调用，通过返回新Promise实现异步流程控制。规范还规定了错误冒泡、值透传等特性，有效解决了回调地狱、异步不可控等问题，为async/await等异步方案奠定了基础。（149字）
2026-03-19 16:14:24
381
原创 手写call - 熟悉this的强制绑定
摘要：文章展示了如何手写实现JavaScript的call方法。核心步骤包括：处理thisArg参数（默认绑定全局对象），使用Symbol创建唯一临时方法名以避免覆盖原有属性，将原函数绑定到临时方法上执行，最后清理临时方法并返回结果。通过扩展Function.prototype.myCall方法，演示了如何改变函数this指向并传递参数，最后测试代码输出"Hello,Alice!"验证实现正确性。
2026-03-18 16:21:41
37
原创 原型继承 - 学习
本文提出了5种理解JavaScript原型继承的方法：1）可视化拆解，通过画原型链图直观展示继承关系；2）动手实操，通过拆解和重现代码深入理解；3）生活类比，用公司组织架构比喻原型链查找；4）反向纠错，分析常见错误强化正确认知；5）概念对比，区分继承与拷贝的本质差异。这些方法将抽象的原型概念转化为具象形式，帮助开发者从被动记忆转为主动理解，最终掌握原型继承的核心逻辑。关键在于通过可视化、实践和多角度类比，建立对原型链、属性共享等机制的本质认知。
2026-03-18 14:44:41
629
原创 继承、原型继承
摘要：本文通过家族传承的生动比喻，将编程中的继承概念通俗化讲解。父类比作父亲（拥有私有属性和共享方法），子类比作儿子（继承父类特性并新增专属内容）。重点解释了原型继承机制（原型链如族谱查找规则）和ES6 class继承（简化版家族继承），并给出"先找自己再翻族谱"等记忆口诀。文中还列举了常见误区及解决方法，最终总结出用生活场景理解继承的三大要点，使抽象编程概念变得形象易懂、便于记忆。
2026-03-17 18:03:55
360
原创 关于new构造函数的this绑定
摘要：这段代码展示了JavaScript构造函数和Vue.js的基础应用。页面包含两个构造函数Person和Person2，分别演示了构造函数返回不同值的情况：Person返回实例对象，Person2返回指定对象。通过Vue实例的mounted钩子调用这些构造函数，并打印输出结果。代码还包含Vue的基本配置（el、data、methods等）和简单的CSS样式，整体实现了一个演示构造函数特性的小型前端示例。
2026-03-17 16:06:11
35
原创 前端的正则方法列举
本文介绍了正则表达式的核心元字符、修饰符和常用方法。元字符部分详细说明了^、$、.、*、+、?等符号的匹配规则及示例；修饰符包括g(全局)、i(忽略大小写)、m(多行)三种模式。常用方法有test()用于验证匹配、match()查找匹配结果、replace()替换字符串。这些内容涵盖了正则表达式的基础语法和实际应用场景，适合作为快速参考指南。
2026-03-11 08:00:00
42
原创 前端循环方法总结
JavaScript循环方法可分为基础循环、数组循环和对象循环三大类。基础循环包括for（精确控制索引）、while（不确定次数）和do...while（至少执行一次）。数组循环方法如forEach、map、filter等都不会改变原数组结构，但会返回不同结果（新数组/布尔值/累加值）。对象循环推荐使用Object.keys/values/entries配合for...of，避免for...in的原型链问题。在Vue和React框架中循环渲染时，必须添加唯一key值以保证性能。注意引用类型数据在循环中修改属
2026-03-10 15:04:54
184
原创 svg 的使用
本文展示了三种SVG绘制三角形的方法：1)使用polygon标签定义顶点坐标，设置填充色和边框；2)通过调整SVG画布尺寸实现图形缩放；3)利用path标签的路径命令绘制三角形。示例演示了SVG的基本属性如points、fill、stroke、viewBox等的使用，以及path的M(移动)、L(画线)、Z(闭合)等路径命令。三种方法均能创建100x100画布内的三角形，其中第一种方法还展示了边框样式设置，第二种方法演示了画布放大效果。
2026-03-10 09:52:50
728
原创 三角形绘制
本文介绍了多种使用CSS实现三角形的方法：1）利用clip-path的polygon属性；2）通过设置宽高为0，用border属性创建；3）调整border-color和border-width实现不同形状的三角形。同时还展示了使用SVG的polygon标签和Canvas绘制三角形的方式。这些方法各具特点，其中CSS边框法最为简洁，SVG和Canvas则更适合复杂图形场景。代码示例展示了四种CSS实现方式以及SVG、Canvas的实现方法。
2026-03-09 15:48:52
30
原创 clip-path 属性
CSS的clip-path属性用于裁剪元素显示区域，仅显示指定形状部分，其余内容隐藏但保留原空间布局。支持多种形状函数：circle()创建圆形、ellipse()椭圆、polygon()自定义多边形（如菱形）、inset()带圆角矩形，以及path()引用SVG路径。示例代码展示了圆形裁剪(圆心位置可调)、五角星多边形裁剪和带圆角的内缩矩形效果。该属性通过坐标点或百分比定义形状，适合创建各种非矩形UI元素，为网页设计提供更多创意可能。
2026-03-09 13:21:32
162
原创 动态划分板块的抽奖转盘
本文介绍了一个动态划分板块的抽奖转盘实现方案。相比固定6等分的传统设计，该方案通过Vue.js动态计算扇形路径和奖品布局，支持任意数量的奖项配置。核心功能包括：1）使用SVG绘制可自定义数量的扇形区域；2）基于奖品数量动态计算每个扇形的角度和位置；3）实现平滑的旋转动画和精准的奖项定位；4）提供完整的抽奖交互流程，包括随机选择、旋转控制和结果提示。该方案采用响应式设计，通过计算属性动态调整样式，具有较强的实用性和复用性。
2026-03-06 10:34:14
48
原创 抽奖转盘，渐变颜色背景
摘要：该代码实现了一个60°均等板块的抽奖转盘，包含6个扇形区域（一等奖至谢谢参与）。使用SVG绘制6个不同颜色的圆弧扇形，通过Vue.js控制转盘旋转逻辑。核心功能包括：随机抽奖、平滑旋转动画（8圈后停在指定区域）、指针指向奖品中间位置。转盘直径500px，采用径向渐变填充，每个奖品区域60°等分。点击抽奖按钮触发旋转，4秒后停止并显示中奖提示。代码结构清晰，包含样式定义、DOM元素和Vue数据/方法实现。
2026-03-05 18:03:00
496
原创 抽奖转盘示例
这是一个基于Vue.js实现的抽奖转盘网页应用。代码包含HTML结构、Vue实例和CSS样式，主要功能包括： 创建六种奖项的圆形转盘，使用渐变色区分不同奖项 实现点击抽奖按钮触发随机选择奖项 添加转盘旋转动画效果，确保指针最终停在选中奖项中间 通过transitionend事件监听动画结束，显示中奖提示 转盘设计包含颜色区分的一至五等奖和"谢谢参与"项，使用CSS的conic-gradient实现扇形颜色分布，并通过Vue计算属性动态计算旋转角度和样式。
2026-03-05 13:26:44
38
原创 实现抽奖转盘（简易版）
本文实现了一个抽奖转盘功能，主要包含以下内容：1) 使用Vue2框架构建转盘界面，包含6个奖项区域；2) 通过conic-gradient实现彩色扇形背景；3) 核心逻辑包括：计算各奖项角度、总旋转角度和动画效果；4) 点击抽奖按钮触发随机选择奖项，转盘旋转后停在对应位置；5) 使用transition实现平滑旋转动画，transitionend事件监听动画结束；6) 包含完整的HTML结构、CSS样式和JavaScript交互代码，可直接运行。
2026-03-04 19:50:47
333
原创 图片结果卡加载 =＞ 显示时页面的跳动
本文介绍了一种优化图片加载体验的前端实现方案。核心思路包括：1)使用固定尺寸容器提前占位，避免布局偏移；2)预加载图片并计算适配尺寸，保证加载前后容器尺寸不变；3)支持懒加载和错误处理。技术实现采用Vue组件封装，通过预加载图片获取原始尺寸，按容器最大尺寸等比缩放计算最终显示宽高，使用object-fit:contain保证图片完整显示。该方案有效解决了图片加载过程中的布局抖动问题，提升用户体验，且组件化设计便于在不同UI需求中复用。
2026-03-04 08:00:00
149
原创 背景色 -- 线性渐变
CSS线性渐变(linear-gradient)是一种沿直线方向实现颜色过渡的效果，默认从上到下垂直渐变。其语法为：background: linear-gradient(方向, 颜色1, 颜色2...)，方向可选(默认to bottom)，颜色必选且可设置多个。主要应用包括：1)基本渐变(均匀分布颜色)；2)指定方向(使用方位词或角度值)；3)多色渐变(自定义色标位置)；4)重复渐变(repeating-linear-gradient)制作条纹；5)叠加渐变实现复杂效果。通过设置不同参数可创建水平/垂直/
2026-03-03 14:08:04
79
原创 背景色 - 径向渐变
本文介绍了CSS径向渐变(radial-gradient)的基本用法和特性。径向渐变是从中心点向外辐射的圆形/椭圆形渐变，通过background:radial-gradient()语法实现。文章详细讲解了六个关键功能：1）基本椭圆形渐变；2）指定形状（circle/ellipse）；3）控制中心点位置（at参数）；4）设置渐变大小（closest-side等参数）；5）多色渐变及色标定位；6）重复渐变效果。每个功能都配有对应的HTML示例代码，展示了不同参数下的渐变效果。文中代码示例可直接运行查看实际效果
2026-03-03 11:08:38
34
原创 背景色 -- 锥形渐变
锥形渐变(conic-gradient)是一种CSS渐变方式，围绕中心点沿圆周旋转式渐变，颜色呈扇形分布，适用于创建饼图、仪表盘等效果。通过background:conic-gradient()属性设置，可指定角度区间(如0-45度、45-60度)的颜色分布。示例代码展示了四种实现方式：60%扇形、90度扇形区域、180度扇形区域和完整圆形渐变，通过Vue动态计算颜色值。该技术不需要图片，直接通过CSS代码即可实现丰富的环形/扇形视觉效果。
2026-03-02 19:52:55
163
原创 vue3的h5项目在手机上白屏
摘要：针对Vue3+Vite项目在iOS12系统企业微信中因浏览器内核版本过低导致的白屏问题，解决方案包括：1) 修改vite.config.js配置，降低构建目标至ES2015并添加@vitejs/plugin-legacy插件；2) 安装core-js提供polyfill支持；3) 调整入口文件引入基础垫片；4) 避免使用老旧浏览器不支持的API；5) 优化企业微信容器渲染设置。通过降低语法版本、补充兼容代码和polyfill，有效解决iOS12等老旧系统的兼容性问题。
2026-02-27 14:33:57
565
原创 防抖与节流
本文介绍了前端开发中常用的防抖(debounce)和节流(throttle)技术。防抖是在高频触发事件时，只执行最后一次操作，适用于搜索输入、窗口resize等场景；节流则是固定时间间隔内只执行一次，适用于滚动、拖拽等高频事件。文章提供了两种技术的实现代码和Vue框架中的使用示例，并指出关键区别：防抖等待用户停止操作后执行，节流则按照固定频率执行。这些技术能有效优化前端性能，避免不必要的资源消耗。
2026-02-26 18:46:34
70
原创 uni-app介绍
开发所有前端应用的框架，支持 Vue.js 的语法和特性（如数据绑定、组件化、生命周期等），开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。uni-app支持微信的所有原生组件和api，无限制。uni-app提供了条件编译模型，所有代码包括组件、js、css、配置json、文件、目录，均支持条件编译，可不受限的编写各端差异代码。，其多端成熟度更高一些。
2026-02-25 17:38:19
497
原创 rpx、px、rem
px是固定尺寸，适合不需要适配的场景；rem是网页移动端适配的核心，通过相对根元素实现等比例缩放，需手动配置基准值；rpx是小程序专属的“懒人适配单位”，自动按屏幕宽度缩放，小程序开发优先使用。记住核心逻辑：px 固定，rem 相对根元素，rpx 相对屏幕宽度，就能根据场景快速选对单位。
2026-02-24 08:47:04
415
原创 开发流程 - 微信小程序
→ 提交审核（一般需要1-7天，首次审核时间稍长一些，版本迭代审核时间短）。：填入你的AppID（或选择“测试号”快速体验）：测试号仅用于开发，上线需正式AppID。（响应式，750rpx = 屏幕宽度），注册小程序账号（个人/企业）。安装后登录，使用微信扫码授权。：避免频繁调用，合并数据更新。：更新数据并刷新视图（核心）打开开发者工具 → 点击。，小程序即可被搜索与访问。，自动生成基础项目结构。（数据）、生命周期、方法。：开发者工具 → 点击。→ 填写版本号与备注。：审核通过后 → 点击。
2026-02-10 16:25:36
650
原创 前端项目构建相关
Vite是当前前端项目的首选，兼顾速度和易用性，适配现代框架；Webpack适合复杂项目，生态最完善但配置较复杂；Rollup专注类库打包，Tree-shaking 能力最优；选择核心原则：小型 / 中型项目用 Vite，大型定制化项目用 Webpack，类库开发用 Rollup。
2026-02-09 15:20:21
567
原创 使用vue3+vite快速构建h5应用
搭建Vue3移动端H5项目的核心4步pnpm create vite 项目名 --template vue+ 安装依赖；适配：安装，配置自动转rem；组件：安装Vant4，按需引入移动端组件；打包 + 部署到服务器/托管平台。按以上步骤操作，5分钟即可搭建一个适配所有手机、功能完善、可直接上线的Vue3移动端H5项目，满足99%的移动端开发需求！
2026-02-09 15:13:04
642
原创 vue中的props
作为组件间通信方式的一种，props是用于实现父子组件传值的一种方式，可以让子组件接收并使用父组件传递过来的数据。父组件通过属性的形式给子组件传值，子组件通过定义props来声明接收这些参数，且props是只读的。子组件不能直接修改props，会触发警告。如果想基于props修改数据，可在子组件内部定义计算属性实现。
2026-02-09 14:23:15
422
原创 vue2混入（mixin）&& vue3组合式函数（Composables）
Mixin && Composables 都用于抽离公共逻辑部分，提高代码复用性，减少冗余。mixin混入Composables组合式函数本质组合选项对象（被迫合并）主动调用适用框架vue2vue3使用通过mixins:[***]注入组件通过import引入后，按需解构复用性弱mixin内所有对象会整体引入，会有命名冲突，data、methods选项中对象会合并，相同变量/方法以组件内的优先，且不可传参，逻辑耦合强组件可按需引入变量和方法进行调用，接受传参，逻辑可嵌套适用，
2026-02-06 16:03:42
367
原创 0.1 + 0.2 不等于 0.3
的本质是十进制小数转二进制时的无限循环，导致浮点数存储为近似值，相加后精度丢失；这是IEEE 754二进制浮点数的通用特性，并非JavaScript的bug；前端解决思路：简单场景用toFixed，通用场景转整数运算，复杂/金融场景用decimal.js等专业库，永远不要直接用 === 判断浮点数是否相等。
2026-02-06 15:41:01
607
原创 Null 类型判断为 Object
是 JavaScript 早期二进制类型标记设计的历史 Bug，并非null属于对象类型；该 Bug 因向后兼容未被修复，成为 ECMA 规范的特殊约定；实际开发中判断null必须用=== null，而非typeof。
2026-02-06 15:34:38
719
原创 canvas 学习
同时，这次的项目需求还有关生成图片等，为了保证代码的简洁和正确度，需要借助第三方包完成，就也查找了很多资源，最后选定了 wxml2canvas 实现在小程序上将 wxml 元素转换为 canvas 元素。将wxml指定节点转换成canvas元素. Contribute to wg-front/wxml2canvas development by creating an account on GitHub.这期是潘潘整理的万字canvas入门教程，带你光速入门canvas基础绘画!( 近1万字吐血总结)
2024-04-22 10:57:17
665
原创 HTML — 弹性布局（2）
决定弹性项目（flex item）的排列顺序，使用较少，默认为0。order 的值可以为任意整数（正整数或负整数均可，也可为0），数值越小越排在前面。
2024-04-09 23:01:52
694
原创 HTML — 弹性布局（1）
对于弹性布局，首先了解其概念。弹性布局，即flex box，是一种用于在容器中进行布局的CSS技术。它使得容器内的子元素能够以灵活的方式排列、对齐、分配空间，以便应对各种屏幕尺寸和设备类型。任何一个容器都可以指定为flex布局，它提供了一种更简便、更强大的方法来实现复杂的布局，相对于传统的基于浮动和定位的布局方式更为直观和易用。主要属性：还有其他属性如下： 包括弹性容器（flex container）和弹性项目（flex item）。设置了“display：flex 或 display：
2024-04-09 19:28:47
1207
原创 微信小程序——构建npm
在微信小程序中使用第三方包并构建npm的具体方法可以参考官方文档。npm 支持 | 微信开放文档微信开发者平台文档但是在开发过程中，我遇到了无法构建npm的方法，所以就暂时使用的笨方法，将转二维码的js文件直接导入utils文件夹中，然后引入的该方法。（详情见此次开发需要对一期代码进行优化，就需要解决这个问题，改用第三方包，避免前者可能会导致的一些问题，保证代码的安全性和稳定性。在查阅种种资料后，终于解决了。
2024-03-21 17:14:15
1301
版本控制基于Git的跨平台安装与配置指南：Windows及Mac系统环境下SSH密钥管理与免密码操作实现方案
2026-02-24
【小程序开发】基于微信开发者工具的前端架构设计：从零构建待办事项应用全流程技术指南
2026-02-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人