- 博客(221)
- 资源 (8)
- 收藏
- 关注
RSS订阅
原创 前端性能优化：理论与实战「强烈建议实践收藏慢慢看，干货太多」
前端性能优化一直是开发过程中不可忽视的重要环节，尤其是随着前端技术的不断进化，性能的提升不仅仅是让页面“快一点”，更是让用户在各种网络环境下都能获得流畅的体验。作为一名高级前端开发工程师，我将从理论和实践结合的角度，详细阐述性能优化的各个方向。前端性能优化贯穿了网络、页面渲染、JavaScript执行、图片处理、打包构建和框架使用等多个环节，最终目的是提升用户体验，减少加载时间，提升交互响应速度。网络优化。
2024-10-22 10:40:44
1246
原创 Vue3应用之使用Vite搭建Vue3项目以及TypeScript、Vue Router、Vuex、Ant Design的使用
尤大的 Vue3.0 已经发布有一阵子了， 已经很成熟了。今天想起来，是时候该上手体验分享一波了。前言大家都知道，在 Vue3 生态系统中有一个新构建工具 Vite ，它的开发服务器比 Vue CLI 快 10 ~ 100倍，是不是很好奇？具体的内容可以移步至：迟到的 Vue3.0 与 Vite 的体验学习总结 的 七、Vite 与 Vue CLI 阅读。本文将主要分享如何使用 Vite 来创建一个 Vue3.0 的项目，并且结合相关内容（TypeScript、Vue Router、Vuex、An.
2021-01-05 18:06:59
16163
11
原创 2024最新最全的前端面试题集锦（2024 持续更新中...敬请关注）
工作以来，感觉自己接触到的东西还是挺多的，但是当我面试的时候，就会发现各种问题，很多知识点都是模棱两可，答得不全面。究其原因，还是没有吃透这些内容。所以我决定，用几个月的时间，将我们大前端的大部分精选面试题进行整理，将大部分知识点进行归纳总结，为自己也为其他小伙伴们提供一份面试学习参考。
2020-12-17 14:10:34
24264
11
原创 高级Web前端必会面试题知识点，大厂面试必备
高级Web前端工程师必会面试题，这里只是整理一些范围知识点，并没有特别具体的面试题目，只要把这些知识点搞明白了，面试题都不是问题。文档持续更新中。。。加油骚年！！
2020-08-30 23:30:24
6338
1
原创 「数据可视化 D3系列」入门第十三章：地图可视化全面指南
通过本指南，您将掌握D3.js地图可视化的完整技术栈，从基础地理数据格式到高级交互功能，能够创建专业级的地理数据可视化应用。
2025-04-23 08:54:28
612
原创 「数据可视化 D3系列」入门第十二章：树状图详解与实践
树状图是一种常见的层次结构可视化方式，它能够清晰地展示数据之间的父子关系。本文将详细介绍如何使用D3.js创建树状图，并解析相关核心API的使用方法。
2025-04-22 16:30:48
858
原创 「数据可视化 D3系列」入门第十一章：力导向图深度解析与实现
力导向图是一种通过物理模拟来展示复杂关系网络的图表类型，特别适合表现社交网络、知识图谱、系统拓扑等关系型数据。其核心原理是通过模拟粒子间的物理作用力（电荷斥力、弹簧引力等）自动计算节点的最优布局。
2025-04-18 17:57:14
873
原创 「数据可视化 D3系列」入门第十章：饼图绘制详解与实现
功能： 生成圆形、扇形或环形路径核心参数：2. d3.pie() 布局函数功能： 将原始数据转换为角度数据特点：自动计算每个数据项的起始/结束角度支持排序功能（）可设置起始角度（）3. arc.centroid() 中心点计算数学原理： 应用场景：标签定位交互元素定位动画中心点4. 颜色方案：10种分类颜色其他方案：：8种强调色：12种柔和色二、饼图实现代码👇 完整代码👇 运行效果1. 数据转换流程：2. 视觉元素构成：3. 交
2025-04-18 17:56:11
748
原创 「数据可视化 D3系列」入门第九章：交互式操作详解
在上一章的柱状图基础上，我们增加了交互功能，让图表能够响应用户的操作。下面我将详细解释交互式操作的实现方式，并展示如何为下一章的饼图做准备。
2025-04-18 14:31:13
1083
原创 「数据可视化 D3系列」入门第八章：动画效果详解（让图表动起来）
在数据可视化中，动画效果不仅能增强视觉吸引力，还能帮助观众更好地理解数据变化过程。本章将详细介绍如何使用D3.js为图表添加流畅的动画效果。
2025-04-18 10:10:37
1288
原创 「数据可视化 D3系列」入门第七章：坐标轴的使用
坐标轴是数据可视化中不可或缺的元素，它能帮助观众理解数据的尺度和范围。在D3.js中，坐标轴通常与比例尺配合使用，将抽象的数据映射为可视化的刻度标记。
2025-04-17 09:45:13
750
原创 「数据可视化 D3系列」入门第六章：比例尺的使用
比例尺是 D3.js 中非常重要的概念，它能帮助我们优雅地将数据从定义域映射到可视化的值域中。下一章我们将学习坐标轴的使用，它经常与比例尺配合使用。
2025-04-17 09:21:55
1101
原创 「数据可视化 D3系列」入门第五章：绘制第一个D3图表
本章将通过创建基础柱状图，一起来体验D3数据可视化的完整流程。以下是我们将构建的图表效果：
2025-04-16 09:32:05
915
原创 「数据可视化 D3系列」入门第四章：DOM操作与元素管理
本章将深入探讨D3.js中元素的选择、插入、删除和修改等核心操作，为后续图表绘制打下坚实基础。
2025-04-16 09:19:28
878
原创 「数据可视化 D3系列」入门第三章：深入理解 Update-Enter-Exit 模式
D3.js 的数据绑定遵循一个强大的模式，称为 **Update-Enter-Exit** 模式，这是D3处理数据与DOM元素匹配的核心机制。
2025-04-15 09:51:46
1000
原创 「数据可视化 D3系列」入门第二章：选择器与数据绑定
D3.js的核心在于 选择元素 和绑定数据，这是所有可视化操作的基础。本章将深入探讨这两个关键概念。
2025-04-15 09:44:57
968
原创 「数据可视化 D3系列」入门第一章：Hello D3.js
D3.js（Data-Driven Documents）是一个强大的JavaScript库，它让我们能够用数据驱动文档的变换。让我们从一个简单的"Hello World"示例开始，逐步探索D3的核心概念。“D3不是图表库，而是数据与DOM绑定的强大工具。
2025-04-14 09:28:53
1096
原创 「数据可视化 D3系列」之开篇：开启数据可视化之旅
欢迎来到《快速学习D3.js》系列！在这个系列中，我们将一起从零开始掌握D3.js（Data-Driven Documents），一个强大的JavaScript库，用于创建动态、交互式的数据可视化。无论你是前端开发者、数据分析师，还是对数据可视化感兴趣的学习者，本系列都将帮助你：✅理解D3.js的核心概念（选择集、数据绑定、比例尺等）✅快速上手常见图表（柱状图、折线图、散点图、力导向图等）✅实现交互式可视化（鼠标悬停、缩放、拖拽等）✅优化性能，让你的图表更流畅。
2025-04-14 09:22:53
621
原创 「JavaScript深入」Socket.IO：基于 WebSocket 的实时通信库
Socket.IO 作为 WebSocket 的增强版本，在实时通信领域具有广泛的应用。它提供了事件驱动、自动回退、广播机制等功能，使其在即时聊天、协作编辑、多人游戏等场景中表现出色。如果需要低功耗 IoT 设备通信，可以考虑 MQTT；如果是高效的音视频通信，WebRTC 是更好的选择。不同的应用场景需要选择合适的实时通信技术，以保证系统的稳定性和性能。
2025-03-20 14:38:11
1330
1
原创 「JavaScript深入」轮询（Polling）：基础的实时通信方式
轮询技术作为实时通讯的基础方案，虽然在新一代技术面前略显陈旧，但在特定场景下仍具有实用价值。开发者应充分理解各种技术的优缺点，根据实际需求选择最合适的解决方案。随着HTTP/3和WebTransport等新技术的发展，实时通讯领域将迎来更多创新和突破。
2025-03-20 11:00:41
1009
原创 「JavaScript深入」WebSocket：高效的双向实时通信技术
在现代 Web 开发中，实时通信是许多应用的核心需求，例如在线聊天、实时协作、游戏对战等。WebSocket 是一种基于 TCP 的全双工通信协议，它允许客户端和服务器之间建立持久连接，并在双方之间高效地传输数据。
2025-03-19 16:12:08
1424
原创 「JavaScript深入」Server-Sent Events (SSE)：轻量级实时通信技术
在现代 Web 应用中，实时数据推送成为了关键需求之一。例如，在股票行情、天气更新、社交通知等应用场景中，客户端需要能够持续接收服务器端的最新数据。Server-Sent Events (SSE) 是一种基于 HTTP 协议的轻量级实时通信技术，能够让服务器主动向客户端推送消息。
2025-03-19 15:33:19
1102
原创 「JavaScript深入」Web Components：构建可重用的跨框架组件
在现代 Web 开发中，组件化开发已经成为一种主流趋势。无论是 React、Vue 还是 Angular，组件化开发都极大地提高了代码的可维护性和可重用性。然而，这些框架的组件通常只能在特定的框架生态中使用，跨框架的组件复用一直是一个挑战。Web Components 的出现为这一问题提供了一个原生解决方案。下面将深入探讨 Web Components 的核心概念、技术细节以及其在实际开发中的应用。
2025-03-13 18:45:44
1253
原创 「JavaScript深入」Canvas 全面指南
Canvas 是 HTML5 引入的一个用于绘制图形的元素，通过 JavaScript 可以动态地在网页上绘制和操作图像、图形、动画等。Canvas 提供了一块可编程的位图区域，开发者可以通过绘图上下文对其进行绘制
2025-03-13 10:38:31
1355
原创 「JavaScript深入」二进制数据处理详解「Blob、File、FileReader、ArrayBuffer、Typed Arrays、DataView」
JavaScript 主要用于处理文本数据，但在更复杂的应用（如图像、音频、视频处理）中，二进制数据的操作变得尤为重要。是一种用于表示通用、固定长度的原始二进制数据缓冲区，它是处理二进制数据的基础，可以用于存储各种类型的数据，必须通过。在 JavaScript 中都是用于处理二进制数据的对象，在部分场景两者都能胜任，但擅长的场景有所区别。Blob 代表不可变的二进制数据块，通常用于处理文件、图像、音频等类型的数据。中的数据，允许以任意的字节序（大端或小端）读写不同类型的数据。
2025-03-12 17:57:33
872
原创 「JavaScript深入」理解 JavaScript 中的不可变对象（Immutable Object）
不可变对象是 JavaScript 中管理状态的关键概念，特别是在 React、Redux 和函数式编程中。它可以提升代码的可预测性、可维护性，并优化性能。
2025-03-12 15:43:33
947
原创 「JavaScript深入」解析 Fetch API
Fetch API 是 JavaScript 提供的基于 Promise 的现代化网络请求接口，它提供了比 XMLHttpRequest 更加强大和灵活的方式来处理 HTTP 请求。
2025-03-11 14:27:30
492
原创 「JavaScript深入」理解 Object.defineProperty 与 Proxy
在 JavaScript 中，Object.defineProperty 和 Proxy 是两种强大的机制，用于拦截和处理对象属性的读写操作。Vue.js 的响应式系统正是基于它们实现的。本文将详细介绍这两者的基础用法、区别以及它们在 Vue 响应式系统中的应用。
2025-03-11 11:22:32
1004
原创 「Echarts 实践」Echarts 柱状图点击事件的实现方法【超实用方案 建议点赞收藏】
在前端开发过程中，柱状图举例应用突出：例如点击柱形区域时，完成相关操作或跳转至指定界面。尽管Echarts提供了丰富的事件监听机制，但在实现过程中，不同场景对点击调用的需求不完全相同。本文将详细介绍如何实现柱状图点击事件，并提供实现整条柱形区域点击的方法。
2025-01-10 11:19:31
2074
1
原创 记一次 Vue3 中 ref 初始化未完成导致方法未触发的解决方案
在 Vue3 项目中，ref 的使用需要注意其初始化时机，以避免在值未赋值时调用方法。通过使用 nextTick、onMounted 等技术，可以有效避免此类问题。
2024-11-29 14:45:22
545
原创 「JavaScript深入」熟悉事件循环Event Loop吗？说说事件循环机制和宏任务微任务「 拿走不谢」
「JavaScript深入」熟悉事件循环吗？说说事件循环机制和宏任务微任务
2024-10-17 09:36:39
1183
原创 「JavaScript深入」彻底搞懂JS原型与原型链
「JavaScript深入」彻底搞懂JS原型与原型链：原因、使用class实现继承、原型、原型链、prototype和proto
2024-09-28 16:20:13
1277
原创 「JavaScript深入」聊一聊 new操作符具体干了什么？
「JavaScript深入」聊一聊 new操作符具体干了什么：概念「在JavaScript中，`new` 操作符用于创建一个给定构造函数的实例对象」、流程、手写一个new
2024-09-27 17:42:37
642
原创 「JavaScript深入」彻底理解JS中的闭包
彻底理解JS的闭包问题：概念、示例、实用的闭包、用闭包模拟私有方法、一个常见错误：在循环中创建闭包、优劣、图解闭包、闭包在实际中的应用
2024-09-25 09:44:21
1569
原创 「JavaScript深入」一文说明白JS的执行上下文与作用域
一文说明白JS的执行上下文与作用域：上下文执行、上下文、生命周期、执行栈、作用、作用域等内容
2024-09-24 11:17:30
1301
原创 「JavaScript深入」深拷贝与浅拷贝，如何手写实现？
「JavaScript进阶」深拷贝与浅拷贝，如何手写实现？浅拷贝：浅拷贝得到的对象会受原对象的影响（同样可以影响原对象）深拷贝：深拷贝得到的对象不会受到原对象影响
2024-09-24 08:53:56
747
原创 「JavaScript深入」一文吃透JS的基本数据类型 Symbol
一文吃透JS的基本数据类型Symbol：概念、Symbol.prototype.description、作为属性名的Symbol、实例：消除魔术字符串、属性名的遍历、Symbol.for()，Symbol.keyFor()、内置的Symbol值
2024-09-23 13:41:23
1204
原创 【TypeScript入坑】TypeScript 的declare关键字、d.ts类型声明文件
【TypeScript入坑】TypeScript 的declare关键字、d.ts类型声明文件
2024-09-23 09:03:17
529
原创 【TypeScript入坑】TypeScript 的装饰器
装饰器（Decorator）是一种语法结构，用来在定义时修改类（class）的行为。在语法上，装饰器有如下几个特征。第一个字符（或者说前缀）是，后面是一个表达式。后面的表达式，必须是一个函数（或者执行后可以得到一个函数）。这个函数接受所修饰对象的一些相关值作为参数。这个函数要么不返回值，要么返回一个新对象取代所修饰的目标对象。
2024-09-20 15:13:35
991
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人