- 博客(57)
- 收藏
- 关注
RSS订阅
原创 《Web AI 时代：用 Node.js + Ollama + React 轻松打造智能对话机器人》
大家好，deepseek刚火起来的时候我就想，能不能我们通过本地部署来实现前端接口的调用。作为一名只会前端的同学，我能想到的就是通过node.js作为微后端来处理。但是一直没有机会实现，最近呢我实现了我这个想法通过这一系列技术栈，做到了一个类似gpt的前端页面，并且通过websocket做出了类似chatgpt的打字机模式。接下来，我来详细解释一下这个流程。
2025-03-15 22:11:46
1318
原创 React Hooks 的闭包陷阱问题
这是主包在面试中遇到的一道题目，面试官的问题是："这个页面初次展示出来时Count和step的值是什么，我点击按钮count和step的值有什么变化？“
2025-06-07 22:02:15
536
原创 代码输出题：异步&事件循环
本文解析了JavaScript事件循环机制及Promise的执行顺序。主要内容包括：1. 事件循环的处理流程（同步代码→微任务→宏任务）；2. 多个Promise示例的输出结果分析，展示了then()方法的执行条件和状态变化规则；3. Promise状态一旦改变不可逆转的特性；4. then()方法的参数穿透现象。通过具体代码示例，阐明了微任务和宏任务的执行优先级，以及Promise链式调用时状态传递的机制。
2025-05-28 22:01:46
628
原创 《从分遗产说起：JS 原型与继承详解》
原型是 JavaScript 中实现对象间共享属性和方法的机制。每个 JavaScript 对象（除了null）都有一个内部链接指向另一个对象，这个对象就是它的"原型"（prototype）。继承是面向对象编程中的一个核心概念，它允许一个对象（子对象）获取另一个对象（父对象）的属性和方法。在 JavaScript 中，继承主要通过原型链来实现。好的现在我们明确了什么是原型，什么是继承。简单来说，原型就是一个机制，每个对象内部都一个内部链接指向他的原型。
2025-04-27 21:25:45
1218
原创 《深拷贝和浅拷贝：对象的塑料兄弟情》
场景推荐方法合并配置、简单状态更新浅拷贝（...或表单重置、不可变数据管理深拷贝（JSON或高频操作且无嵌套数据浅拷贝需要隔离嵌套数据（如购物车）深拷贝是学校大人，我们都没救了。
2025-04-25 16:25:19
824
原创 《到底再指哪啊？！：解锁JavaScript中this的秘密》
this指的是当前执行代码的上下文对象。它的值在函数被调用时确定，而不是在函数定义时确定。this 就是执行的上下文，对于一个函数谁调用它this就指向谁，在全局中调用，this 指向全局对象。
2025-04-22 22:39:51
538
原创 《作用域大冒险：从闭包到内存泄漏的终极探索》
闭包（Closure）是 JavaScript 中的一个核心概念，它指的是 函数能够记住并访问其定义时的作用域（词法环境），即使该函数在其作用域之外执行。用人话来讲就是：闭包是可以访问到另一个函数作用域中变量的函数在循环嵌套的函数结构中，闭包就很容易理解了。内部函数可以访问到外部函数中的变量，但是外部函数不能访问到内部函数中的变量。// 外部函数的变量let outerVar = "我是外部变量";const outerConst = "我是外部常量";// 内部函数的变量。
2025-04-21 22:29:03
1068
原创 《网站要上线，钱包在躺平？我来教你怎么整！》
静态网站托管是一种将静态网页文件（如HTML、CSS、JavaScript、图片等）存储在云端服务器或对象存储中，并通过HTTP协议或CDN加速向用户提供访问的服务。静态网站托管仅适用于不含服务器端动态逻辑（如PHP、数据库交互）的纯前端文件。用户上传文件后，平台通过存储桶（如腾讯云COS）或专用托管服务（如GitHub Pages）直接分发内容，无需服务器端处理。当我们需要上线的网站是不含交互的纯前端文件就比较使用于静态托管；
2025-04-16 21:44:34
789
原创 《前端不止 UI，后端不止 API——聊聊 Web 的身份认证》
身份认证（Authentication）又称“身份验证”、“鉴权”，是指通过一定的手段，完成对用户身份的确认。日常生活中的身份认证随处可见，例如：高铁的验票乘车，手机的密码或指纹解锁，支付宝或微信的支付密码等。在 Web 开发中，也涉及到用户身份的认证，例如：各大网站的手机验证码登录、邮箱密码登录、二维码登录等。Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用 于控制 Cookie 有效期、安全性、使用范围的可选属性组成。
2025-03-31 21:41:17
1148
原创 《前端人的 SQL 觉醒：曾经不屑一顾，如今真香》
数据库（database）是用来组织、存储和管理数据的仓库。当今世界是一个充满着数据的互联网世界，充斥着大量的数据。有很多，比如出行记录、消费记录、 浏览的网页、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数 据进行新增、查询、更新、删除等操作。SQL（英文全称：Structured Query Language）是结构化查询语言，专门用来访问和处理数据库的编程语言。能够让。
2025-03-30 21:52:26
1007
原创 《Express：Node.js 里的 “闪电侠”》
官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的Web 开发框架。通俗的理解：Express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建 Web 服务器的。Express的本质：就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。console.log('这是要最简单的中间件函数'）//注意：在当前中间件中的业务处理完毕之后，必须调用next()函数//表明把流转关系转交给下一个中间件或者路由next()
2025-03-29 15:29:27
854
原创 《npm包——Node.js舞台上的“神秘道具”，你用对了吗？》
这个嘛？当然不是啦：Node.js 中的第三方模块又叫做包。就像电脑和计算机指的是相同的东西，第三方模块和包指的是同一个概念，只不过叫法不同。
2025-03-28 21:01:34
1031
原创 《TypeScript 面试八股：高频考点与核心知识点详解》
因为主包还是主要学习js，ts浅浅的学习了一下，在简历中我也只会写了解，所以我写一些比较基础的八股，如果是想要更深入的八股的话还是建议找别人的。方法重载是指在一个类中定义多个同名的方法，但要求每个方法具有不同的参数的类型或参数的个数。基本上，它在派生类或子类中重新定义了基类方法。该方法必须与父类中的名称相同。它必须具有与父类相同的参数。必须存在IS-A关系或继承。假设有一个导入语句;首先，编译器会尝试定位需要导入的模块文件，通过绝对或者相对的路径查找方式；
2025-03-25 21:25:53
909
原创 《Vue 和 React 谁更懂 MVVM？一场前端架构的巅峰对决》
前端MVVM（Model-View-ViewModel）浪潮是指前端开发领域中采用MVVM设计模式的框架和架构的普及和流行趋势。Model（数据模型）View（视图层）和ViewModel（视图模型）。这种模式通过ViewModel层作为Model和View之间的桥梁，实现数据的双向绑定，从而简化用户界面的事件驱动编程方式。MVVM）是一种 OOP 软件架构模式，它的核心是将我们的应用程序的逻辑与视图做分离，提升代码可维护性与应用健壮性。
2025-03-24 22:30:23
1245
1
原创 《TypeScript 高级类型详解：从泛型到条件类型》
经过检查， 我们现在可以看到参数和返回类型使用的是相同的类型。映射类型与本类型操作部分的其他功能配合得很好，例如，这里有一个使用条件类型的映射类型 ，它根 据一个对象的属性 pii 是否被设置为字面意义上的 true ，返回 true 或 false。这允许我们使用我们的通用类型变量 Type 作为我们正在处理的类型的一部分，而不是整个类型，给我们更大的灵活性。就像用类型守卫缩小范围可以给我们一个更具体 的类型一样，条件类型的真正分支将通过我们检查的类型进一步约束泛型。
2025-03-23 16:12:22
608
原创 《对象类型也有脾气？带你读懂 TypeScript 的“性格”》
在JavaScript中，我们分组和传递数据的基本方式是通过。在TypeScript中，我们通过来表示这些对象。
2025-03-21 20:28:30
1178
原创 《深入理解 TypeScript：函数类型与泛型全解析》（万字长文）
函数的 void 返回类型可以产生一些不寻常的，但却是预期的行为。 返回类型为 void 的上下文类型并不强迫函数不返回东西。另一种说法是，一个具有 void 返回类型的 上下文函数类型（ type vf = () => void ），在实现时，可以返回任何其他的值，但它会被忽略。 因此，以下 （）=> void 类型的实现是有效的：
2025-03-20 22:34:56
1097
原创 《跨域全解析：从同源策略到 CORS、代理、JSONP，彻底解决跨域难题》
跨域指的是浏览器出于同源策略（Same-Origin Policy, SOP）的安全限制，阻止网页向不同源的服务器发送请求。例如，A 页面运行在，而它试图请求，就会触发跨域问题。跨域问题通常发生在前端请求后端接口时，比如fetch或访问不同源的数据。同源策略协议、域名、端口号必须相同，否则浏览器会限制某些跨域行为。访问✅（同源）访问❌（端口不同）访问❌（协议不同）访问❌（域名不同）AJAX请求（fetch、XMLHttpRequest）🚫iframe读取跨域cookie🚫WebSocket。
2025-03-18 22:12:32
918
原创 《深入理解 TypeScript 类型缩小：让你的代码更安全、更智能》
在 TypeScript 中，类型缩小（Type Narrowing）是指通过某些方式将变量的类型范围缩小到更具体的类型。这是 TypeScript 类型系统的重要特性，可以帮助开发者编写更安全、更易读的代码。举个栗子：我们现在想要实现一个函数，我们的需求是我们传入两个参数一个padding和一个input，然后我们想要让padding是number时就给input添加number个空格；如果padding是string那input就是padding。
2025-03-18 21:53:22
1180
原创 《TypeScript 类型健身房：让你的代码更“强壮”》
第一种组合类型的方法是联合类型。联合类型是由两个或多个其他类型组成的类型，表示可能是这些类 型中的任何一种的值。我们将这些类型中的每一种称为联合类型的成员。// 正确// 正确// 错误。
2025-03-17 22:01:22
1018
原创 《TypeScript 快速上手：类型、编译与严格模式的简明教程》
在引入编程社区 20 多年后，JavaScript 现在已成为有史以来应用最广泛的跨平台语言之一。JavaScript 最初是一种用于向网页添加微不足道的交互性的小型脚本语言，现已发展成为各种规模的前端和后端应 用程序的首选语言。虽然用 JavaScript 编写的程序的大小、范围和复杂性呈指数级增长，但 JavaScript 语言表达不同代码单元之间关系的能力却没有。
2025-03-16 21:22:00
1144
原创 《虚拟 DOM 与 Diff 算法：高效渲染的幕后英雄》
虚拟 DOM（Virtual DOM）是现代前端框架（如 React、Vue 等）中用于优化页面渲染性能的核心技术。它是真实 DOM 的轻量级 JavaScript 对象表示，通过抽象和高效的操作方式，减少直接操作真实 DOM 的开销。
2025-03-14 19:48:53
1098
原创 《ECharts ：不强不大，做点可视化》
CDN（Content Delivery Network，内容分发网络）是一种分布式网络架构，用于将静态资源（如图片、CSS、JavaScript 文件等）快速、高效地分发给用户。CDN 通过在全球多个节点部署服务器，将资源缓存到离用户最近的节点，从而减少延迟、提高加载速度。举个栗子：
2025-03-13 22:16:19
1533
原创 《又是二叉树？递归与回溯的经典应用》
这道题的递归思想是这样的：我们分别递归左右子树的最大深度，并且在递归过程中不断取他们的最大值，最后加上根节点就能得到最大深度了。分别求出其左右子树的高度，然后如果差值小于等于1，则返回当前二叉树的高度，否则返回-1，表示已经不是二叉平衡树了。这道题目要求从根节点到叶子的路径，所以需要前序遍历，这样才方便让父节点指向孩子节点，找到对应的路径。递归的过程中依然是遇到空节点了为终止，返回0，表示当前节点为根节点的树高度为0。参数：当前传入节点。给定二叉树 [1,2,2,3,3,null,null,4,4]
2025-03-13 21:43:00
760
原创 《浏览器的时间旅行者：History API 与数据刷新的奇幻漂流》
上一世，我没搞懂History API 与数据刷新，被面试官拷打，被周天辉大人训斥。（没能让周天辉大人尽性真是抱歉）；这一世，我携这篇博客霸气归来，势必要拿回属于我的一切！！！
2025-03-12 21:51:18
1118
原创 《解锁 Lodash：简化复杂逻辑的实战技巧》
Lodash 是一个 JavaScript 实用工具库，提供了大量高效、可靠的函数，用于简化数组、对象、字符串等数据结构的操作。是 Lodash 中的一个实用函数，用于延迟执行某个函数。：涉及嵌套对象或大数据时，优先使用 Lodash 的优化方法。，但提供了更简洁的 API 和更好的可读性。适用于延迟显示提示、执行动画、提交表单等场景。：可以直接传递参数给延迟执行的函数。功能类似，但 API 更友好。：延迟的时间（以毫秒为单位）。：避免全量导入，减少打包体积。相当，适用于大多数场景。：要延迟执行的函数。
2025-03-12 21:10:42
991
原创 《变量不持久？Cookie 易失效？存储江湖谁主沉浮！》
变量存储也可以解决缓存问题甚至可以实现内存+硬盘双缓存。浏览器缓存更加安全，所以我们要关注这些不同，选择更适合我们的方法。希望大家面试顺利，不要被拷打奇怪的问题。
2025-03-11 21:40:54
968
原创 《防抖 vs 节流：如何选择适合你的高频事件优化方案》
防抖是指在事件被触发后，等待一段时间，如果在这段时间内事件没有被再次触发，则执行函数；如果在这段时间内事件又被触发，则重新计时。在我们选择节流还是防抖时，一定要根据使用场景来选择，不然用了不如不用。如果需要确保事件触发后只执行一次（如输入框搜索），使用 防抖。如果需要限制事件触发的频率（如滚动事件），使用 节流。“喜欢小猫，喜欢花，喜欢你。end......
2025-03-11 20:16:02
410
原创 《垃圾回收：浏览器的“内存管家”》
垃圾回收：JavaScript代码运行时，需要分配内存空间来储存变量和值。当变量不在参与运行时，就需要系统收回被占用的内存空间，这就是垃圾回收。
2025-03-10 21:17:57
353
原创 《从事件冒泡到处理：前端事件系统的“隐形逻辑”》
我将从事件从出现到被处理的各个过程来介绍事件机制：这张图片给我们展示了react事件的各个阶段，我们可以看到有DOM，合成事件层，还有事件处理函数。我觉得我们如果想要了解事件机制首先要知道的就是事件从注册到执行结束的全过程： React 事件的完整生命周期：React的事件绑定与原生的事件绑定不同，React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不
2025-03-09 20:18:13
1044
原创 《闭包：从柯里化到内存泄漏，开发中的双刃剑》
闭包（Closure）是指一个函数与其引用环境（lexical environment）的组合。函数内部定义的函数（内部函数）可以访问外部函数的变量。即使外部函数已经执行完毕，内部函数仍能保留对外部函数作用域的引用，从而“记住”这些变量。用我们自己的话说就是，内部函数可以访问到外部函数但是外部函数却不能访问到内部函数中的变量。我觉得，闭包被经常提及的原因是我们在开发中采用的模块化思想，它的基础就是闭包。只有模块之间互相不影响，才能实现模块化。因此了解闭包的机制是开发的基础。
2025-03-09 16:42:27
1091
原创 《原型链的故事：JavaScript 对象模型的秘密》
当访问对象的属性或方法时，JavaScript 会先在对象自身查找，如果找不到，则沿着原型链向上查找，直到找到或到达原型链的顶端（是 JavaScript 中实现继承的核心机制。每个对象都有一个内部属性。通过原型链，对象可以访问其原型对象的属性和方法。属性，指向一个对象（称为原型对象）。通过原型链，可以实现对象之间的继承。关键字创建实例时，实例的。向上查找，直到找到或到达。访问），指向其原型对象。
2025-03-08 22:47:11
548
原创 《二叉树层次遍历十连击：用十道题目彻底征服 BFS》
二叉树的层序遍历（也称为广度优先遍历，BFS）是一种按层次遍历树节点的方法。：首先将根节点放入队列中。：当队列不为空时，执行以下操作：取出队列中的第一个节点，并访问它。将该节点的左子节点和右子节点（如果存在）依次放入队列中。：直到队列为空，遍历结束。只要我们掌握基础知识，我们就，只需要增加一些逻辑。来吧！打爆它们！！！
2025-03-07 14:11:02
834
原创 《V8 引擎狂飙，Node.js 续写 JavaScript 传奇》
Node.js是一个跨平台JS运行环境，使开发者可以搭建服务器端的JS应用程序使用 Node.js 编写服务器端程序✓ 编写数据接口，提供网页资源浏览功能等等✓ 前端工程化：为后续学习 Vue 和 React 等框架做铺垫前端工程化：开发项目直到上线，过程中集成的所有工具和技术Node.js 是前端工程化的基础（因为 Node.js 可以主动读取前端代码内容）概念：项目是由很多个模块文件组成的好处：提高代码复用性，按需加载，独立作用域使用：需要标准语法导出和导入进行使用。
2025-03-06 21:10:46
1508
2
原创 《一起走进遍历二叉树的奇妙之旅：递归、迭代与统一迭代法全详解》
二叉树的遍历是指按照某种顺序访问树中的所有节点。和。深度优先遍历是从根节点出发，沿着一条路径尽可能深地访问节点，直到到达叶子节点，然后回溯到上一个节点继续遍历。：根节点 → 左子树 → 右子树：复制树、表达式树的前缀表示。：左子树 → 根节点 → 右子树：二叉搜索树的中序遍历结果是有序的。：左子树 → 右子树 → 根节点：删除树、表达式树的后缀表示。广度优先遍历是按层次从上到下、从左到右访问节点。通常使用队列实现。：从上到下、从左到右逐层访问节点。：求树的深度、按层打印节点。
2025-03-05 22:10:03
627
原创 《首屏优化指南：解决页面闪烁的 5 大方案》
CSS 文件未加载完成时，浏览器会先渲染 HTML 内容，导致页面样式错乱，随后 CSS 加载完成，页面重新渲染，出现闪烁。是前端开发中常见的性能问题，通常是由于页面加载过程中资源未完全加载或渲染顺序不当导致的。：单页应用（SPA）在客户端渲染时，首屏内容需要等待 JavaScript 加载完成后才能显示，导致白屏或闪烁。：同步加载的 JavaScript 文件阻塞了页面的渲染，导致页面内容延迟显示。：图片或字体资源未加载完成时，页面布局可能发生变化，导致闪烁。延迟加载非首屏图片。延迟加载非首屏内容。
2025-03-05 20:21:01
853
原创 《异步江湖：XHR、Promise 与 Event Loop 的恩怨情仇》
Promise是 JavaScript 提供的一种用于处理异步操作的对象。它用于解决回调地狱问题，使异步代码更易读、可维护。Promise 对象表示一个尚未完成但预计会在未来完成的操作进行中（pending）：初始状态，既没有成功也没有失败。已完成（fulfilled）：操作成功，返回一个值（由resolve()处理）。已拒绝（rejected）：操作失败，返回一个错误（由reject()处理）。
2025-03-05 20:05:04
1233
原创 《AJAX：前端异步交互的魔法指南》
Axios是一个基于Promise的现代化 HTTP 客户端库，专为浏览器和 Node.js 设计，用于简化前端与后端的数据交互。它封装了底层 HTTP 请求细节，提供了更简洁、易用的 API，并支持拦截器、自动 JSON 转换、请求取消等高级功能，是替代原生和Fetch API的流行选择。核心特性特性说明基于 Promise天然支持异步编程，避免回调地狱，可使用简化代码。浏览器 & Node.js 支持同一套代码兼容浏览器（XHR）和 Node.js（HTTP 模块）。自动 JSON 转换。
2025-03-04 21:20:15
903
原创 《JavaScript解题秘籍：力扣队列与栈的高效解题策略》
输入: ["10", "6", "9", "3", "+", "-11", " * ", "/", " * ", "17", "+", "5", "+"]这道题简直是为了栈定制的一道题，我们的思路就是先把字符串里的元素压入栈中，在这里我们设置一个map组，只让他压入朝向一边的括号。所以就是用栈来存放，那么栈的目的，就是存放遍历过的元素，当遍历当前的这个元素的时候，去栈里看一下我们是不是遍历过相同数值的相邻元素。给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串，判断字符串是否有效。
2025-03-03 20:19:50
845
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人