- 博客(147)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 全面解读 JavaScript 模块化：模块化工具与性能优化
JavaScript 模块化是构建现代应用程序的核心，能够帮助开发者以更高效、更清晰的方式组织和管理代码通过对 CommonJS 与 ES6 模块化的对比，我们能够更好地理解不同模块化方案的应用场景和优缺点ES6 模块化提供了更简洁、更强大的模块管理方式，而 Webpack 和 Rollup 等工具则使得模块化开发更加高效，并支持动态导入、代码分割等高级功能通过深入学习这些模块化技术，我们可以在开发过程中更好地组织代码、优化性能、提高开发效率，构建出可维护性更强、性能更优的前端应用。
2025-03-10 20:02:39
753
原创 解决浏览器兼容性难题：前端开发的调试与优化技巧
浏览器兼容性是前端开发中不可回避的挑战通过了解和应用不同浏览器间的差异，合理使用调试工具、CSS 预处理、JavaScript Polyfill 和 HTML5Shiv 等技术，能够有效解决兼容性问题。响应式设计和移动端优化也是提升用户体验的关键要素随着浏览器和设备的不断更新，我们的任务是持续关注兼容性问题，定期检查和优化前端代码，确保在各种环境下都能提供一致、优质的用户体验。
2025-03-10 15:01:10
1314
原创 【JavaScript 】垃圾回收机制进阶解析：提高性能的终极指南
垃圾回收机制是现代 JavaScript 引擎中不可或缺的一部分，它能够减轻我们的内存管理压力垃圾回收机制虽然自动化，但并非万能！！！了解其内部原理和优化策略，能够使我们避免性能瓶颈和内存泄漏，更好地利用它，提升代码的性能和稳定性通过减少对象生命周期、避免循环引用、优化事件监听器和使用合适的内存监控工具，我们能够将 JS 的内存管理发挥到极致，从而提高应用的响应速度和用户体验。
2025-03-09 13:04:46
578
原创 如何有效管理 JavaScript 中的内存：垃圾回收与最佳实践
垃圾回收（Garbage Collection，GC）是指自动管理内存的过程在 JavaScript 中，GC 通过自动识别不再需要的对象，释放这些对象占用的内存，从而避免内存泄漏垃圾回收机制使得开发者无需手动管理内存分配和释放，减少了内存管理上的负担，避免了内存泄漏和指针错误等常见问题垃圾回收是 JavaScript 中自动管理内存的机制，它使得我们无需手动管理内存分配和释放了解垃圾回收的原理和优化策略，有助于提高应用的性能，避免不必要的内存占用。
2025-03-09 11:01:04
570
原创 理解 JS 闭包：如何利用它提升代码的灵活性与性能
闭包是 JavaScript 的独特魅力之一，理解它能让你更深入地掌握函数的行为和内存管理。” —— 在 JavaScript 编程中，闭包是一个非常强大的概念，但也是许多开发者头疼的难题。闭包不仅使得 JavaScript 成为一种功能强大的编程语言，同时也引入了更为复杂的作用域、内存管理等问题。本文将深入探讨闭包的定义、原理、特性、优缺点以及如何正确使用闭包，帮助你真正理解这一核心概念。
2025-03-08 15:35:22
520
原创 从内存泄漏到性能优化：JavaScript 内存管理全攻略
"内存泄漏通常发生在你不小心丢失了对对象的引用，而这些对象的内存却没有被垃圾回收机制回收。" —— 这句话完美概括了内存泄漏的本质。内存泄漏是开发中常见且容易被忽视的问题，特别是在单页面应用（SPA）中，可能导致页面性能下降，甚至崩溃。本文将带你深入了解什么是内存泄漏，什么时候会发生内存泄漏，如何避免和弥补它，并从原理上讲解内存泄漏的产生原因。
2025-03-08 15:24:44
808
原创 JavaScript中的引用类型与内存地址
引用类型和内存地址的管理是JavaScript中的核心概念之一，掌握这一点有助于在日常开发中避免潜在的错误和性能问题在面试中，熟练掌握如何进行引用赋值、拷贝、以及如何理解数据的传递方式，将为你在前端技术面试中增添不少分希望本文对你理解引用地址的概念有所帮助。
2025-03-07 16:07:17
707
原创 深入理解JavaScript中的深拷贝与浅拷贝
浅拷贝是指创建一个新的对象或数组，这个新对象对原对象的属性值进行精确的复制然而，如果原对象的属性值是引用类型（如对象或数组），则浅拷贝只复制其引用，而不是具体的值深拷贝会完全复制原对象中所有的值，包括嵌套的对象和数组，从而创建一个完全独立的新对象，新旧对象之间不存在共享引用理解深浅拷贝不仅能够帮助你避免开发过程中的坑，也能够让你在前端面试中脱颖而出希望各位大家在学习路上不断精进，持续成长！
2025-03-07 15:53:48
362
原创 【前端跨域】WebSocket如何实现跨域通信？原理、实践与安全指南
WebSocket通过基于Origin字段的握手验证机制，是跨域实时通信需要在服务器端严格校验来源，并结合反向代理、TLS加密等技术保障安全性对于需要高频双向数据交换的应用（如在线协作、实时监控），WebSocket的跨域能力将成为关键优势。
2025-03-06 11:12:31
621
原创 【前端跨域】代理服务器如何解决跨域问题？
代理服务器通过 “隐藏” 跨域请求的源头，巧妙地绕过了浏览器的同源策略限制，是解决跨域问题的高效方案无论是本地开发的工具链集成，还是生产环境的Nginx反向代理，都能快速实现跨域通信然而，代理服务器也需权衡维护成本和安全风险。在实际项目中，可结合CORS等其他方案，选择最适合业务场景的跨域策略。
2025-03-06 08:30:00
453
原创 【前端跨域】CORS：跨域资源共享的机制与实现
CORS是一种W3C标准，旨在解决浏览器跨域请求的限制它通过在HTTP请求和响应中添加特定的头部信息，允许服务器声明哪些外部源可以访问其资源CORS的核心思想是：服务器通过设置响应头来告诉浏览器，哪些跨域请求是被允许的CORS是一种强大的跨域资源共享机制，通过服务器端的配置，可以有效地解决浏览器跨域请求的限制本文详细介绍了CORS的工作原理、实现方式以及在实际开发中使用通过合理配置CORS，我们可以在保证安全的前提下实现跨域通信，从而构建更加灵活和强大的Web应用。
2025-03-04 19:31:41
758
原创 JSONP解决跨域问题：原理、实现与局限
JSONP作为早期跨域问题的经典解决方案，凭借其简单性和广泛的兼容性，至今仍在某些场景中发挥作用。然而，其局限性（如仅支持GET请求、潜在的安全风险）也促使我们转向更现代的方案（如CORS、代理服务器）JSONP虽然实现起来较简单，但需谨慎使用！务必确保请求的服务器可信，并对回调函数名做严格校验，避免安全漏洞。
2025-03-04 09:17:26
368
原创 前端跨域问题初探：理解跨域及其解决方案概览
跨域（Cross-Origin）指的是浏览器尝试从一个源（Origin）向另一个源发起请求。源由协议（Protocol）、域名（Domain）和端口（Port）组成。如果两个URL的协议、域名或端口有任何不同，它们就被认为是不同的源。由于同源策略的限制，浏览器会阻止从一个源向另一个源发起的跨域请求，除非目标源明确允许跨域问题是前端开发中不可避免的挑战，但通过合理的技术选择，开发者可以有效地解决这一问题本文简要介绍了跨域问题的背景和几种常见的解决方案。
2025-03-03 21:53:21
1366
原创 【面试常问】在数据检查中，为什么要判断 0 和 255？——深入理解 IP 地址验证的核心逻辑
在验证 IP 地址时，判断每个部分的数字是否在 0 到 255 之间是至关重要的这不仅是因为 IPv4 地址的格式要求，还因为 0 和 255 在网络中有特殊的含义。通过严格的检查，就可以确保 IP 地址的合法性，避免因无效地址导致的网络配置错误或通信故障希望本次总结能帮助你更好地理解 IP 地址验证的核心逻辑！
2025-03-03 20:10:24
250
原创 【前端面试】如何不通过正则：验证IP地址合法性
通过这种不使用正则表达式的方法，我们可以更直观地理解 IP 地址的验证过程虽然正则表达式在处理字符串匹配时非常强大，但在某些情况下，使用更基础的字符串操作和逻辑判断也能达到同样的效果，并且更容易理解和维护我们也需要理解，如何不依赖正则，达到我们需要的目的。
2025-03-02 19:16:42
433
原创 Git分支管理实战：从混乱到高效的团队协作指南
为什么合并代码总出冲突？“该不该为每个需求创建分支？“主分支又崩了，谁的责任？如果你或团队曾为这些问题头疼，问题可能出在分支管理策略上。Git 的分支功能看似简单，但若缺乏规范，项目很容易陷入“分支地狱”——合并冲突频发、版本混乱、发布延迟。本文将带你深入 Git 分支管理的核心逻辑，解析 Git Flow、GitHub Flow、Trunk-Based Development 三大主流策略的适用场景，并附实战代码和避坑指南，助你从“能用 Git”进阶到“善用 Git”。
2025-03-01 19:18:22
901
原创 Git与GitHub：它们是什么，有什么区别与联系？
深入解析版本控制系统与代码托管平台的核心概念如果你还在犹豫，不妨现在动手：- 用 Git 初始化一个本地项目，感受版本控制的魅力；- 在 GitHub 上发布一段代码，也许它就是下一个开源项目的起点。技术工具的价值，终将在实践中显现
2025-03-01 15:34:44
2286
原创 掌握Git：从入门到精通的完整指南
Git是现代软件开发中不可或缺的工具，掌握它不仅能够提高个人开发效率，还能帮助团队更好地协作在本文中介绍了Git的基本概念、常用指令以及在工作中的应用场景之后，可以试着自己去尝试应用这些指令，尝试在项目中应用Git，逐步提升自己的版本控制技能。熟悉这些指令的使用无论是个人项目还是团队协作，Git都能为你提供强大的支持希望这篇分享可以帮到你顺利入门Git，在未来的开发工作中游刃有余！
2025-02-28 15:10:04
690
原创 【AI Coding】Windsurf：【Prompt】全局规则与项目规则「可直接使用」
什么是AI coding？什么是Windsurf？ 该怎么给WIndsurf添加Prompt，添加规则
2025-02-28 09:15:00
903
原创 3个Prompt魔法，让你的Windsurf项目被AI秒懂
GitHub trending开发者都在用的AI沟通秘籍三个魔法的核心价值上下文构建法：让AI理解你的项目背景和目标，避免“答非所问”。任务分解法：将复杂问题拆解为小任务，降低AI的理解难度。角色设定法：让AI扮演特定角色，提供更专业的建议。
2025-02-26 18:02:26
485
1
原创 怎样发送一张让对方满意的图片【附完整实现代码】
怎么发送一张让朋友、老板看到的第一眼觉得赏心悦目的图片。或许发送前进行适当的处理会得到更好的反馈，提升在对方心里的地位
2025-02-26 11:15:00
1410
2
原创 前端--性能优化【下篇】--框架优化与webpack优化
1. v-for添加key2. 路由懒加载3. 第三方插件按需引入4. 合理使用computed和watch5. v-for的同时避免使用v-if6. destory时销毁事件：比如addEventListener添加的事件、setTimeout、setInterval、bus.$on绑定的监听事件等7. 使用tree-shaking，只引入我们实际需要的代码，不是整个库8. 组件优化，可以使用`v-if`和`v-else`来减少不必要的DOM渲染9. CND优化
2023-10-24 16:28:47
584
3
原创 前端--性能优化【中篇】--html+css优化与图片优化
浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。也就是说，假如css选择器很复杂的话，渲染在浏览器里的CSSOM树，会呈现很高的层级，不是扁平化的，导致在查找具体选择器的时候难度增加，树的深度很高，难以快速精准定位。
2023-10-21 18:08:26
540
5
原创 前端--性能优化【上篇】--网络优化与页面渲染优化
link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址。用户与服务器的物理距离对响应时间也有影响。内容分发网络（CDN）是一组分散在不同地理位置的 web 服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。用于页面渲染和任务处理的技术，旨在提高应用程序的响应性和用户体验。它将长时间运行的任务分解成小的时间片段，这些任务在多个帧之间分散执行，以确保主线程不会长时间被阻塞，从而保持页面的流畅性
2023-10-18 17:53:13
1235
5
原创 React的基础概念JSX
此处一定要写babel ，表示这里写的不是JS，而是jsx，并且需要babel进行转义*///1.创建虚拟DOMconstVDOM/* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面renderVDOM'test'
2023-06-25 20:14:13
732
原创 React-错误边界与组件通信方式概述
错误边界目前只在 Class Component 中实现了，没有在 hooks 中实现（因为Error Boundaries的实现借助了this.setState可以传递callback的特性，useState无法传入回调，所以无法完全对标）;错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面。注意：只在生产环境（项目上线）起效。
2023-06-15 17:13:25
1654
1
原创 【JavaScript】44_DOM编程：节点的复制，直接修改+读取css样式
使用 cloneNode() 方法对节点进行复制时，它会复制节点的所有特点包括各种属性这个方法默认只会复制当前节点，而不会复制节点的子节点可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制在本案例中，像li是一个节点，里面的“孙悟空”是一个子节点，需要使用true来一块复制上
2023-03-30 13:15:04
628
1
原创 【JavaScript】43_DOM编程：DOM修改与demo
用于给一个节点添加子节点list.appendChild(li)可以向元素的任意位置添加元素1.要添加的位置 2.要添加的元素beforeend 标签的最后 afterbegin 标签的开始beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟元素）list.insertAdjacentElement(“afterend”, li)通过点击按钮，往页面中添加内容，修改内容，删除内容11、练习可以在表格中插入数据，删除数据容易被插入攻击的写法：区别于al
2023-03-28 14:42:29
336
1
原创 Vue3中其他的Composition API
/ let keyword = ref('hello') //使用Vue准备好的内置ref。shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。shallowReactive：只处理对象最外层属性的响应式（浅响应式）。作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。//告诉Vue这个value值是需要被“追踪”的。//通过customRef去实现自定义。//使用程序员自定义的ref。//自定义一个myRef。//告诉Vue去更新界面。
2023-03-23 12:24:18
472
9
原创 Vue3中的响应式原理与setup
在使用vue2时，我们需要注意，在赋值后再访问 this.someObject，此值已经是原来的 newObject 的一个响应式代理。通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。通过Reflect（反射）: 对源对象的属性进行操作。对属性的读取、修改进行拦截（数据劫持）。setup执行的时机。
2023-03-21 16:02:05
538
原创 vue3常用 Composition API
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。能够使用纯 TypeScript 声明 props 和自定义事件。setuo，使用了更少的样板内容，更简洁的代码。
2023-03-19 11:18:27
454
原创 【JavaScript】42_DOM：事件与文档的加载
事件（event）事件就是用户和页面之间发生的交互行为比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键…可以通过为事件绑定响应函数（回调函数），来完成和用户之间的交互。
2023-03-18 10:12:05
399
原创 【JavaScript】41_DOM编程：属性节点
属性节点（Attr）在DOM也是一个对象，通常不需要获取对象而是直接通过元素即可完成对其的各种操作如何操作属性节点?
2023-03-17 10:32:26
340
原创 【JavaScript】40_DOM编程：文本节点
在DOM中，网页中所有的文本内容都是文本节点对象, 可以通过元素来获取其中的文本节点对象，但是我们通常不会这么做我们可以直接通过元素去修改其中的文本 修改文本的三个属性。
2023-03-16 12:07:26
299
原创 Vue + Vite 项目搭建介绍
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create不过目前的话，官方建议使用vite去创建工程，cli处于维护状态。
2023-03-15 19:01:16
488
原创 【JavaScript】39_DOM编程：div的原型链
element.previousElementSibling 获取当前元素的前一个兄弟元素。element.nextElementSibling 获取当前元素的下一个兄弟元素。element.childNodes 获取当前元素的子节点（会包含空白的子节点）element.firstElementChild 获取当前元素的第一个子元素。element.lastElementChild 获取当前元素的最后一个子元素。element.children 获取当前元素的子元素。通过元素节点对象获取其他节点的方法。
2023-03-15 17:42:10
281
原创 【JavaScript】38_DOM编程初步
要使用DOM来操作网页，我们需要浏览器至少得先给我一个对象才能去完成各种操作所以浏览器已经为我们提供了一个document对象，它是一个全局变量可以直接使用document代表的是整个的网页。
2023-03-14 10:19:00
123
原创 【JavaScript】37_字符串
## split()- 可以根据正则表达式来对一个字符串进行拆分## search()- 可以去搜索符合正则表达式的内容第一次在字符串中出现的位置## replace()- 根据正则表达式替换字符串中的指定内容## match()- 根据正则表达式去匹配字符串中符合要求的内容## matchAll()- 根据正则表达式去匹配字符串中符合要求的内容(必须设置g 全局匹配)- 它返回的是一个迭代器
2023-03-13 17:09:53
100
原创 【JavaScript】36_正则表达式
或者将字符串中符合规则的内容提取出来所以要使用正则表达式，需要先创建正则表达式的对象new RegExp() 可以接收两个参数（字符串） 1.正则表达式 2.匹配模式letnewRegExp'a''i'//通过一个构造函数来创建一个正则表达式的对象//使用字面量来创建正则表达式:/正则/匹配模式ai\wnewRegExp'\w'lognewRegExp'a'// /a/表示，检查一个字符串中是否有a// 通过正则表达式检查一个字符串是否符合规则let"a"lettest。
2023-03-11 10:48:28
312
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人