- 博客(44)
- 收藏
- 关注
RSS订阅原创 数据可视化 ECharts
数据可视化的核心是将冰冷的数字转化为直观图形，揭示数据规律，广泛应用于报表、大屏展示、业务监控等场景。可视化库核心特点上手难度适用场景开源协议 / 商用情况ECharts百度出品，基于 Canvas，图表类型丰富（含地图、水球图），配置化开发，文档完善低企业级报表、大屏展示、常规图表（柱状图 / 折线图 / 饼图等）Apache-2.0 协议，免费商用D3.js底层可视化库，灵活性极高，可自定义任意图形高复杂自定义可视化（如学术图表、特殊交互图形）BSD 协议，免费商用。
2025-10-10 10:22:56
1057
原创 Canvas 图形绘制与高级功能
知识模块核心内容基础绘制直线、多边形、圆形、椭圆、文字，stroke()fill()样式设置线条（lineWidth）、填充（fillStyle）、阴影、渐变高级功能贝塞尔曲线、2D 变换（平移 / 旋转 / 缩放）、图形组合、图片操作交互与动画鼠标事件、、定时重绘（如钟表）性能优化局部清除、离屏 Canvas、减少样式修改。
2025-10-09 15:40:34
1202
原创 地理定位与第三方地图集成开发
对比维度HTML5 Geolocation（原生）百度地图 JS API高德地图 JS APILeaflet（开源）核心能力仅获取经纬度（无可视化）可视化、坐标转换、POI 搜索、路径规划可视化、坐标转换、POI 搜索、路径规划轻量可视化，需插件扩展高级功能坐标系WGS84BD09（需转换 WGS84）GCJ02（需转换 WGS84）支持多坐标系（需插件）协议要求HTTPSHTTPS/HTTP（推荐 HTTPS）HTTPS/HTTP（推荐 HTTPS）
2025-10-09 15:20:13
1282
原创 前端本地存储
需要与服务器交互（如登录状态）→ 用Cookie（或配合 Session）。前端永久存储（如用户偏好、历史记录）→ 用。前端临时存储（如表单草稿、页面间临时数据）→ 用。存储大量数据 / 二进制数据（如离线缓存、大文件）→ 用。
2025-10-09 15:15:52
1154
原创 Sass：CSS 预处理器
Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 基础上增加变量、嵌套、循环、函数等功能，解决 CSS 代码冗余、可维护性差的问题，最终需编译为浏览器可识别的 CSS。默认编译后的 CSS 与 Sass 同目录，可通过配置修改路径（如生成到css打开设置→ 搜索→ 编辑Formats；替换配置为：json"format": "expanded", // 编译格式：expanded（展开）、compressed（压缩）
2025-09-23 12:03:19
870
原创 Axios 请求
Axios 是基于 Promise 的 HTTP 客户端，可在浏览器和 Node.js 中使用，本质是对原生的封装，解决了传统 AJAX 语法繁琐、回调地狱等问题，是目前前端最流行的网络请求工具之一。
2025-09-23 12:01:48
588
原创 Fetch API 用法
Fetch 是 ES2017 引入的新一代异步网络请求 API，用于替代传统的。它基于 Promise 实现，支持 async/await 语法，让异步请求代码更简洁、更易维护。
2025-09-23 10:33:38
542
原创 ES6 promise-try-catch-模块化开发
传统多层异步嵌套（如 “请求 1 成功后请求 2，请求 2 成功后请求 3”）会形成 “回调地狱”，Promise 可通过。是 ES2017（ES8）引入的语法，基于 Promise 实现，让异步代码的写法更接近同步代码，进一步简化异步逻辑。Promise 是 ES6 引入的异步编程规范，主要用于解决 “回调地狱” 问题，让异步代码的逻辑更清晰、更易维护。语句用于捕获代码执行中的异常（错误），避免程序因报错而中断，同时可以自定义错误处理逻辑。（导入）实现模块间的依赖管理，解决全局变量污染、代码复用等问题。
2025-09-20 16:06:55
708
原创 ES6 新增数据类型-新增方法-面向对象-迭代器
核心语法：用class声明类，为构造函数（初始化实例属性），方法直接定义在类体内。示例javascript// 构造函数，实例化时自动执行// 实例属性// 实例方法（无需 function 关键字）console.log(`用户名：${this.name}`);console.log(`密码：${this.password}`);// 实例化类// 用户名：admin。
2025-09-20 16:00:56
726
原创 JavaScript 触底加载 防抖与节流
原理：通过定时器延迟执行函数，若函数在延迟期间再次触发，忽略后续触发；函数执行后清空定时器，允许下一次触发。javascript/*** 定时器版节流函数（确保最后一次触发会执行）* @param {Function} fn - 需要节流的目标函数* @param {number} interval - 执行间隔（毫秒）* @returns {Function} 节流后的函数*/// 若没有定时器，设置定时器延迟执行if (!timer) {// 执行后清空定时器，允许下一次触发。
2025-09-15 17:18:20
746
原创 跨域请求：解决方案
同源” 指的是两个 URL 的协议、域名、端口号三者完全一致。只有满足同源条件，浏览器才允许 JS 脚本相互访问数据（如 AJAX 请求、操作 DOM 等）。URL 示例与是否同源原因分析是协议（http）、域名、端口完全一致否协议不同（http vs https）否域名不同（www vs blog，二级域名差异）否端口不同（8080 vs 80）否主域名不同（vs当 JS 脚本尝试访问非同源。
2025-09-15 09:15:17
1069
原创 JavaScript AJAX
全称：Asynchronous JavaScript And XML（异步 JavaScript 和 XML）。本质：不是编程语言，而是一套 “创建交互式网页” 的技术组合，核心是 “用 JS 异步请求数据并更新 DOM”。技术栈构成前端：JavaScript（逻辑控制）、HTML/CSS（页面展示）、DOM（局部更新）。数据传输：XMLHttpRequest（核心对象，发送异步请求）。数据格式：早期用 XML，现在主流用 JSON（轻量、易解析）。变量以开头，弱类型语言，无需声明类型。
2025-09-15 09:12:42
912
1
原创 JavaScript 闭包与事件轮询机制
闭包（Closure）是能够访问另一个函数作用域中变量的函数。简单来说：当一个内层函数被外层函数返回并在外部调用时，内层函数依然能访问外层函数的局部变量，这就是闭包。自执行函数（Immediately Invoked Function Expression，IIFE）是定义后立即执行的函数创建临时作用域，避免变量污染全局（早期没有let/const时，常用 IIFE 隔离作用域）。为闭包传递参数（如前面的定时器案例）。事件轮询机制。
2025-09-09 10:41:25
637
原创 JavaScript 递归函数
递归函数：核心是 “自调用 + 出口”，适合处理嵌套 / 规模递减问题，需注意栈溢出风险。排序算法冒泡排序：相邻交换，易理解但交换频繁。选择排序：找最小交换，交换少，性能略优。两者时间复杂度均为 O (n²)，适合小规模数据。二分查找：仅适用于有序数组，时间复杂度 O (log₂n)，是高效的查找算法。
2025-09-05 14:38:23
698
原创 JavaScript 面向对象
两者是不同的编程范式，核心区别在于 “解决问题的关注点” 不同：直接用定义对象，适合创建单个、简单的对象。2. 方式 2：Object 构造函数通过创建空对象，再动态添加属性和方法，适合创建空对象后需动态扩展的场景。3. 方式 3：在已有对象上扩展属性 / 方法给数组、函数等内置对象添加自定义属性和方法（需谨慎，避免污染内置对象）。4. 方式 4：构造函数（批量创建对象）当需要创建多个结构相同的对象（如多辆汽车、多个人）时，用构造函数批量生成，函数名首字母建议大写（区分普通函数
2025-09-04 16:22:00
927
原创 JavaScript 正则表达式
为常用的 “字符范围” 提供简写，简化正则书写，核心是 “快速选一类”。预定义符号含义描述等价写法示例匹配除换行符（\n）、回车符（\r）外的任意单个字符[^\n\r]/h./g匹配 “h” 后面跟任意一个字符（如 “h2”“he”）\d匹配任意数字[0-9]/\d/g匹配字符串中所有数字\D匹配任意非数字[^0-9]/\D/g匹配字符串中所有非数字\s匹配任意空白字符（空格、制表符\t、换行\n等）/\s/g匹配字符串中的所有空格\S匹配任意非空白字符/\S/g匹配字符串中的所有非空格\w。
2025-09-04 10:22:50
1876
原创 JavaScript BOM
BOM（Browser Object Model，浏览器对象模型）是 JavaScript 与浏览器交互的核心技术，它将浏览器的窗口、地址栏、历史记录等组件抽象为对象，允许开发者通过代码控制浏览器行为。与 DOM（操作文档内容）不同，BOM 聚焦于 “浏览器本身” 的控制，其顶层对象为window，所有其他 BOM 对象均为window的子属性。以下是 BOM 核心知识的系统梳理。
2025-09-02 14:37:45
764
原创 JavaScript Event 事件
对象指向的元素典型应用场景e.target触发事件的具体元素（事件源）事件委托中判断点击的子元素类型（如libuttonthis绑定事件的元素普通事件处理中操作当前元素（如修改样式、属性）绑定事件的元素（与this完全一致）需要明确区分绑定元素与触发元素时使用。
2025-08-29 10:58:30
780
原创 JavaScript 事件
为了更清晰区分offsetclientinnerscroll对比维度offset 系列client 系列inner 系列scroll 系列作用对象任意 DOM 元素任意 DOM 元素仅 window（浏览器窗口）任意 DOM 元素（含 window）尺寸计算范围内容 + padding + border内容 + padding窗口可视区（含滚动条）内容总尺寸（含不可见部分）位置参考基准最近定位父级（无则 body）浏览器可视区（鼠标位置）无（仅尺寸，无位置）元素自身（滚动距离）
2025-08-28 15:18:45
1213
原创 JavaScript 对象 Array对象 Math对象
核心特性核心特性：静态对象，无需实例化，直接通过Math调用；方法专注于数学计算，无副作用（不修改外部数据）。重点方法记忆round（四舍五入）、ceil（向上）、floor（向下）；random（结合公式生成指定范围整数）；maxmin（需注意数组参数的处理方式）；abs（绝对值）、pow（幂次）、sqrt（开方）。实践技巧生成随机颜色、随机标识时，优先结合和 RGB/16 进制格式；处理数组最值时，用展开运算符...简化参数传递；涉及精度要求（如金额、距离），通过。
2025-08-25 17:00:50
840
原创 JavaScript 对象 Object对象 String对象 Date对象
核心特性核心特性：静态对象，无需实例化，直接通过Math调用；方法专注于数学计算，无副作用（不修改外部数据）。重点方法记忆round（四舍五入）、ceil（向上）、floor（向下）；random（结合公式生成指定范围整数）；maxmin（需注意数组参数的处理方式）；abs（绝对值）、pow（幂次）、sqrt（开方）。实践技巧生成随机颜色、随机标识时，优先结合和 RGB/16 进制格式；处理数组最值时，用展开运算符...简化参数传递；涉及精度要求（如金额、距离），通过。
2025-08-25 11:20:05
998
原创 JavaScript 自定义函数
javascript运行var 函数名 = new Function("参数1", "参数2", … "函数体");特点Function 首字母大写，仅在 JavaScript 1.1+ 可用。每次调用构造函数会解析函数体、创建新函数对象，效率低，实际开发少用。javascript运行function 函数名(参数1, 参数2 … [形参]) {<语句块>return 返回值;关键说明function 关键字：用于声明函数。函数名：合法标识符，区分大小写，需唯一。
2025-08-20 16:53:49
1248
原创 JavaScript 流程控制与循环语句
在程序设计中，需支持三种基础流程控制以实现结构化程序：实现多分支判断，细分为单分支、双分支、多分支、分支嵌套， 条件括号内可为值或表达式。javascript运行示例：判断成绩是否及格（单分支）javascript运行2. 双分支javascript运行示例：判断成绩是否及格（双分支）javascript运行3. 多分支javascript运行示例：判断成绩所属等级（多分支）javascript运行4. 分支嵌套在 分支内嵌套 判断，实现更细粒度条件控制。
2025-08-18 16:48:13
426
原创 JavaScript 基础 数据类型
通过在代码开头添加启用，是 ES5 新增的更严格的执行模式。JSON（JavaScript Object Notation）是轻量级数据交换格式，用于存储和传输数据。
2025-08-18 16:36:56
762
原创 CSS Flex 弹性布局
* 响应式调整为每行2项 */：2009年W3C提出的弹性盒模型，用于简便实现各种页面布局。/* 每行4项 *//* 中间内容自适应 *//* 等分空间 */创建弹性环境，子项目自动成为弹性项。
2025-08-05 15:17:11
369
原创 CSS3 响应式布局
* 桌面三列 *//* 平板两列 *//* 超大设备（大桌面，≥1200px） */@media 媒体类型 and (条件) {/* 中等设备（小桌面，≥768px） *//* 超小设备（手机，<576px） *//* 默认移动端样式（<576px） *//* 小设备（平板，≥576px） *//* 大设备（桌面，≥992px） *//* 超大设备（≥1200px） *//* 中等设备（≥768px） *//* 小设备（≥576px） *//* 大设备（≥992px） *//* CSS规则 */
2025-08-05 11:00:29
1033
原创 CSS 动画 Animate.css的使用及WOW.js插件
无限脉冲</div><div class="animate__animated animate__fadeIn animate__fast">快速淡入
2025-08-04 11:14:57
1064
原创 CSS3 过渡 2D 动画 3D
属性功能单位示例位移px/%rotate()旋转degscale()缩放无skew()倾斜degmatrix()矩阵变换数字css@keyframes 动画名称 {0% {/* 起始状态 */50% {/* 中间状态 */100% {/* 结束状态 */类别属性/方法语法示例说明应用场景透视系统设置3D元素的透视距离3D容器设置灭点位置调整3D视角3D变换单轴旋转卡片翻转rotate3d()多轴旋转复杂3D旋转。
2025-08-02 16:44:00
937
原创 HTML5 核心知识点
发布时间：2014年10月由W3C完成标准制定特点：仍处于完善中，但大部分现代浏览器已支持主要特性设计目标：减少对外部插件的依赖，提供更多语义化标签，增强多媒体支持。
2025-08-02 16:38:32
765
原创 CSS 定位
相对于最近的非static定位祖先元素(relative/absolute/fixed)必须指定阈值：top/right/bottom/left至少一个。z-index只在同一 stacking context 中比较。未设置z-index的定位元素默认为auto(0)默认层级：定位元素 > 浮动元素 > 普通流元素。父元素z-index会影响子元素跨上下文比较。负值z-index可置于普通元素下方。普通流元素 < 浮动元素 < 定位元素。父容器约束：只能在父元素区域内粘滞。父元素必须有足够高度（不能是。
2025-07-31 08:23:30
930
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人