- 博客(126)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 URLSearchParams在前端url参数操作中的使用
作为前端开发经常要用到页面的传值等操作，比如最基本的get请求的query，今天介绍一个好用的。是 JavaScript 中的一个，用于。它提供了一种便捷的方式来处理 URL 中的参数（即?这里的查询字符串是，可以用来解析和操作。
2025-09-12 18:30:00
384
原创 前端跨域请求原理及实践
摘要：跨域问题是前端开发中的常见挑战，主要由浏览器的同源策略引起。同源策略要求协议、域名和端口三者一致，否则会限制DOM访问、数据读取和网络请求。跨域请求分为简单请求和预检请求，后者需要先发送OPTIONS请求确认服务器许可。解决跨域的主流方案包括CORS和JSONP：CORS通过服务器设置响应头（如Access-Control-Allow-Origin）实现跨域访问，支持所有HTTP方法；JSONP则利用<script>标签不受同源限制的特性，通过回调函数获取数据，兼容老式浏览器但仅支持GET
2025-07-23 21:45:00
1008
原创 Promise链式调用之深度解析
本文深入解析JavaScript中Promise链式调用的核心机制与应用场景。文章首先阐述了.then()方法返回新Promise的特性，这是链式调用的基础，支持同步值和异步操作的串联处理。其次详细分析了链式调用的数据流转机制，通过"生产者-消费者"模式实现多步骤数据处理。在错误处理方面，Promise链提供了统一的错误冒泡机制，支持全局和局部错误捕获，并能根据错误类型进行差异化处理。最后，文章通过用户注册流程等实际案例，展示了Promise链式调用在异步流程控制中的典型应用场景
2025-07-17 13:39:15
431
原创 JavaScript中关于proxy的作用以及和Object.defineProperty的区别
在 JavaScript 中，**`Proxy`** 是 ES6 引入的一个元编程特性，用于创建对象的代理，从而可以拦截并自定义对该对象的基本操作（如属性访问、赋值、枚举、函数调用等）。与 `Object.defineProperty()` 相比，`Proxy` 提供了更强大、更全面的元编程能力。
2025-07-16 21:30:00
802
原创 JavaScript中Object.defineProperty的作用和用法以及和proxy的区别
JavaScript的Object.defineProperty()方法用于精确控制对象属性行为，通过属性描述符可设置读写性、枚举性等特性，并支持getter/setter实现数据劫持。常用于响应式系统（如Vue.js）、属性保护和私有变量实现。该方法能防止属性被意外修改，但只能监听直接属性，对数组和嵌套对象支持有限，性能开销需注意。相比ES6的Proxy，其兼容性更好但功能较局限。适用于需要精细控制属性访问和修改的场景。
2025-07-14 21:00:00
296
原创 ＜script＞标签对HTML文件解析过程的影响以及async和defer属性的应用
摘要：<script>标签的async和defer属性影响JS脚本加载执行方式。默认情况下脚本会阻塞HTML解析；async脚本异步下载完成后立即执行，顺序不确定；defer脚本异步下载后延迟到HTML解析完成并按顺序执行，且先于DOMContentLoaded事件。defer适合DOM操作，async适合独立脚本。现代浏览器均支持这两个属性，IE9以下需特殊处理。合理使用可优化页面加载性能。
2025-07-11 18:30:00
648
原创 vue中多层 $refs 穿透的应用和注意事项
Vue中通过多层$refs穿透获取封装组件实例是一种非标准做法，可实现功能但存在风险。主要实现方式包括直接链式访问$refs、通过中间组件暴露引用等，适用于紧急修复、特殊需求等场景。但会破坏封装性，存在生命周期和类型安全问题，建议仅在必要时使用并添加注释。更推荐采用事件通信、公开API、状态管理或provide/inject等替代方案。最佳实践是最小化使用$refs穿透，封装中间层并定期重构为健壮的通信方式。本质上这是一种"必要之恶"，应优先选择符合Vue设计理念的标准通信方式。
2025-07-10 08:30:00
1196
原创 前端css外边距塌陷(Margin Collapse)现象原因和解决方法
子元素的 margin 影响父元素通常是由 垂直外边距合并（Margin Collapse） 导致的。当父元素未设置边框、内边距或特定样式时，子元素的 margin-top/margin-bottom 会与父元素合并，导致父元素位置移动。 解决方案： 为父元素添加透明边框（border-top:1px solid transparent） 设置父元素内边距（padding-top:1px） 触发BFC：设置 overflow:auto、display:flow-root 等 使用伪元素（::before{d
2025-06-04 20:02:26
474
原创 ECMA Script6新特性(下)
ES6 引入了原生的模块化机制，允许开发者将代码分割成多个模块，提高代码的可维护性和复用性。展开语法可以将数组或类数组对象展开为单独的元素，常用于函数调用时传递参数。方法用于将一个或多个源对象的所有可枚举属性复制到目标对象，返回目标对象。剩余参数允许我们将一个不定数量的参数表示为一个数组。这些只是 ES6 引入的部分常用的新特性，另外一篇详见本博客的上一篇。ES6 引入了二进制和八进制字面量的表示方法，分别使用。语法在参数名前，可将剩余的参数收集到一个数组中。关键字可以导出模块中的变量、函数、类等，使用。
2025-03-11 16:15:00
1209
原创 ECMA Script6新特性(上)
ES6（ECMAScript 2015）引入了许多新特性，极大地提升了开发者的开发效率，使得代码的维护性和可读性也更高，提升了 JavaScript 的表达能力和开发效率，以下是一些主要的新特性：
2025-03-10 16:45:00
319
原创 一文彻底弄懂ES6中的Promise
ES6 中新引入了很多的特性，其中常用的有块级作用域箭头函数模板字符串解构赋值扩展运算符类和继承Promise对象，它们让 JavaScript 语言更加便捷和强大。尤其是Primse在项目的请求的异步处理中不可或缺，在于其是一个强大的处理异步操作的对象，它可以避免回调地狱，使异步代码的编写和维护更加清晰和高效。下面详细介绍Promise的常见 API 和用法，并给出相应的示例。
2025-03-06 20:15:00
545
原创 解决Trae无法登录的问题
App UnavailableUnfortunately,Trae is currently available in certain countries/regions. If we have any updates, we will promptly notify you via email. Also, please contact support at feedback@mail.trae.ai if you have any questions. Thank you for your under
2025-02-26 21:00:00
15598
14
原创 JavaScript中的symbol类型的意义和使用
JavaScript 中的Symbol类型是 ES6（ECMAScript 2015）引入的一种原始数据类型，它表示独一无二的值。下面详细介绍 Symbol 的意义和使用方法。
2025-02-21 19:00:00
315
原创 JavaScript中的Object.assign() api详解
Object.assign() 是 JavaScript 中的一个内置方法，用于将一个或多个源对象的所有可枚举属性复制到目标对象，并返回目标对象
2025-02-19 18:15:00
443
原创 JavaScript实现16进制随机色
函数生成随机数结合字符串操作来构建符合 16 进制颜色格式的字符串。掌握了这个方法，就可以在网页设计中轻松地实现各种动态颜色效果。函数三次，并将每次生成的随机颜色码打印到控制台。你可以多次运行这段代码，每次都会看到不同的随机颜色被输出。函数返回的颜色字符串直接用于 CSS 样式或 JavaScript 中操作 DOM 元素的样式。函数最终返回一个完整的 16 进制颜色字符串，例如。生成随机数，然后将其转换为 16 进制字符串。的函数，用于生成随机 16 进制颜色。字符和生成的 16 进制颜色码。
2025-02-11 13:54:23
460
原创 wangEditor富文本插件在vue项目中使用和媒体上传的实现
wangEditor是前端一个比较流行的简洁易用，功能强大的前端富文本编辑器，支持 JS Vue React，提供了很多丰富的功能，下面手把手教你实现wangWditor富文本插件在vue项目中配置，保存、图片上传等功能。无脑ctrl+c即可
2024-12-27 15:39:10
588
原创 前端使用fontfaceobserver库实现字体设置
要使用FontFaceObserver来加载设置项目本地的字体，先确保字体文件位于项目中或者可以从服务端获取到，这样就可以使用FontFaceObserver来检测并加载这些字体下面写个伪代码的示例：首先引入字体资源，css配置字体。
2024-11-28 19:45:00
655
原创 Vue项目实现单点登录(SSO)的逻辑和基本流程
大致的思路就是1.判断权限2.获取用户登录信息 3.获取http请求状态4.直接访问或去登录5.保存当前页并去登录页6.登录后保存用户信息并跳转回访问页面
2024-07-19 19:30:00
3634
原创 关于JSON.parse()使用报 Unterminated string in JSON的问题
JSON.parse()报错：SyntaxError: Unterminated string in JSON.url解析报错: Uncaught URIError: URI malformed at decodeURIComponent ()
2024-07-11 21:00:00
4112
原创 基于antdesign封装一个react的上传组件
项目中遇到了一个上传的需求，看了一下已有的代码很粗糙，而且是直接引用andt的组件，体验不太好，自己使用FormData对象封装了一个上传组件，仅供参考。
2024-07-09 20:30:00
518
原创 replaceAll is not a function 详解
在chrome 浏览器中使用 replaceAll 报这个错误，是因为chrome 版本过低， 在chrome 85 以上版本才支持
2024-06-11 13:24:04
2377
原创 react组件中的this
上面的代码中，在构造函数中可以用 this 读取到 function 声明的方法，因为构造函数是在组件实例的上下文中执行的。因此，当事件触发时，handleClick 中的 this 指向的是全局对象（在非严格模式下）或者 undefined（在严格模式下），而不是 MyComponent 的实例。简而言之，this.handleClick 是组件实例上的一个方法，而在构造函数中绑定 this 是为了确保在方法内部 this 指向组件实例，即使在它作为回调函数被传递给其他组件或方法时也是如此。
2024-06-04 21:30:00
662
1
原创 前端将DOM元素导出为图片
前端工作中经常会用到把一些元素导出，比如表格，正好项目有遇到导出为excel和导出为图片，就都封装实现了一下，以供其他需求的开发者使用：
2024-06-03 22:15:00
743
原创 vue-router之路由钩子函数应用解析
组件在创建时会触发created，但是每次进入路由时都会触发beforeRouteEnter，所以，当一个页面使用了keep-alive进行了缓存时，离开这个页面后再次进入时，不会再触发created，但是会触发beforeRouteEnter，这时候就可以使用路由钩子进行处理了。beforeEach的钩子函数，它是一个全局的before 钩子函数，beforeEach在每次每一个路由改变的时候都得执行一遍。这就是vue-router钩子函数的基础应用，当然还有很多其他的应用角度。
2024-01-17 19:45:00
3249
原创 nodejs中响应头写在createServer中和使用server实例监听‘request‘的区别和应用场景
Node.js HTTP模块中设置响应头的两种方式在功能上等价，但代码组织方式不同： 直接传参 - 通过http.createServer(callback)简洁写法，适合简单服务器和快速原型开发，代码紧凑。 显式监听 - 先创建实例再注册request事件，便于扩展其他事件（如错误处理、连接管理），支持动态修改处理逻辑和模块化代码，适合复杂场景。 选择依据：简单场景用直接传参，复杂需求用显式监听。两种方式底层实现相同，差异主要体现在代码组织灵活性上。
2024-01-11 19:29:28
827
原创 web安全之XSS攻击原理及防范
攻击者通过操纵DOM结构，诱导浏览器执行恶意脚本，这种攻击也是我们比较常见，也是比较隐蔽的，因为攻击者不需要在服务器端插入恶意脚本。：反射型XSS攻击是一种非持久性的攻击，它发生在恶意脚本从服务器端反射到客户端的过程中，通常涉及到用户通过点击一个链接或访问一个页面时，服务器端未经充分验证和转义的输入被直接输出到HTML中。：又称为持久性xss，这种攻击一般在第三方欺诈网站上，恶意脚本存储于服务器端，如数据库、消息论坛等，当用户请求一个包含恶意脚本的页面时，服务器将恶意脚本发送给用户，执行攻击。
2024-01-10 16:26:22
1450
原创 scss下解决父组件中使用::v-deep修改样式穿透到子组件的问题
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)而使用/deep/修改时报SassError: expected selector. 原因是sass不支持这个选择器。使用中发现了一个问题，就是当在父组件使用了v-deep修改自身组件或者第三方组件样式时，会影响到子组件中的样式，样式穿透的方式有：>>>、 /deep/、::v-deep这三种。使用>>>修改无效，原因是scss等预处理器却无法解析>>>第三种，使用::v-deep，
2023-10-30 17:24:27
3587
原创 Vue项目使用svg之svg-sprite-loader详细使用
项目中为了体验好、性能优、资源丰富等原因经常会用svg这种矢量图，但是svg不能直接像image标签一样直接使用，这就需要前端的同学自己处理了。当然你你也可以在main中引入并注册svg组件，我是为了方便维护把功能抽到了icon文件下面了。那这么好的东西怎么在前端vue项目中使用呢？组件属性的icon-file-name的值就是svg文件的名字。好的，就可以方便的使用svg了。
2023-10-17 16:55:57
1890
原创 关于echarts鼠标悬浮位置不准确的问题
当我们在为了适配一些小屏幕笔记本为了优化显示效果进行屏幕缩放后，会做一些适配性处理，比如使用transform的scale处理，亦或者使用devicePixelRatio处理自动化处理缩放，但是有时候会在项目中有echarts图表的时候会导致echarts图表上悬浮位置不准确。如何解决这个问题呢，那是因为开发者直接放大了body，如果只在body添加zoom缩放页面，会导致echarts图表的悬浮位置不准确, 故在echars外部容器添加zoom，在使用图表的父组件也同步放大即可。
2023-07-07 16:00:00
1795
2
原创 关于Vue项目下页面自适应pc端不同分辨率尺寸的方法
翻译过来就是在package.json文件中，存在一个叫做peerDependencies（对等依赖关系）的对象，它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包（意思就是对等依赖关系指定我们的包与某个特定版本的npm包兼容）；对等依赖关系最好的例子就是React，一个声明式的创建用户界面的JS库。前面我有一篇博客说的是用动态监听body的zoom然后自己设置，或者是window.devicePixelRatio和reansform的scale来处理笔记本等小屏幕的缩放兼容。
2023-07-07 11:14:09
5257
原创 关于echarts图表文本位置修改
实际开发中，我们会经常遇到echarts图表的文本label被旁边的柱子或者其他的压住，又或者我们想调整文本位置时怎么做呢?
2023-07-06 20:45:31
2024
原创 前端适配笔记本缩放125%，150%导致页面错乱问题
window.screen.availHeight > 1000 说明缩放选择的是100%，否则是125%、150%, 还有使用媒体查询的，直接拷贝过去试了一下一点用没有，但是我说明一下，这个肯定是一种解决方式，只是我仔细去研究，其他的同理，用了一下没有效果，由于前端在开发时使用的都是标准ui设计图，基本都是按照所以1920*1080， 而小屏幕笔记本由于分辨率高，所以导致的显示元素变小，因此很多笔记本的默认显示都是放大125%或者150%。我用的是vue，所以我把它加在了app.vue下的。
2023-07-04 15:43:35
8107
1
原创 vue中解决scss下::v-deep影响到子组件的问题
开发中经常会用到深度选择器来修改第三方组件库等子组件的样式，这时候就用到样式穿透(style Penetration)使用中发现了一个问题，就是当在父组件使用了v-deep修改样式时，会影响到子组件，修改为/deep/报。常用的有>>>、 /deep/、::v-deep。改为 >>>可以解决这个问题。
2023-05-18 16:32:27
1556
原创 vue实现基于elementui的全屏图片自定义预览
到elementUI看了一下，发现el-image是有这个功能的，而且支持旋转、放大缩小，原图，鼠标滚动，列表预览等基础功能，但是是基于小图点击预览大图的，官方api也没有提供触发预览的事件，所以手动实现了它的预览调用功能
2023-05-10 10:54:13
2134
1
原创 HTML5中关于解决video标签禁止右键和下载视频的办法
html5中的video标签类型的预览，由于原生的video标签添加了controls属性后，右下角的 …点击后 会出现‘下载’ ，‘播放速度’，‘画中画’ 的功能选项，但是由于有只读权限的问题，需要关闭掉‘下载功能
2023-03-21 15:07:30
6032
原创 vue根据环境动态打包BASE_API
项目需要在不同环境下运行，如开发，测试，生产等，但是每个环境下请求的服务地址不是确定的， 为了避免频繁切换请求的地址以及相关的配置容易出错的问题，新的vue-cli脚手架没有直接提供配置选项，怎么办呢？属性了，因为它变成了一个全局的变量，可以在任何地方使用，它会根据环境自动去赋值baseURL了。分别为.env.development，.env.test，.env.production。就像下面这种，就是.env文件只需要声明环境，不需要配置。首先我们在根目录新建3个文件，一、建立.env系列文件。
2023-02-17 20:30:00
4115
web/小程序/公众号等代码加固工具
2022-02-21
python中wxpython做的GUI界面怎么跳转？
2015-10-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人