- 博客(66)
- 收藏
- 关注
RSS订阅原创 浅拷贝的危害
特性浅拷贝深拷贝复制内容第一层的基本类型值所有层级的任何类型引用类型处理复制内存地址（共享）递归创建新对象（隔离）性能快，占用内存少慢，占用内存多副作用有（会污染原数据）无（完全隔离）使用场景确定没有嵌套数据或允许共享时需要完全独立的数据副本时当你需要对一个包含嵌套结构的对象进行完全独立的复制时，永远不要使用浅拷贝。务必根据你的需求选择或不可变更新模式。
2025-08-28 03:30:00
1233
原创 后台项目中常见的问题都有哪些，怎么解决？怎么避免？
设计阶段：考虑 scalability（扩展性）、reliability（可靠性）和 security（安全性）。进行威胁建模。编码阶段：遵守代码规范，进行代码审查，编写单元测试和集成测试。测试阶段：进行压力测试、混沌工程（如Netflix的Chaos Monkey），模拟故障。部署阶段：采用自动化CI/CD和渐进式发布策略。运行阶段：建立完善的监控、日志、告警系统（可观测性三大支柱）。复盘文化：出现线上事故后，不问责，而是进行Blameless Postmortem（免责事后分析）
2025-08-27 03:30:00
579
原创 使用jQuery动态操作HTML和CSS
优势简洁高效：用更少的代码完成更多工作。链式调用出色的跨浏览器兼容性：jQuery 处理了不同浏览器的差异。强大的选择器和AJAX功能。现状对于新项目，通常建议优先使用原生 JavaScript，因为现代浏览器 API 已经非常强大，且可以减少依赖。jQuery 在维护老项目或需要快速原型开发时依然非常有价值。理解 jQuery 的原理有助于更好地理解 DOM 操作。
2025-08-26 03:30:00
1444
原创 深入解析 document.write、innerHTML 和 innerText 的区别
场景推荐方法理由完全避免过时、危险、行为不可预测。插入用户提供的不可信内容innerText或安全，能有效防止 XSS 攻击。仅更新元素的可见文本innerText或高效且安全。动态创建复杂的 HTML 结构innerHTML谨慎使用强大，但必须确保内容字符串是安全可信的（例如，来自开发者自己定义的模板，而非用户输入）。最佳性能实践（创建结构）和虽然代码量多，但性能最优、最安全、最可控的方式。结合文档片段 (DocumentFragment)用于批量插入。
2025-08-25 03:30:00
597
原创 Async、await是什么？跟promise有什么区别？使用的好处是什么
是建立在 Promise 之上的语法糖，它的底层依然是 Promise。它的目的是为了让异步代码的书写和阅读更像同步代码，从而更简洁、更易维护。Promise：是用于处理异步操作的标准化对象（ES6）。：是基于 Promise 的新语法（ES2017），用于更优雅地使用Promise。Promise 是一个对象，它代表了一个异步操作的最终完成（或失败）及其结果值。三种状态：pending（进行中）fulfilled（已成功）rejected（已失败）// 模拟成功或失败。
2025-08-22 03:30:00
795
原创 Set和Map有什么相同和不同之处?
Set是一个值的集合（a collection ofvalues），类似于数组，但值必须是唯一的。Map是一个键值对的集合（a collection of），类似于对象，但键可以是任何数据类型。特性SetMapObject存储内容唯一的值键值对键值对键的类型任何类型（值即键）任何类型String 或 Symbol顺序插入顺序插入顺序ES6 后自有顺序（但较复杂）大小set.sizemap.size需手动计算迭代是是是（但需用等）性能对值操作优化对键操作优化未优化频繁增删。
2025-08-20 16:02:35
500
原创 JavaScript 异步编程详解
JavaScript 是单线程语言，异步编程是其核心特性之一。随着语言发展，JavaScript 的异步处理方式经历了从回调函数到 Promise，再到 async/await 的演进过程。
2025-08-16 08:30:20
915
原创 JavaScript 流程控制语句详解
流程控制语句是编程中用于控制代码执行顺序和逻辑的重要工具。JavaScript 提供了多种流程控制语句，主要包括条件语句和循环语句两大类。
2025-08-15 16:38:51
620
原创 JavaScript 中基本数据类型与引用数据类型的区别
理解这两种数据类型的区别对于避免JavaScript中的常见错误（如意外的引用修改）非常重要。// 'changed'（已改变）console.log(shallowCopy.b.c);// b获取的是a值的副本。引用类型：传递的是引用的副本（仍然是按值传递）栈内存中存储的是指向堆内存的指针（内存地址）基本类型：传递的是值的副本。
2025-08-12 15:16:41
791
原创 JavaScript 中类的声明与继承
console.log(`你好，我是学生${this.name}，今年${this.age}岁，读${this.grade}年级。console.log(`你好，我是${this.name}，今年${this.age}岁。console.log(`你好，我是${this.name}，今年${this.age}岁。// 输出: 你好，我是张三，今年25岁。console.log(`${this.name}正在学习...`);console.log(`${this.name}正在学习...`);
2025-08-11 15:27:48
727
原创 JavaScript 箭头函数与普通函数的区别
普通函数作为方法：this 指向调用对象value: 42,// 42箭头函数作为方法：this 通常指向外层（可能不是期望的）value: 42,getValue: () => this.value // 通常指向 window箭头函数的主要优势在于：更简洁的语法固定的 this 绑定（避免意外的上下文改变）更适合函数式编程风格普通函数仍然是许多场景的更好选择，特别是需要动态 this 或作为构造函数时。根据具体需求选择合适的函数形式是关键。
2025-08-07 09:18:51
760
原创 JavaScript 中 var、let 和 const 的区别与使用场景
/ 输出0,1,2。在现代JavaScript开发中，推荐优先使用const，其次是let，尽量避免使用var。// 不会成为window.z。// 不会成为window.y。// 成为window.x。var x = 2;：函数作用域（function-scoped）：存在暂时性死区（TDZ），声明前访问会报错。：块级作用域（block-scoped）
2025-08-06 17:44:47
918
原创 ES6与ES5核心区别详解
ES5函数ES6箭头函数关键区别特性ES5函数ES6箭头函数this绑定动态绑定词法绑定arguments对象有无构造函数可作构造函数不可原型属性有无特性ES5ES6+变量声明varlet/const函数定义function关键字箭头函数字符串普通字符串模板字符串数据结构异步处理回调函数面向对象原型继承class语法模块系统ES Modules默认参数逻辑或模拟直接支持迭代控制普通循环迭代器/生成器对象属性简写不支持。
2025-08-04 11:27:53
886
原创 ES6核心特性全面解析
ECMAScript 2015（简称ES6）是JavaScript语言的重大更新，带来了许多现代化特性，极大提升了开发效率和代码可读性。作为当前JavaScript的基石，ES6特性已被所有现代浏览器和Node.js支持。// 静态方法study() {ES6带来的主要改进：更清晰的语法（箭头函数、模板字符串）更好的变量作用域管理（let/const）增强的数据处理能力（解构、扩展运算符）现代化的异步编程（Promise、async/await）
2025-08-01 03:30:00
798
原创 现代Web开发四剑客：HTML、CSS、JavaScript与jQuery实战指南
HTML、CSS、JavaScript和jQuery构成了Web开发的坚实基础。通过本文的电商页面示例，我们看到了：HTML提供清晰的内容结构CSS实现美观的视觉呈现JavaScript添加交互逻辑jQuery优化开发效率掌握这"四剑客"，您就具备了构建现代化网站的核心能力。随着技术发展，虽然新框架层出不穷，但这些基础技术仍然是每位Web开发者必须扎实掌握的看家本领。
2025-07-31 03:30:00
611
原创 使用jQuery时的注意事项
合理使用jQuery可以极大提升开发效率，但也要注意避免过度依赖，特别是在现代Web开发环境中。：根据项目需求选择1.x(兼容IE6-8)、2.x(不兼容IE6-8)或3.x(现代浏览器)：在Vue/React/Angular等现代框架中谨慎使用jQuery。：新项目考虑使用现代JavaScript替代部分jQuery功能。：jQuery的许多功能现在已被标准API替代。：即使使用jQuery也要保持代码模块化。：利用jQuery的链式特性。：更现代的异步处理方式。：使用IIFE封装代码。
2025-07-30 03:30:00
503
原创 jQuery 中的 map() 循环遍历方法
jQuery 提供了map()方法用于遍历集合（如 DOM 元素集合、数组或对象）并对每个元素执行函数，然后返回一个新的 jQuery 对象或数组。
2025-07-29 03:30:00
432
原创 jQuery请求的方式
data: { key1: 'value1', key2: 'value2' }, // 发送的数据。在现代前端开发中，原生 Fetch API 和 Axios 逐渐取代了 jQuery 的 AJAX 功能。type: 'GET', // 或 'POST', 'PUT', 'DELETE' 等。dataType: 'json', // 预期返回的数据类型。console.log("请求完成");// 请求完成时执行（无论成功或失败）// 请求成功时的处理。// 请求失败时的处理。// 脚本加载完成后执行。
2025-07-28 16:30:13
644
原创 JavaScript 可视化图表
掌握上述要点后，可根据具体业务场景选择合适的库和实现方案，从简单图表到复杂的仪表盘（Dashboard）均能高效完成。：ECharts（内置中国地图）、Leaflet（轻量地图引擎）。使用 Plotly.js 或 Three.js 实现。展示数据随时间或连续变量的变化趋势。：游戏角色属性、产品竞争力分析。比较不同类别数据的大小或数量。通过颜色深浅展示二维数据密度。：3D 曲面图、3D 散点图。探索变量间的关系或聚类模式。：网站点击热区、温度分布。比较多个维度的性能表现。展示数据的占比关系。
2025-07-16 09:14:53
593
原创 JavaScript 树形菜单总结
树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。
2025-07-10 16:37:05
935
原创 富文本编辑器与时间控件的使用注意事项
在前端开发中，富文本编辑器和时间控件是两类常用但实现复杂度较高的交互组件。以下从设计、开发、性能、用户体验等维度总结使用时的注意事项，帮助你避坑。
2025-07-08 08:38:27
399
原创 JS 的树形菜单制作总结
树形菜单是 Web 开发中常用的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表等）。以下从核心原理、实现方式、关键技术点等方面进行总结，帮助全面掌握 JS 树形菜单的制作。
2025-07-08 08:26:54
569
原创 js递归总结
递归是计算机科学和编程中一种强大的技术，其核心思想是函数通过直接或间接调用自身来解决问题。递归的本质是将复杂问题分解为同类的更小子问题，直到子问题简单到可以直接求解。递归是一种强大的编程技术，适合解决具有递归结构的问题。它能够使代码简洁、逻辑清晰，但也存在性能和内存方面的挑战。理解递归的基本原理、适用场景以及优化方法，是成为一名优秀程序员的关键一步。在实际应用中，应根据问题的特性选择合适的实现方式，必要时结合迭代和优化技术以达到最佳效果。
2025-07-07 14:48:29
528
原创 使用插件时的注意事项总结
合理使用插件能显著提升开发效率，但需在安全性、兼容性、性能、可维护性等多维度进行权衡。建议采用最小化依赖原则，并建立插件引入的评估流程，确保插件真正服务于项目需求而非增加技术负债。
2025-07-01 18:32:21
586
原创 数据排序与模糊搜索总结
在数据处理和信息检索领域，数据排序和模糊搜索是两项基础且核心的技术，它们共同作用于提升数据的可用性和查询效率，广泛应用于数据库管理、搜索引擎、电商平台等场景。
2025-06-30 10:53:16
782
原创 Vue3 中 Axios 深度整合指南：从基础到高级实践引言总结
Vue3 与 Axios 的深度整合不仅是技术工具的组合，更是前端架构思维的升级。本指南将通过理论与实战结合的方式，帮助开发者突破传统请求模式的局限，在复杂项目中实现高效、稳定的数据交互方案。在写的详细一点，再加点代码示例深度思考中用户之前让我写了一个关于 Vue3 中 Axios 深度整合指南的引言总结，现在他们希望更详细一些，并且加入代码示例。首先，我需要回顾之前的回答，看看哪些部分可以扩展。
2025-06-26 14:41:33
939
原创 Java Script事件总结
通过以上总结，可全面掌握 JavaScript 事件机制的核心概念、绑定方式、传播流程及性能优化技巧，帮助在前端开发中实现高效、健壮的交互逻辑。
2025-06-25 03:30:00
771
原创 DOM（文档对象模型）全面总结
DOM是W3C标准接口，用于将HTML/XML文档转换为树形对象模型，使JavaScript可动态操作页面内容。文章系统介绍了DOM的核心概念、节点类型、操作API（查找/创建/修改/删除节点）、事件机制（绑定/传播/代理）及性能优化方法（减少重排/缓存查询）。同时涵盖现代API、虚拟DOM原理及兼容性处理，提供事件委托、样式替代DOM操作等最佳实践，帮助开发者高效操作页面内容。
2025-06-23 03:30:00
978
原创 用 HTML、CSS 和 JavaScript 实现抽奖转盘效果
顺序抽奖前言：这段代码实现了一个简单的抽奖转盘效果。页面上有一个九宫格布局的抽奖区域，周围八个格子分别放置了不同的奖品名称，中间是一个 “开始抽奖” 的按钮。点击按钮后，抽奖区域的格子会快速滚动，颜色不断变化，模拟抽奖过程。经过一定圈数的滚动后，会随机停止在某一个格子上，弹出提示框显示中奖奖品。
2025-06-22 03:30:00
575
原创 用 HTML、CSS 和 jQuery 打造多页输入框验证功能
多页输入框验证是指将复杂表单拆分为多个页面或步骤，逐步引导用户完成输入，并在每一步对用户输入进行验证的功能。提升用户体验：避免长表单带来的心理压力，分步引导用户完成输入简化数据处理：分步骤验证和收集数据，降低错误处理复杂度提高转化率：清晰的步骤指示和即时反馈可提高用户完成表单的概率注册流程（如账号创建、实名认证）多步骤订单表单（如购物结算、服务订购）复杂信息收集（如问卷调查、求职申请）
2025-06-21 14:30:00
533
原创 基于 jQuery 实现复选框全选与选中项查询功能
通过以上方案，可实现功能完整、性能优化的复选框全选与选中项查询功能，满足大多数前端项目需求。通过以上实现，你可以构建一个功能完善、交互友好的复选框全选与查询系统，满足大多数项目需求。
2025-06-20 14:12:01
648
原创 jQuery 总结
还可以使用快捷方式绑定常见事件，如click()、mouseenter()、mouseleave()等，$("div").click(function() { /* 代码 */ });等价于$("div").on("click", function() { /* 代码 */ });总之，jQuery 作为一款经典的 JavaScript 框架，在 Web 开发历史上留下了浓墨重彩的一笔，了解和掌握 jQuery 的核心知识和应用，对于前端开发者深入理解 Web 交互原理和提升开发能力具有重要意义。
2025-06-19 09:18:44
606
原创 JSON 与 AJAX
本文系统介绍了JSON与AJAX的核心技术与高级应用。JSON部分详解了语法规范、数据类型、与JS对象的区别，以及循环引用处理和大数据解析方案。AJAX部分对比了XHR与Fetch API的差异，展示了Axios拦截器等进阶用法，并提供了复杂数据交互、性能优化和安全防护的实践方案。文章还探讨了JSON5/BSON等新技术、GraphQL等替代方案，以及WebAssembly结合应用场景，最后总结了面试高频问题和生产环境最佳实践，为开发者构建高效Web应用提供了全面指导。
2025-06-12 10:35:10
1076
原创 Vue3 生命周期全面解析：从入门到精通
Vue3生命周期详解：从创建到销毁的全流程解析本文系统介绍了Vue3组件生命周期，包括其与Vue2的区别、各阶段钩子函数的使用方式及最佳实践。主要内容涵盖：1) 初始化、挂载、更新和卸载四个核心阶段的生命周期钩子；2) 组合式API与选项式API的对比使用；3) 常见应用场景如数据获取时机、副作用清理等；4) 高级功能包括动态组件处理和自定义钩子。文章通过代码示例和流程图，帮助开发者理解Vue3生命周期机制，并提供避免常见错误的实用建议，最后总结了两种API形式下生命周期钩子的执行顺序差异。
2025-06-11 08:55:23
489
原创 前端必备技能：jQuery实现中文输入法状态检测方案详解
但中文输入法存在一个特殊问题：用户在输入拼音阶段就会触发input事件。典型案例：用户输入"zhongwen"时，input事件会触发8次，但实际上用户期望只执行1次搜索。A[用户开始输入] --> B{触发compositionstart?showToast('请先完成中文输入');E --> F[触发compositionend]B -->|是| C[标记为输入中状态]B -->|否| D[立即处理输入]C --> E[用户选择候选词]F --> G[标记输入完成]G --> H[执行后续处理]
2025-06-09 17:49:01
919
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人