- 博客(227)
- 收藏
- 关注
RSS订阅
原创 一文讲懂Cookie、Session、Token【附实例】
本文介绍了Web开发中Cookie、Session和Token的使用方法及区别。Cookie是存储在浏览器的小型文本数据，服务端通过响应头设置，浏览器自动携带；Session存储在服务端，通过SessionID识别用户；Token是服务端生成的加密字符串，用于身份验证。文章详细演示了Flask框架中三者的实现方式：Cookie的创建与删除、Session的构建与存储、Token的生成与传输。同时比较了三者的特点：Cookie由浏览器自动管理，Session依赖服务端存储，Token由客户端自主管理。每种方式
2025-08-05 15:07:47
1100
原创 Vue中nextTick()的理解
本文深入解析了JavaScript事件循环机制和Vue的异步更新策略。第一部分详细介绍了执行栈、任务队列（宏任务与微任务）以及事件循环的工作原理，并通过示例展示了代码执行顺序。第二部分阐述了Vue采用异步更新的原因及实现方式，重点讲解了nextTick的原理和使用场景，指出其本质是将回调放入微任务队列。文章特别强调nextTick的正确使用时机，并分析了在微任务队列中不同任务顺序对结果的影响，为开发者在数据变更后获取最新DOM状态提供了实用指南。
2025-05-29 11:00:37
2980
原创 前端浏览器开发中的浏览器兼容问题【持续更新】
浏览器兼容问题指：“不同浏览器(IE、Chrome、FireFox、Safari、Edge)对同一种CSS样式或同一段JS代码的解析和渲染会有所不同”，从而用户在不同浏览器环境下的访问呈现的页面效果不一致。浏览器兼容问题分为：“CSS兼容问题”、“JavaScript兼容问题造成浏览器兼容问题的根本原因是：“不同浏览器使用的内核不同”，不过随着时代的发展Webkit内核逐渐统一市场，浏览器兼容问题也越来越少。浏览器内核IETridentChromeBlinkFirefoxGecko。
2025-02-25 22:23:51
2200
原创 Vue+ElementPlus的一些问题汇总
在使用中的组件做侧边栏时，鼠标点击某个选项后，跳转到新的页面，同时对应的侧边栏应该高亮显示，如下图所示：点击“”后，“”高亮变蓝色，同时控制跳转新的页面，具体区域由下图所示：但是由于依靠来确定当前选定的标签，因此当我们“”时，会出现变成你所设置的标签这个时候我们需要根据的变化，来重置选中标签使用存储，可以完美解决上述缺点。
2025-02-25 13:21:02
1154
原创 Flask+Vue3+宝塔面板部署前后端【全网独家！！！】
最近博主刚学完，迫不及待的需要敲一个项目，前端使用开发，后端由于博主没有学过，于是想到使用“”作为后端，关于搭建在全网搜索也没有见一个讲明白的，为此博主再成功搭建完成后，特地记录此博客，方便大家学习在这里我们分两块讲解：“”与“”，道理基本一致，但些许细节不同。
2024-11-20 20:02:16
2340
9
原创 前端面试基础知识整理【Day-5】
本文整理了前端面试中的Web安全和代码手写知识点。Web安全篇介绍了XSS和CSRF攻击的防范措施，包括转义处理、CSP策略、SameSite Cookie等。代码手写篇包含两个实用案例：1) 函数柯里化的实现，展示了参数收集和延迟执行的技巧；2) 带并发限制的请求调度器，通过队列管理控制同时执行的请求数量。这些内容涵盖了前端开发中常见的安全问题和编程挑战，适合面试准备和日常开发参考。
2026-02-15 23:12:12
432
原创 前端面试基础知识整理【Day-4】
这篇文章整理了前端面试中的网络通信和代码手写两部分基础知识。网络通信部分涵盖了GET与POST请求的区别、常见HTTP状态码分类及浏览器本地存储方案（Cookie、localStorage、sessionStorage、IndexedDB）的特点比较。代码手写部分提供了Promise.all()和instanceof的手写实现，包括测试用例和预期结果。文章采用表格对比和代码示例的方式，清晰呈现了前端面试中常见的网络知识和编码能力考察点，适合准备前端面试的开发者快速复习核心概念。
2026-02-14 20:58:50
411
原创 前端面试基础知识整理【Day-3】
本文总结了前端面试中的关键知识点：1.浏览器渲染流程分为6个阶段：DOM树构建、CSSOM构建、渲染树生成、回流、重绘和合成，优化方向包括减少资源请求和体积。2.回流与重绘的区别：回流涉及几何属性变化且必定引起重绘，消耗资源多；重绘仅涉及外观属性变化，消耗较少。3.script标签的defer和async特性：defer保持执行顺序且不阻塞DOM解析，async下载即执行但可能打乱依赖顺序。4.手写EventBus实现发布订阅模式，包含on/emit/off/once方法。5.动画性能优化：transfor
2026-02-13 22:10:30
601
原创 前端面试基础知识整理【Day-2】
本文整理了前端面试中常见的JS和Vue知识点。JS部分包括深/浅拷贝区别、call/apply/bind用法、类数组转换；Vue部分涉及响应式原理、组合式API优势及Reflect作用。代码实践部分提供了深拷贝递归函数和bind手写实现。其中深拷贝需要注意循环引用和特殊对象处理，bind实现需考虑参数合并和this绑定。这些知识点涵盖了前端开发中的核心概念，是面试常见考察内容。
2026-02-11 19:36:10
600
原创 前端面试基础知识整理【Day-1】
本文系统梳理了JavaScript核心概念与Vue框架知识要点。JavaScript部分涵盖数据类型存储机制（堆栈内存）、闭包特性、原型链继承、this指向规则及事件循环原理；Vue篇解析生命周期钩子、v-if/v-show区别、组件通信方式及nextTick机制；最后提供防抖/节流函数及new关键字的实现代码。内容由浅入深，既包含基础理论又结合实践案例，适合前端开发者巩固核心知识体系，特别有助于面试准备与技术查漏补缺。
2026-02-11 00:04:40
646
原创 JavaScript基础提升【六】
JavaScript中的Promise解决了异步编程中的回调地狱问题，提供了更清晰的处理异步操作的方式。当函数执行需要延迟时（如setTimeout），传统回调方法会使代码难以维护。Promise通过状态（Pending/Fulfilled/Rejected）管理异步结果，支持链式调用（then/catch/finally）。ES6还引入了Promise.all（聚合多个Promise）、Promise.race（竞速）等方法，以及async/await语法糖进一步简化异步代码。Promise.withRe
2025-11-24 18:00:57
656
原创 JavaScript基础提升【五】
JavaScript函数类型与高级特性 JavaScript函数是Function类型的实例，具有length和prototype属性。函数调用方法包括call()、apply()和bind()： call()和apply()立即执行函数，区别在于参数传递方式 bind()返回新函数，延迟执行 闭包能访问外部作用域变量，常用解决方案包括IIFE和let关键字。箭头函数与普通函数区别在于没有自己的this和prototype属性。ES6新增rest参数处理不定长参数。这些特性为JavaScript提供了强大的
2025-11-14 11:58:42
1023
原创 JavaScript基础提升【四】
本文介绍JavaScript类的发展历程：1. ES6之前的伪类实现方式：通过构造函数和原型链模拟类，存在提升、枚举性等问题。2. ES6类语法：使用class关键字，包含构造函数、方法定义等特性，本质仍是原型继承的语法糖。3. 类与构造函数的区别：包括提升规则、严格模式、方法枚举性等差异。4. Getter/Setter使用方法：控制属性访问，可在类和对象字面量中使用。5. 类表达式、单例模式和计算属性等高级用法。6. 继承机制：通过extends和super实现，包括方法覆盖和父类方法调用。7. ins
2025-11-03 16:24:48
798
原创 JavaScript基础提升【三】
本文介绍了JavaScript构造函数、原型继承和对象属性的核心概念。构造函数需以大写字母开头，通过new操作符创建对象实例，并可使用原型添加共享方法以减少内存消耗。文章还探讨了new.target属性、ES5的Object.create()继承方法，以及对象属性的分类（数据属性和访问器属性）及其特性配置。此外，讲解了对象解构语法、可选链运算符和ES6对象字面量语法扩展，包括属性简写和计算属性等功能。这些内容为深入理解JavaScript面向对象编程提供了基础知识。
2025-10-31 19:45:24
855
原创 JavaScript基础提升【二】
本文系统介绍了JavaScript中的各类运算符及其运算规则。主要内容包括：1）算术运算符（加法、减法、乘法、除法）的类型转换规则和特殊值处理；2）对象参与运算时的valueOf()和toString()调用机制；3）余数运算符的特点和模运算实现；4）赋值运算符和逗号运算符的使用；5）一元运算符和比较运算符的类型转换规则；6）逻辑运算符（与、或、非）的运算规则和优先级；7）ES2021新增的逻辑赋值运算符和ES2020的空值合并运算符。文章通过大量代码示例详细说明了不同类型值参与运算时的处理逻辑和注意事项。
2025-10-16 19:29:59
969
原创 JavaScript基础提升【一】
本文总结了JavaScript核心数据类型与内存机制，重点解析了：1. 数据类型特性：undefined/null的异同、字符串不可变性、对象引用机制；2. 数值处理细节：进制表示、浮点数精度问题及解决方案（toFixed方法）；3. 类型转换规则：Boolean类型的真值转换原则；4. 内存管理机制：原始值与引用值的存储差异（堆栈与堆），以及变量赋值的深浅拷贝问题。文章适合有JS基础但需深入理解底层原理的开发者，通过典型示例（如0.1+0.2≠0.3）揭示语言特性，并提供了数字分隔符等ES6新特性实践建议
2025-10-15 15:39:43
747
原创 BEM命名规范
BEM（块、元素、修饰符）是CSS命名规范，通过双下划线（__）连接块与元素，双短横线（--）表示修饰符。作者建议扩展为BEMS，增加"State"状态类（如is-disabled）。BEM优势在于提高代码可读性和避免样式冲突，特别是在Vue父子组件中能防止样式继承问题。文中通过电商商品列表案例，展示了父组件（App.vue）容器和子组件（Child.vue）卡片如何应用BEM命名，确保样式隔离和组件化开发。实践表明BEM能有效解决作用域冲突问题。
2025-10-11 15:32:03
1089
原创 JavaScript实现防抖、节流【带思路】
本文介绍了JavaScript中防抖(debounce)和节流(throttle)的概念及实现方法。防抖是在频繁操作后只执行最后一次，节流是按固定时间间隔执行操作。文章通过示例代码展示了如何用setTimeout实现这两种功能，并添加cancel方法。最后推荐使用lodash库提供的_.debounce和_.throttle方法，这些方法更成熟可靠。理解防抖和节流原理对处理高频事件很有帮助。
2025-10-09 17:21:00
977
原创 Pinia学习【基础】
Pinia是Vue3官方推荐的组合式状态管理库，提供两种写法：组合式（灵活但复杂）和选项式（简单但局限）。通过defineStore定义store，包含state（ref/reactive）、getter（computed）和action（方法）。使用时需注意解构会破坏响应式，推荐用storeToRefs保持响应性。支持监听state变化（$subscribe）和直接访问store属性。相比Vuex更简洁且与组合式API深度集成。
2025-10-09 16:02:21
827
原创 Promise开发【进阶】
摘要： 本文深入解析JavaScript中Promise的进阶特性。首先介绍Promise的三种状态（pending、fulfilled、rejected）及其转换规则，强调状态仅由自身resolve/reject控制。其次，详细分析then、catch、finally的链式调用机制，包括新Promise状态的判定规则（由回调返回值决定）和值穿透现象（未定义回调时结果透传）。此外，探讨Promise.race的应用场景（如超时控制）及错误捕获边界——catch仅能捕获前置未处理的错误，且无法直接捕获执行器中
2025-09-26 19:48:09
952
原创 Sass开发【四】
Sass提供了11种@规则，包括@use、@forward、@import等模块加载指令，@mixin/@include代码复用模板，@function函数定义，以及@error、@warn、@debug等调试指令。重点介绍了@use规则替代@import的优势，包括模块化、命名空间和私有成员支持。详细说明了流程控制规则（@if、@each、@for、@while）的使用方法，并展示了参数传递、可选参数等特性。文章还对比了不同规则的使用场景，如@error会中断编译而@warn仅警告，帮助开发者更好地组织和
2025-09-22 19:07:00
1151
原创 Sass开发【三】
本文介绍了Sass选择器和值的特性。Sass选择器支持列表选择器、组合器嵌套、父选择器（&）和占位符选择器（%），能简化CSS代码结构。Sass值包括数字、字符串、颜色、布尔值、null和映射（键值对），支持科学计数法、字符串转义、映射操作（查找/添加/合并）等。特别说明Sass中只有false和null为假值，其他值（包括0、空字符串等）都被视为真值。这些特性使Sass成为比CSS更灵活强大的样式表语言。
2025-09-18 15:33:49
733
原创 Sass开发【二】
Sass样式表由变量声明、流程控制规则和CSS语句组成，支持嵌套、混合和继承等特性。样式表包含普通CSS语句、变量定义、@规则和表达式运算，其中表达式涵盖数字、字符串、颜色等数据类型及其运算符。Sass注释分为编译时删除的单行注释和保留的多行注释。插值语法可将SassScript嵌入CSS代码，常用于选择器、属性和URL等场景。URL()函数支持带引号字符串、拼接表达式和插值三种解析方式。这些功能使Sass成为增强CSS编写效率的强大预处理器。
2025-09-17 15:37:17
890
原创 Sass开发【一】
本文介绍了Sass的核心功能，包括变量定义、模块化、Mixin重用代码、继承机制和数学运算等特性。Sass通过嵌套语法简化CSS编写，提供.scss和.sass两种语法格式。变量可实现样式复用，模块化支持代码拆分，Mixin创建可复用模板，@extend实现样式继承，运算符支持数学计算。这些功能使Sass成为增强CSS开发效率的强大工具，解决传统CSS冗余问题。
2025-09-17 00:14:45
935
原创 TypeScript学习【四】
TypeScript中的命名空间用于解决命名冲突问题，通过namespace定义代码的作用域，支持嵌套和合并。命名空间内的变量和类需用export导出才能被外部访问。断言则允许开发者手动指定变量类型，有尖括号和as两种语法，其中as语法兼容性更好。断言不会改变变量实际类型，也不能用于完全无关的类型转换。在JSX中只能使用as语法，尖括号会导致解析冲突。这些特性帮助TypeScript在编译阶段进行更准确的类型检查。
2025-09-16 00:37:13
504
原创 TypeScript学习【三】
这篇文章系统介绍了TypeScript面向对象编程的核心概念，主要内容包括：1.类的基本定义和使用（字段、方法、构造函数）；2.继承机制（extends、super、方法重写）；3.静态成员和访问控制修饰符（public/protected/private）；4.类与接口的实现关系；5.对象类型模板；6.强大的泛型特性（泛型函数、接口、类、约束及默认值）。文章通过大量代码示例展示了TypeScript如何增强JavaScript的面向对象能力，特别是类型系统和泛型编程特性，为开发者提供了更严格的类型检查和更
2025-09-12 19:42:08
732
原创 Vue3组件数据双向绑定
本文介绍了Vue3中组件数据双向绑定的两种实现方式：1）传统组件通信方式，通过defineProps接收数据、defineEmits派发事件实现；2）Vue3.4+新增的defineModel语法糖，简化了双向绑定流程。文章详细对比了两种方式的代码实现，并深入解析了defineModel的底层机制，包括其参数配置和命名规范。特别说明了defineModel默认值处理的注意事项，以及如何通过命名参数实现多v-model绑定。最后通过完整示例展示了两种方式的实现效果，为开发者提供了实用的双向绑定解决方案。
2025-09-12 11:00:01
1459
原创 TypeScript学习【二】
TypeScript函数特性摘要：TypeScript为函数增强了类型约束，包括返回值类型(如number/void)、可选参数(?)和默认参数。支持剩余参数(...)处理不定参数，箭头函数可约束参数和返回值类型。接口(interface)用于复杂数据结构验证，可定义对象属性类型，还支持数组索引和元素的类型控制。接口可通过extends实现单继承或多继承，但需注意属性冲突问题。这些特性提升了代码的健壮性和可维护性，同时保持JavaScript的灵活性。
2025-09-11 16:43:29
834
原创 TypeScript学习【一】
本文介绍了TypeScript的基础特性与核心概念。TypeScript作为JavaScript的超集，具有静态类型检查、类型推断等特性，支持接口、类、模块等现代编程元素。文章详细讲解了变量、函数、类和接口的声明方式，以及string、number、boolean等基本类型，还涵盖了数组、元组、枚举等高级类型。特别介绍了any和unknown的区别、联合类型、类型断言等重要概念。通过学习这些内容，开发者可以提升代码质量，利用TypeScript的类型系统捕捉潜在错误，构建更健壮的前端应用。
2025-09-09 23:08:01
878
原创 indexDB快速上手
IndexedDB是浏览器内置的异步数据库，支持大容量存储（GB级）和复杂数据类型。核心概念包括数据库、对象仓库（表）、索引、事务和游标。操作指南：创建数据库使用indexedDB.open()；添加数据通过事务的add()方法；删除数据需提供主键；更新数据用put()方法。查询支持按主键查询和范围查询（使用游标）。所有操作均为异步，确保不阻塞主线程，适合存储大量结构化数据。
2025-08-28 15:01:16
1113
原创 Chrome插件开发【storage】
本文介绍了Chrome扩展中的chrome.storage API，包含三种存储区域：local（本地持久化）、sync（跨设备同步）和session（临时会话）。主要内容涵盖：1）三种存储区域的特性和使用场景；2）常用操作方法，包括数据存取（set/get）、删除（remove/clear）和空间计算（getBytesInUse）；3）数据变化监听机制（onChanged）。特别强调了sync区域的同步特性和容量限制（8KB/条，100KB总量）。使用前需在manifest.json中声明storage权
2025-08-27 17:06:35
1046
原创 uni-app学习【pages】
本文详细介绍了uni-app的pages.json配置文件，包括全局样式、页面路由、导航栏配置等核心功能。主要内容涵盖：1. pages.json的基本结构和配置项；2. 全局样式(globalStyle)和页面样式(style)的设置；3. 原生导航栏的自定义方法；4. 页面跳转的两种方式：API跳转（navigateTo/redirectTo等）和组件跳转(navigator)；5. 路由参数传递和页面通信机制。文章还提供了完整的配置示例和注意事项，是uni-app开发者掌握路由和页面配置的实用指南。
2025-08-22 10:31:05
1069
原创 uniapp学习【上手篇】
本文介绍了uni-app开发的基础知识，包括目录结构、页面概念、生命周期管理、路径引用规范等核心内容。重点讲解了pages页面配置、App.vue的主组件作用、main.js入口文件，详细说明了绝对路径和相对路径的使用场景及注意事项。文章还涵盖了JS/CSS/静态资源的引用方式，并介绍了简化组件引用的easycom规范。适合具备HTML5/CSS/JavaScript基础和Vue3开发能力的开发者学习uni-app框架，所有示例基于HBuilderX开发环境。后续将有更多续篇深入探讨uni-app开发。
2025-08-20 22:40:46
1066
原创 Chrome插件开发【windows】
本文介绍了Chrome扩展V3版本中的windows API，该API提供了与浏览器窗口交互的完整功能。主要内容包括：1）窗口操作方法，如创建(chrome.windows.create)、获取(chrome.windows.get)、更新(chrome.windows.update)和关闭(chrome.windows.remove)窗口；2）窗口事件监听，包括窗口创建(onCreated)、关闭(onRemoved)、焦点变化(onFocusChanged)和大小位置变化(onBoundsChanged
2025-08-19 23:26:28
1055
原创 Chrome插件开发【Tabs】
本文介绍了Chrome扩展开发中Tabs API的常用方法，包括查询、创建、更新、移动、刷新和关闭标签页。首先说明了使用Tabs API需要在manifest.json中声明"tabs"权限。详细讲解了各方法的参数和使用示例：query()查询条件组合、create()创建新标签页、update()修改标签属性、move()调整标签位置、reload()刷新页面、remove()关闭标签页。特别指出异步操作需用async/await确保执行顺序。文章提供了完整的代码示例，适合开发者快速掌
2025-08-15 11:23:41
1386
原创 Chrome插件开发【消息通信】
本文详细介绍了Chrome插件内部通信的两种方式：短连接和长连接通信。短连接通信使用一次性消息API如chrome.runtime.sendMessage()和chrome.tabs.sendMessage()，适用于简单消息交互；长连接通信则通过chrome.runtime.connect()建立持久连接，使用Port对象进行持续通信。文章分别从内容脚本与其他脚本、其他脚本之间、其他脚本与内容脚本三种场景，结合具体代码示例（如content-script.js与background.js的交互）演示了通信
2025-08-13 11:06:35
1691
原创 Chrome插件开发【manifest.json】
本文介绍了Chrome扩展的manifest.json文件结构，分为常用结构和完整结构两部分。常用结构包含必填项(manifest_version/name/version)和核心配置(action/content_scripts/permissions等)，详细说明了各字段的作用和用法。完整结构展示了更多可选配置项，包括side_panel/options_ui/content_security_policy等高级功能。特别解析了内容脚本(content-scripts)的半隔离特性，以及权限控制、资源访
2025-08-12 15:29:21
1459
原创 Chrome插件开发【Service Worker练手小项目】
本文介绍了两个Chrome扩展开发项目：智能定时页面刷新器和跨标签通信中心。第一个项目通过Service Worker实现定时刷新功能，包含popup界面、定时逻辑和消息通信处理。第二个项目实现跨标签页通信，包括标签页管理、消息发送和群组功能，使用了content script与后台通信。两个项目都涉及manifest配置、popup界面开发、后台逻辑处理和Chrome API使用，展示了Chrome扩展开发的核心技术。文章还指出了在onAlarm事件中使用tabs.query时可能遇到的BUG问题。
2025-08-11 19:04:25
1045
原创 Chrome插件开发【Service Worker】
本文介绍了Chrome扩展中ServiceWorker的核心概念和使用方法。ServiceWorker作为扩展的事件处理脚本，在V3版本中采用按需激活机制，可通过manifest.json配置并支持模块化。文章详细解析了ServiceWorker的生命周期（注册、激活、运行、终止、唤醒各阶段）及对应事件处理，包括onInstalled、onStartup等关键事件的监听方式和应用场景。同时提供了消息通信、异步响应处理、事件去抖等技术实现方案，以及使用chrome.storage和indexedDB进行状态持
2025-08-11 14:20:15
1488
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人