- 博客(45)
- 收藏
- 关注
RSS订阅原创 Gzip 完全解析：从原理到实践
Gzip压缩技术是现代前端优化资源加载的关键手段。文章详细解析了Gzip的工作原理，通过查找重复模式显著减小文本文件体积（如JS/CSS可缩减60%-80%）。前端实践包括Webpack预压缩和Nginx动态压缩两种方案，推荐混合使用以获得最佳性能。同时指出Gzip对小文件（<1KB）效果不佳，因其30字节固定开销占比过高。文章还揭示了Gzip的智能压缩机制，包括滑动窗口、LZ77编码等技术细节，为前端开发者提供了深入的技术参考和实践指南。
2025-11-26 23:14:34
789
原创 原子化CSS：现代H5开发中的通用样式缩写实践
原子化CSS（Atomic CSS）是一种CSS架构方法，它通过一系列单一职责的小型工具类来构建复杂的样式。每个类名通常只负责一个具体的样式属性。
2025-11-25 18:48:08
379
原创 前端样式局部作用域：从Scoped到CSS Modules 的完整指南
Vite配置示例css: {modules: {// 自定义生成的类名格式// 或者使用函数形式// 自定义逻辑${import {css : {// 自定义生成的类名格式 generateScopedName : '[name]__[local]___[hash:base64:5]' , // 或者使用函数形式 generateScopedName :(name , filename , css) => {
2025-10-31 17:32:48
967
原创 从TSX到JS：深入解析npm run build背后的完整构建流程
工具选择策略大型企业项目：ts-loader + 严格类型检查快速迭代项目：Babel + 并行类型检查对构建速度要求极高：Vite + esbuild性能优化要点合理使用缓存避免重复工作并行处理充分利用多核CPU按需引入减少bundle体积代码质量保障始终开启TypeScript严格模式配置合适的ESLint和Prettier规则定期进行bundle分析优化从TSX到JS的构建过程是现代前端工程化的缩影，它体现了软件开发中自动化、标准化和优化的重要性。
2025-10-28 11:41:12
959
原创 【JavaScript 异步编程发展史】：从回调地狱到 Promise
Promise 的出现标志着 JavaScript 异步编程的重要进步。它通过链式调用、统一错误处理和强大的流程控制，成功将开发者从回调地狱中解救出来。虽然仍有局限性，但作为现代异步编程的基石，Promise 为我们铺平了通向更优雅的 Async/Await 世界的道路。在下一篇文章中，我们将深入探讨 Async/Await 如何在前端支付等关键业务场景中提供更强大的异步编程体验。
2025-10-27 10:46:35
765
原创 TypeScript 的 interface 接口
interface 是对象的模板，可以看作是一种类型约定，中文译为“接口”。使用了某个模板的对象，就拥有了指定的类型结构。上面示例中，定义了一个接口Person，它指定一个对象模板，拥有三个属性firstNamelastName和age。任何实现这个接口的对象，都必须部署这三个属性，并且必须符合规定的类型。实现该接口很简单，只要指定它作为对象的类型即可。age: 25上面示例中，变量p的类型就是接口Person，所以必须符合Person指定的结构。
2025-04-13 22:10:48
1080
原创 当面试官问：Vue和React区别时，他最想听到什么
今天面试一家公司的驻场前端工程师，面试官问：我看你用 Vue 和 React 都开发过项目，你对比一下Vue 和 React 的区别吧。这是面试过程中经常会遇到的一个问题，这是个开放性问题，其实是面试官在考察你对于这两个框架的理解，对框架的理解程度不同、侧重点不同，回答出来的答案也不同。这篇文章，我想记录一下面试时浅显的简单回答一下这个问题，再Vue出发来聊聊 Vue 和 React 的区别。
2025-03-16 09:53:31
1153
原创 字符串高频算法：最长回文子串
，并判断是否比之前记录的最长回文子串更长。对于每个中心点（奇数或偶数），使用双指针。在每次中心扩展后，计算当前回文子串的长度（，分别指向中心左边和右边。在每次扩展中，只要当前子串是回文（）都可能是奇数长度回文的中心。）都可能是偶数长度回文的中心。中心扩展法] 中心扩展法。分别为中心点的左边和右边。如果更长，则更新结果字符串。的字符串，每个字符（
2025-02-10 20:53:22
438
原创 字符串高频算法：无重复字符的最长子串
依次递增地枚举子串的起始位置，那么子串的结束位置也是递增的！这里的原因在于，假设我们选择字符串中的第 k 个字符作为起始位置，并且得到了不包含重复字符的最长子串的结束位置为 r。如果 Set 的大小和原字符串的长度不同，说明存在重复字符，因为 Set 会自动去重.k的字符显然是不重复的，并且由于少了原本的第 k 个字符，我们可以尝试继续增大 r。是一种特殊的数据结构，它存入的值都是唯一的，不会有重复。保存的是当前找到的最长无重复子串的长度。和当前窗口的长度，取较大的值作为新的。
2025-02-09 22:54:57
1037
原创 HTML知识点复习
按照上面的实现， 不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x，2x，3x，4x四种，如果灭一个图片都设置4张图片，meta标签由 name 和 content 属性定义，用来描述网页文档的属性， 比如网页的作者，网页描述，关键词等，async属性，表示后续文档的加载和执行与js脚本的加载和执行时并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载（此时仅加载不执行）是并行进行的，不会等待后续加载的文档元素，读取到就会开始加载和执行，这样会阻塞后续文档的加载。
2025-01-19 15:13:23
892
原创 动态规划的经典问题--0-1 背包问题
这篇文章讲了如何用动态规划来解决 0-1 背包问题，其中有解题的思路分析，还有具体的过程分析，每个过程都有图片，很清晰了。相信大家对着图片多看几遍，就知道动态规划是怎么解决问题的了。最后还有 JS 代码实现，大家可以 copy 到本地跑一跑，这样会更清楚。
2024-12-01 18:19:07
891
原创 【计算机网络】计算机网络概述
下面就先来看看这俩类分层结构：五层因特网模型（应用层，运输层，网络层，链路层，物理层）、七层SOI模型（应用层，表示层，会话层，运输层，网络层，链路层，物理层）。每个组织，如一个大学，一个院系，一个公司都会有一台本地DNS服务器，当一台主机想要访问baidu.com的ip地址时，会先发送她的查询请求到本地DNS服务器，里面查找是否有baidu.com的ip地址。上图为UDP报文段结构，我们可以看出，相比较上层（应用层）传来的报文，多了四个字节，分别为，源端口号，目的端口号，长度（报文），校验和。
2024-11-24 19:20:48
1068
原创 React中组件通信的几种方式
在构建复杂的React应用时，组件之间的通信是至关重要的。从简单的父子组件通信到跨组件状态同步，不同组件之间的通信方式多种多样。
2024-11-17 20:17:37
2114
原创 【React 进阶】掌握 React18 全部 Hooks
useReducer 是 react-hooks 提供的能够在无状态组件中运行类似redux功能的apistate：状态statedispatch：改变state的函数reducer：与 redux 中的 reducer相同，一个函数，接收state与action，并返回一个新的stateinitialState：初始值init：将init函数作为useReducer的第三个参数传入，这样初始state将被设置为init(initialState)
2024-11-17 20:10:12
3007
原创 Redux的基本原理以及其如何在React中使用
Redux 是一个用于 JavaScript 应用的状态管理库，通常与 React 一起使用。它帮助开发者管理应用中各个组件之间的状态，使得状态的变化变得更加可预测和易于调试。：Redux也可以不和React组合使用的哦（通常一起使用）
2024-11-10 18:19:37
1121
原创 React：useState 的几个基础用法和进阶技巧
在这篇文章中，我们深入探讨了 React 的useStateHook，从它的基础用法到一些进阶技巧。掌握好useState是走向 React 高手之路的关键一步。在未来的文章中，我们还将继续探讨其他的 Hooks。
2024-11-10 18:13:15
659
原创 十分钟快速让你搞懂 Vue3 和 React 的区别
它们都采用了组件化的开发模式，使得开发者可以将复杂的应用拆分为多个小组件进行开发，从而提高了代码的可维护性和重用性。然而，虽然Vue 3和React都拥有各自的优点，但它们也存在着一些不同之处，本文将通过比较两者的相同点和不同点来帮助读者更好地理解Vue 3和React。Vue 3和React都采用了组件化开发的方式，使得代码具有更好的可维护性和重用性。虚拟DOM是一个轻量级的JavaScript对象，它描述了UI界面的状态和结构，当数据发生变化时，框架会通过比较前后两个虚拟DOM树的差异来进行页面更新。
2024-11-03 18:39:49
1412
原创 TypeScript面向对象&接口&泛型
接口（interface）是对象的模板，可以看作是一种类型约定。他定义了一组方法规范，这些方法规范由那些实现了该接口的类具体实现。接口本身不实现这些方法，它只是规定了实现类必须遵循的方法签名。// 报错// 报错上面示例中，type两次定义了类型A，导致两行都会报错。作为比较，interface则会自动合并。foo: 1,bar: 1上面示例中，interface把类型A的两个定义合并在一起。
2024-10-27 18:01:52
1099
原创 TypeScript基础(一): 初识TypeScript
never` 是 `void` 的子类型，但 `void` 不是 `never` 的子类型。- `void` 类型的变量实际上只能被赋值为 `undefined` 或者 `null`（如果你在 TypeScript 配置中启用了 `--strictNullChecks` 或 `--strict`，则只能是 `undefined`）。- `never` 是 `any`、`unknown`、`never` 之外的所有类型的子类型，这意味着你可以将 `never` 类型的变量赋值给任何类型。
2024-10-21 21:30:02
1246
原创 node入门与npm
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，允许开发者在服务器端运行 JavaScript 代码。npm是 Node.js 的默认包管理器，用于管理 JavaScript 项目中的依赖关系。
2024-10-21 19:59:36
1061
原创 Vue3-Pinia
●介绍○Pinia 是 Vue 的最新状态管理工具，是 Vuex 的替代品。○优势○提供更加简单的 API（去掉了mutation○提供符合组合式风格的 API，与 Vue3 新语法统一。○去掉了modules的概念，每一个 store 都是一个独立的模块。○配合 TypeScript 更加友好，提供可靠的类型推断。○手动添加 Pinia 到 Vue 项目○在实际开发项目的时候，关于 Pinia 的配置，可以在项目创建时自动添加。○手动添加的步骤：。
2024-10-20 15:38:50
964
原创 Vue3高级API的使用
在前面的内容中，我们已经学习到了很多 Vue 3 的基础语法与一些常用的 API。本节我们将介绍一些高级 API，带领大家进一步深入了解 Vue 3。本节我们主要为大家介绍了一些高级 API，我们来简单的复习一下：●customRef，这个 API 是用来显式控制其依赖项的跟踪和更新触发的，它接收 track() 和 trigger() 作为参数。●markRaw() 方法标记一个对象，使其永远不会被转换为代理（Proxy），而是返回对象本身。
2024-10-13 18:06:17
1370
原创 深入探索Vue3组合式API
reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式，ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。ref：用于声明 基本类型 或者单个变量的响应式数据。ref 的核心在于它包装了一个值，当这个值变化时，依赖它的视图会重新渲染。注意：ref 返回的是一个对象，其中的值通过 .value 属性访问。// 0reactive：用于声明 对象 或 数组 的响应式数据。reactive 更适合处理复杂的数据结构（对象或数组）。
2024-10-06 15:29:08
2058
4
原创 Vue2与Vue3: 关键差异与新特性介绍
Proxy是 ES6 引入的一种新的数据结构，它允许你创建一个对象的代理，从而在访问对象的属性或方法时进行拦截和自定义操作。Proxy对象有两个参数：目标对象和处理器对象，处理器对象定义了当操作被执行时的自定义行为。},Vue2：数据通过data（）函数定义，方法在 methods 对象中定义Vue3：引入setup（）函数作为组件的入口点，集中定义数据和方法Vue 3 带来了许多令人兴奋的新特性和改进，包括组合式 API、更好的 TypeScript 支持、性能提升等。
2024-10-06 10:15:04
1891
原创 JavaScript高级程序设计(一)(二)章
重点介绍介绍ECMAScript 和DOM标准。在此基础上探讨客户端检测、事件、动画、表单、错误处理及JSON，最后介绍近年涌现的最新和最重要的规范，包括Fetch API、模块、工作者线程、服务线程以及大量新API。JavaScript历史回顾JavaScript是什么JavaScript与ECMAScript的关系JavaScript的不同版本。
2024-09-22 22:18:27
1307
原创 计算机网络八股文-2
1.HTTP 分为长连接和短连接，本质上说的是TCP的长短连接。TCP连接是一个双向的通道，它是可以保持一段时间不关闭的，因此TCP连接才具有真正的长连接和短连接这一说法。2.TCP长连接可以复用一个TCP连接，来发起多次的HTTP请求，这样就可以减少资源消耗，比如一次请求HTML，如果是短连接的话，可能还需要请求后续的JS、CSS。
2024-09-01 18:31:07
961
原创 JS统计字符串出现频率
统计字符串中每个字符出现的频率可以通过几种不同的方法实现。以下是几种常见的方法：统计字符串中每个字符出现的频率可以通过几种不同的方法实现。
2024-08-12 16:09:44
1053
原创 JS判断括号字符串是否有效
当我们使用数组来模拟栈的操作时，入栈和出栈的过程可以通过数组的 push 和 pop 方法来实现。出栈操作会移除并返回栈顶的元素。如果为空，说明所有的左括号都找到了对应的右括号，返回 true；入栈操作即为数组的 push 方法，出栈操作即为 pop 方法。这种使用数组模拟栈操作的方法非常直观和有效，适用于许多算法和数据结构问题，特别是像括号匹配这样的场景。给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。1.入栈操作（push）将元素添加到数组的末尾。
2024-08-04 21:38:15
755
原创 如何封装一个最简单的Axios
我们这里只做了最最最基础的 axios 封装，但是可扩展性较高。相较于其它文章的过度封装，这里的封装形式其实可以满足大部分应用场景了。请求拦截里面针对 token 进行处理响应拦截里面判断 token 是否过期等等在 config/index.js 里面动态更改 baseURL在请求拦截里面根据业务场景修改请求头在拦截里面设置全局请求进度条等等。
2024-07-28 19:57:58
755
原创 Vue2生命周期总结
如果使用Vue框架，那么学习它的声明周期是不可避免的。人的一生分为了：幼年、少年、青年、中年、老年等阶段，我们需要在不同的阶段去做不同的事。一个 Vue 应用也是如此，只不过它将生命周期的各个阶段用钩子函数替代了，钩子函数内部就是我们需要做的事情。官网的一张图就非常清晰的介绍了一个 Vue 应用或者组件的生命周期：vue生命周期分为四个阶段第一阶段（创建阶段）：beforeCreate，created第二阶段（挂载阶段）：beforeMount（render），mounted。
2024-07-17 21:55:10
911
原创 使用 JS 实现单链表
*** 创建节点* 表示我们想要添加到链表中的项*/// 要加入链表元素的值// 当一个 Node 实例被创建时，它的 next 指针总是 undefined, 因为我们知道它会是链表的最后一项（push）// 指向链表中下一个元素的指针/*** 比较链表中的元素是否相等*/CreateNode 类作用：用于创建链表的节点。描述：这个类定义了单链表中的节点对象。ele和next。ele：存储节点的值，即要添加到链表中的项。next：指向链表中下一个节点的指针。
2024-07-16 09:58:38
604
原创 JavaScript面向对象编程
对象: 万物皆对象类: 对对象的细分实例: 类中的具体事物实例类对象1NumberObject"1"StringObject[1,2,3]ArrayObjectture、falseBooleanObjectnullNullObjectUndefinedUndefinedObjectfunction()FunctionObjectDateDateObject{name:"1"}ObjectObject/^$/RegExpObject。
2024-07-08 22:28:17
636
原创 深入理解JS中变量提升、作用域（链）和this关键字
定义一个函数有两种方式: 函数声明（和 函数表达式（语法: function name(arguments) { }对参数而言, primitive parameter是 传值, 对象是传引用语法: var fun = function (arguments) { }函数表达式中函数可以不需要名字, 即匿名函数1.2.3其它还可以用 Funtion 构造函数来创建函数在函数内部引用函数本身有3种方式, 比如 var foo = function bar () { };
2024-06-16 19:01:38
1185
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人