- 博客(77)
- 收藏
- 关注
RSS订阅原创 js中如何改变this指向
本文总结了JavaScript中this关键字的指向规则及其改变方法。主要内容包括：1) this指向取决于调用方式而非定义位置，常见场景包括独立函数（全局对象/undefined）、对象方法（调用对象）、箭头函数（继承外层this）、DOM事件（触发元素）、构造函数（新实例）；2) 通过call、apply、bind可显式改变this指向，三者区别在于参数传递方式（call逐个传参、apply数组传参）和执行时机（bind返回新函数）。文中通过代码示例直观展示了各种this绑定场景及显式绑定的具体用法。
2025-12-24 21:47:32
893
原创 vue3+百度地图制作物流路径图
本文详细介绍了在Vue项目中集成百度地图实现物流路线绘制的完整流程。主要内容包括：1) 创建百度地图AK密钥；2) 引入百度地图API文件；3) 创建地图容器并初始化；4) 根据经纬度绘制基础路线；5) 配置途经点实现物流路线规划。教程提供了完整的代码示例和操作截图，帮助开发者快速实现从广州到上海的物流路径绘制，包含武汉、南京等途经点。文章最后还预留了互动环节，邀请读者分享实操心得或提出特定地图功能需求，为后续教程提供方向。
2025-12-24 11:26:24
813
原创 2025年高频面试题整理(vue系列一)
Vue单页应用（SPA）与多页应用（MPA）的核心区别在于：SPA只有一个主页面，通过组件切换实现局部刷新，用户体验好但SEO较弱；MPA由多个独立页面组成，整页刷新但SEO友好。实现SPA可通过hash或history模式监听URL变化驱动视图更新。 静态资源存放方面，assets目录会经过打包压缩，适合项目自有资源；static目录直接上传，适合第三方已处理资源。 Vue模板编译分为解析、优化、生成三个阶段，最终转化为render函数。Diff算法通过同层比较虚拟DOM提升更新效率，与数据响应式系统协同
2025-12-23 21:15:16
631
原创 TS封装axios
本文详细介绍了如何使用TypeScript封装Axios，包括创建axios实例、配置请求/响应拦截器以及封装常用HTTP方法。主要内容： 创建axios实例并配置基础URL和超时时间 添加请求拦截器处理token等认证信息 配置响应拦截器统一处理返回数据 封装get/post/put/delete方法，使用泛型确保类型安全 提供实际使用示例，实现规范的API调用方式 该封装方案提升了代码复用性，统一了错误处理，并通过TypeScript增强了类型检查，使前端请求更加规范和安全。
2025-12-20 14:28:06
758
原创 pinia与Vuex高频面试题
本文围绕Vue状态管理展开，重点介绍了Vuex和Pinia两个工具。Vuex包含state、getters、mutations、actions和modules五大核心，通过严格的数据变更流程实现状态管理，但存在数据易失等问题。文章还对比了Vuex与Pinia的区别，指出Pinia简化了API，移除了mutations，支持TypeScript和模块化设计，更适合现代Vue开发。同时解析了虚拟DOM的diff算法原理，说明其通过同层级比较提高性能。最后介绍了Pinia的调试支持和store间通信方式。
2025-12-20 13:46:30
899
原创 vue高频面试题
Vue核心原理及特性解析 Vue通过数据劫持实现响应式，使用Object.defineProperty(vue2)或Proxy(vue3)将数据转为getter/setter，并建立依赖追踪机制。其双向数据绑定结合了数据劫持和发布-订阅模式，当数据变化时通知相关视图更新。 MVVM模式实现了数据与视图的分离，通过ViewModel实现双向绑定，相比MVC和MVP具有更低的耦合度。Vue3相比Vue2在响应式原理、API设计、生命周期等方面有显著改进，使用Proxy替代Object.definePropert
2025-12-03 21:32:22
1136
原创 JS的学习6
本文摘要：文章介绍了Web开发中的几个关键技术点。1)本地存储方法，包括localStorage和sessionStorage的增删改查操作；2)storage事件监听机制，可追踪存储数据变化；3)移动端触屏事件处理；4)错误处理机制，包括try-catch语法和全局错误捕获；5)Web Worker多线程技术及其限制条件，详细说明了Worker的创建、通信和终止方法。这些技术涵盖了前端开发中数据存储、事件处理、错误捕获和多线程处理等核心知识点。
2025-08-14 11:24:44
655
原创 JS的学习5
前端开发常用API摘要：主要包含元素尺寸获取（clientWidth、offsetWidth、getBoundingClientRect）、坐标系统（屏幕/视口/文档坐标）、浏览器视口控制（inner/outerWidth）、页面事件（resize）、定时器操作、this指向修改（call/apply/bind）、URL操作（location对象）、浏览器信息获取（navigator）和页面历史管理（history）。这些API涵盖了元素测量、事件处理、异步控制、URL操作等核心功能，是前端开发的基础工具集
2025-08-13 22:01:46
705
原创 看完这篇文章你就会组件通信啦
本文主要介绍了Vue组件间通信的多种方式，包括： 父传子通信：通过props和ref两种方式实现，props传递的数据是只读的 子传父通信：通过props回调函数、$emit自定义事件和ref三种方式实现 兄弟组件通信：有共同父组件时通过父组件中转，无共同父组件时通过事件总线(eventBus)实现 其他方式：包括$children/$parent获取组件实例、.native修饰符绑定原生事件等 还介绍了自定义事件的解绑($off)和一次性事件($once)等特性 每种通信方式都通过代码示例展示了具体实现方
2025-08-13 21:58:26
963
原创 js日期特效案例
这篇文章介绍了一个简单的日期特效网页实现方法。通过HTML构建基本布局，包含两个容器分别显示完整日期信息和当前日期数字。使用JavaScript实时获取并处理时间数据：1) 获取年月日、时分秒及星期信息；2) 实现12小时制转换和AM/PM标识；3) 自动补零显示个位数时间；4) 通过定时器每10毫秒更新显示。最终效果是一个带有圆角边框的蓝色背景面板，中央橙色区块突出显示当前日期数字，上方显示格式化的完整日期时间信息。
2025-08-04 17:22:03
250
原创 offset详细
本文介绍了DOM元素的offset系列属性：1. offsetParent指向最近的定位父元素，fixed定位元素返回null；2. offsetLeft/offsetTop返回元素相对于定位父元素的边距距离；3. offsetWidth/offsetHeight获取元素实际宽高（包含padding和border），这些属性都是只读的。通过示例代码演示了不同定位情况下这些属性的取值规则，以及它们与CSS盒模型的关系。
2025-08-04 11:12:19
592
原创 Object详细
摘要：本文介绍了JavaScript中创建Object实例的两种方式：使用new操作符和对象字面量表示法。对象字面量支持字符串或数值作为属性名，且不会调用Object构造函数。同时讲解了两种存取属性的方法：点语法和中括号语法，后者可以通过变量访问属性，适用于包含特殊字符的属性名。两种方法功能相同，但中括号语法更具灵活性。
2025-07-31 10:31:42
378
原创 Array详细
如果中括号中的索引值，已经超出数组原有的索引值，那么数组就会添加最大的索引值，例如：此案例当中数组的原本最大的索引值是2，使用中括号获取索引为3的元素，但是原数组当中并没有索引为3的元素，那么此时就会添加元素brown，数组长度也就变成了4，最大索引就变成了3。不会改变数组的大小。数组的length属性，不是只读的是可以修改的。支持负索引值，与 fill()相对于数组末尾计算正向索引的过程是一样的 ，同样的， copyWithin()静默忽略超出数组边界、零长度及方向相反的索引范围。
2025-07-31 10:29:51
1110
原创 JS的学习4
本文总结了前端开发中的事件处理要点：1）事件委托适用click等冒泡事件，不适用focus等无冒泡事件；2）阻止事件冒泡有stopPropagation（标准）和cancelBubble（IE）两种方法；3）阻止默认行为可通过preventDefault或return false；4）列举了mouseenter/leave与mouseover/out的区别，以及禁用选中文字、右键菜单的方法；5）介绍了DOMContentLoaded与load事件的区别。最后提到closest方法用于查找匹配选择器的最近祖先
2025-07-30 11:26:03
628
原创 js的学习(3)
本文摘要： DOM操作主要包括：1)属性操作，通过getAttribute()、dataset等获取和设置自定义属性；2)节点操作，使用parentNode、childNodes等方法获取父子节点；3)节点增删改查，包括createElement、appendChild等方法；4)事件处理，通过addEventListener绑定事件及事件流机制（捕获/冒泡）。文章还区分了target和currentTarget的区别，前者指向触发事件的元素，后者指向当前处理事件的元素。
2025-07-30 09:19:16
888
原创 js的学习2
本文总结了JavaScript中常用的字符串方法、JSON转换、Math对象、Date对象和DOM操作等核心知识点。字符串部分包括indexOf()、charAt()、substr()等常用方法；JSON转换介绍了stringify()和parse()方法；Math对象包含ceil()、floor()、random()等数学函数；Date对象讲解了获取日期时间的各种方法；DOM操作部分涵盖元素获取、事件处理、样式修改和定时器等。此外还介绍了数据类型转换、数组map()方法和元素属性操作等实用技巧。这些知识点
2025-07-28 20:00:01
1300
原创 js的学习1
本文总结了JavaScript中数组常用方法和函数相关知识点。数组方法包括push/pop等增删操作、indexOf查找、sort排序、join转换字符串等12种核心方法。函数部分介绍了具名/匿名函数定义、作用域规则及逻辑中断特性。新增知识点包含数组扁平化flat()、扩展运算符...和Set去重方法。这些内容涵盖了数组操作和函数基础的核心概念，适合JavaScript初学者快速掌握基本语法和常用技巧。
2025-07-28 19:52:36
517
原创 JS基础语法
JavaScript基础语法摘要： 1.输入输出语句：包括document.write()、alert()、console.log()三种输出方式，以及prompt()输入方法。 2.变量声明：使用var/let声明变量，const声明常量。变量命名规则：不能使用关键字，只能包含下划线、字母、数字和$，区分大小写。 3.数据类型：包括string(字符串)、number(数字)、boolean(布尔)、undefined(未定义)、null(空值)等基本类型，以及数组和数据类型转换方法。 4.运算符：包括算
2025-06-16 10:47:28
902
原创 CSS动画
只可以设置开始结束动画，且需要触发机制，只能触发一次。height;background;.box:hover;;;width;background;</</</</</
2025-05-08 19:46:19
407
原创 DOM基础学习
通常将DOM看作一颗“树”，DOM将整个文档看作一颗“家谱树 ”1. getAttribute和setAttributea. getAttribute获取属性值，有一个必须的参数，这个节点对象的名字b. 设置属性值setAttribute(name,value)3.节点对象的属性3.1三个重要属性在文档对象模型（DOM）中，每一个节点都是一个对象。DOM节点有三个重要属性：3.2其他属性childNodes 获取其子节点firstChild 获取第一个子节点lastChil
2025-05-06 17:23:06
982
原创 文本溢出隐藏显示省略号
这是 Opera 浏览器的私有属性，用于在最后一行文本溢出时显示省略号。不过这个属性现在已经不常用了，因为 Opera 已经转向使用 WebKit/Blink 引擎。使用旧的弹性盒模型（Flexbox 的前身），这是 WebKit 浏览器的私有属性。当单行文本溢出时显示省略号（…虽然这里设置了，但在多行文本情况下，这个属性需要结合其他属性才能生效。限制文本显示的行数（这里是 2 行）。超出指定行数的文本会被截断。设置盒子模型的方向为垂直方向，使文本按垂直方向排列。设置内容溢出容器时隐藏超出部分。
2025-04-24 15:32:00
454
原创 Sass的学习
Sass是强化css的一个工具，变量、判断、函数、循环等都有可以在scss中实现。Sass源文件不能被浏览器解析，只有css文件才可以。Sass转成css需要借助工具Esay Sass。Sass有两种编码格式一种是sass编码方式（省略大括号的编码格式），另一种是scss编码格式（使用大括号的编码格式）。
2025-04-24 15:23:43
850
原创 了解计算机
世界上第一台电子计算机是个庞然大物：重30余吨，占地约170平方米，肚子里装有18000只电子管。它是1946年2月14日，在美国宾夕法尼亚大学诞生的。
2025-04-08 20:32:28
868
原创 正则表达式（一）
修饰符 u 表示启用正则表达式中对 Unicode 的支持。4 个字节长的字符被以正确的方式处理：被看成单个字符，而不是 2 个 2 字节长的字符。Unicode 属性可以被用于查找：\p{…}。有了 unicode 属性我们可以查找给定语言中的词，特殊字符（引用，货币）等等。四、锚点：字符串开始 ^ 和末尾 $插入符号 ^ 和美元符号 $ 在正则表达式中具有特殊的含义。它们被称为“锚点”。插入符号 ^ 匹配文本开头，而美元符号 $ 则匹配文本末尾。let str = “张三”
2025-04-08 20:25:56
1139
原创 基本引用类型——Date
Data类型将日期保存为自协调世界时间， 时间 1970 年 1 月 1 日午夜（零时）至今所 经过的毫秒数。使用这种存储格式，Date类型可以精确表示 1970 年 1 月 1 日之前及之后 285616 年的日期。使用new操作符来调用Data构造函数在不给 Date 构造函数传参数的情况下，创建的对象将保存当前日期和时间。要基于其他日期和时 间创建日期对象，必须传入其毫秒表示（UNIX 纪元 1970 年 1 月 1 日午夜之后的毫秒数）。
2025-04-07 17:05:58
1358
原创 变量与作用域
变量 : 原始值（最简单的数据）、引用值（多个值构成的对象）原始数据类型： Undefined、Null、Boolean、Number、String 和 Symbol。引用数据类型：Object、Array、function。
2025-04-07 11:19:01
1169
原创 隐式类型转换
所谓类型转换就是将一种数据类型转换为另一种数据类型。在编译或者运行时，会发生自动转换类型，这种称之为隐式转换，当我们使用一些其他的方法来进行转换时，这种就叫做显示转换。装箱意味着将原始类型转换为引用类型，即创建包装类型。在JS当中引入了三种特殊的类型Number、String、Boolean，我们称其为包装类型。将引用类型转换为原始数据类型，在拆箱过程中会遵循ECMAScript规定的toPrimitive原则,对引用类型进行转换。toPrimitive函数toPrimitive方法是在引用类型转换为原
2025-04-03 10:05:56
556
原创 合并空值运算符??
合并空值运算符提供一种从列表中选择第一个"已定义"的值的简便方式，用于为变量分配默认值。??运算符的优先级非常低，仅略高于?和 =，因此在表达式中使用它时请考虑添加括号。如果没有明确添加括号，不能将其与 || 或 && 一起使用。
2025-04-02 19:31:26
437
原创 JS数组方法
JavaScript 数组的大小是可调整的，并且可以包含不同。（当不需要这些特性时，请使用。注：JavaScript 类型数组是类似数组的对象，它提供了一种在内存缓冲区中读取和写入原始二进制数据的机制。JavaScript 数组不是关联数组，因此不能使用任意字符串作为索引来访问数组元素，但必须使用非负整数（或其各自的字符串形式）作为索引来访问。
2025-03-26 20:07:29
1303
原创 不使用数组方法反转数组
说到反转数组，有js基础的小伙伴可能顺势就想到使用反转数组的方法reverse()来对数组元素进行反转，那么在不使用数组方法的情况下如何去反转一个数组呢？那么接下来我们就来看一下具体的代码实现。
2025-03-19 16:04:25
214
原创 使用Sass封装倍图混合器
Sass封装倍图混合器是一种方便的工具，用于在编写CSS时处理高清适应性图片。倍图混合器可以实现自动地为不同分辨率的设备生成适当的背景图片。通过使用这个混合器，我们可以避免手动编写多个CSS规则来适应不同的设备像素比。在使用Sass封装倍图混合器时，我们只需要在Sass文件中定义一个背景图片的变量，然后使用这个变量作为参数来调用混合器。混合器会自动根据设备的像素比来生成相应的CSS规则。这使得我们可以轻松地在代码中使用高清图片，而无需手动管理不同设备的适应性。
2024-12-29 21:05:39
789
原创 HTML基础及标签的学习
本节内容我们开始学习HTML的基础知识，了解HTML的基本结构，以及一些标签及其属性。那么就让我们开始今天的学习吧！其他文档声明：https://www.w3.org/QA/2002/04/valid-dtd-list.html语言设置（写在html标签上）：lang=“en”html lang属性用于指定网页的语言，如zh-CN代表简体中文，对搜索引擎优化有积极影响。它区分不同区域的语言变体，如zh-TW代表繁体中文。W3School和W3C提供了语言和国家/地区代码的参考手册。1）第一种写法（语言
2024-12-06 15:07:00
611
1
原创 CSS制作字体炫彩效果
本节内容主要来讲解一下炫彩字体的实现，主要通过使用 background-clip以及background-position来实现，那么话不多说开始本节内容的学习吧！/*添加动画animation：动画名 动画持续时间 匀速 循环播放 */那么本节内容就到此结束了，希望本篇博客对您有所帮助，我们下一节内容再见。/*通过background-clip属性按照文字轮廓裁剪*//*设置字体颜色为透明色*//*设置盒子的背景颜色*//*设置字体大小*/
2024-12-05 17:21:37
1370
原创 不一样的CSS(4)--icon图标系列之svg
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。简单来说就是我们可以通过svg来制作图标，网页的设计，以及数据的可视化，并且图片放大缩小不会失真。
2024-12-05 15:23:10
2213
原创 在学习HTML之前你需要知道什么？
本篇内容主要讲解了计算机的基础知识，五大浏览器以及浏览器内核的介绍，HTML编译软件的使用，VS code的安装及插件的使用。
2024-12-04 20:33:23
792
原创 让一个盒子垂直水平居中的方式有哪些？
这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了。父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高。这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作。当设置left、top为50%的时候，内部子元素为方块2的位置。初始位置为方块1的位置。
2024-12-03 18:54:47
383
原创 CSS 函数
本节内容，我们来讲解一下CSS当中的函数，众所周知函数我们只有在JS当中使用最多，那么你有了解过css函数吗？CSS函数是一种在CSS样式表中使用的特殊语法结构，用于处理和计算样式属性的值。它们可以接受输入参数，并根据这些参数返回不同的值。那么接下来我们就来学习一下css当中的函数吧！calc()与自定义属性混合使用可以发挥出他最大的作用。
2024-12-03 17:16:03
1579
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人