- 博客(37)
- 收藏
- 关注
RSS订阅原创 常见的浏览器跨域解决方法
JSONP（JSON with Padding）是一种利用标签的src属性不受同源策略限制的特性来实现跨域数据请求的方法。JSONP通过在前端动态创建标签，并将请求的URL设置为需要跨域访问的API地址，来获取跨域数据。// 处理返回的JSON数据// 动态创建script标签var'script';;;});
2024-03-01 16:31:36
1695
原创 浅谈vue函数式组件
函数式组件是通过一个返回虚拟 DOM 对象的函数来定义的。这个函数接收props作为参数，并且必须返回一个有效的虚拟 DOM 结构。// 定义一个函数式组件// 基于 props 计算或渲染内容return (// 或者使用 render 函数形式// 注册组件在这个例子中，是一个函数式组件，它接收一个props对象作为参数，并返回一个虚拟 DOM 结构。
2024-03-01 14:40:29
677
原创 浅谈vue的自定义指令
Vue 的自定义指令是一种强大的工具，允许你为 DOM 元素添加自定义行为。自定义指令可以通过 Vue 的 全局 API 或组件内的 选项来定义。下面是如何使用 Vue 的自定义指令的基本步骤：在模板中使用自定义指令在这个例子中，我们创建了一个名为 的自定义指令。当这个指令绑定到一个元素上时， 钩子函数会在元素被插入到 DOM 时被调用，使该元素自动获得焦点。扩展性：自定义指令允许你为 Vue 添加新的功能，这些功能在核心库中可能并不存在。通过自定义指令，你可以轻松地扩展 Vue 的功能，以
2024-03-01 14:20:54
675
原创 什么是虚拟DOM，有什么作用？有了解过diff算法吗？
在虚拟DOM中，当状态发生变化时，Diff算法被用来计算新旧虚拟DOM树之间的差异，并生成一个最小化的操作列表，这些操作将应用于真实的DOM树以实现更新。开发者通过操作这个JavaScript对象来描述视图层的状态，当这个状态发生变化时，虚拟DOM会计算出新的视图并与之前的视图进行比较，然后找出差异并应用到真实的DOM上。这样，真实的DOM只会更新必要的部分，从而减少了不必要的性能开销。：虚拟DOM基于差异计算，只更新需要改变的部分，而不是整个DOM树，这减少了不必要的DOM操作，提高了页面更新的效率。
2024-03-01 13:58:18
592
原创 浅谈Vue的数据响应式
Vue.js 的核心特性之一是它的响应式系统，这意味着当数据发生变化时，Vue 能够自动更新依赖这些数据的 DOM。这种能力使得开发者能够以声明式的方式构建用户界面，而不需要手动处理 DOM 更新。这就是 Vue 实现数据响应式的基本原理。需要注意的是，这个过程是 Vue 的内部实现，开发者通常不需要直接操作。开发者只需要关注如何声明式地绑定数据到模板，以及如何在数据变化时触发相应的逻辑即可。Vue 的响应式系统主要基于 Object.defineProperty() 方法来实现。
2024-03-01 13:50:28
503
原创 浅谈ES6的新特性(结合代码对比ES5语法)
ES6中的let关键字提供了块级作用域，解决了var关键字导致的变量提升和重复声明问题。这使得代码的作用域更加清晰，减少了潜在的错误。
2024-02-22 09:51:36
378
原创 浅谈前后端数据加密的方法
在实际应用中，通常需要根据具体场景和需求选择合适的加密方法。同时，也需要注意密钥的安全管理和保护，以防止数据泄露和非法访问。
2024-02-22 09:42:50
1023
1
原创 异步编程的几种实现方式
异步编程是一种编程模型，允许某些操作（通常是耗时的）在不阻塞主程序执行的情况下进行。这通常用于提高程序的响应性和效率，特别是在处理I/O操作（如网络请求或文件读写）时。
2024-02-20 16:21:01
521
原创 VUE3+TS+elementPlus项目基础搭建学习
完成以上步骤后，就成功搭建了一个使用 Vue 3, TypeScript 和 Element Plus 的项目，并创建了一个基础示例页面。在Vue项目中，TypeScript可以用于增强代码的类型安全性、提供自动补全和更好的重构工具。在你的项目中安装 Element Plus，这是一个为 Vue 3 设计的 UI 组件库。你可以根据项目的需求修改这个配置，比如调整目标版本、添加类型别名、配置路径别名等。在创建项目的过程中，CLI 会询问你一些问题来定制项目配置。这样，你就可以在Vue组件中通过。
2024-02-20 14:59:32
1758
原创 浅谈宏任务跟微任务的理解
在JavaScript的事件循环（Event Loop）中，任务被分为宏任务（MacroTask）和微任务（MicroTask）两种。这两种任务类型在事件循环中有不同的处理优先级和执行时机。
2024-02-20 14:37:22
356
原创 浅谈Vue组件之间的通信
这样可以将不同的功能模块的状态分开管理，同时也可以通过modules之间的通信实现非父子组件之间的通信。在大多数情况下，Vuex是最常用的方法，因为它提供了可预测的状态管理，使得组件之间的通信更加清晰和易于维护。：Vuex是Vue的状态管理模式，用于在多个组件之间共享状态。：如果两个非父子组件之间存在一个共同的父组件，那么可以通过父组件作为中介来实现它们之间的通信。这种方式主要用于高阶组件库的开发，但也可以用于非父子组件之间的通信。这样，任何组件都可以触发事件，并且任何组件都可以监听这些事件。
2024-02-20 14:31:29
1038
原创 程序员为什么不喜欢关电脑？
虽然这些原因解释了为什么程序员可能不喜欢关电脑，但也要注意到，长时间不关机也可能带来一些负面影响，如硬件磨损、性能下降等。因此，程序员应该在保持工作效率和系统健康之间找到一个平衡点。
2024-02-20 14:00:24
309
原创 常见的web前端开发框架推荐
总结来说，每个框架都有其独特的优点和适用场景。在选择框架时，你需要考虑你的项目需求、团队经验和个人偏好。同时，也要考虑框架的入手难度、性能、稳定性、适用场景和维护成本等因素。
2024-02-20 10:51:24
1259
原创 cookie，sessionStorage和localStorage的区别
cookie、sessionStorage和localStorage都是浏览器的本地存储技术，它们有一些共同点，如都是用来在客户端存储数据，但也有一些重要的区别。总的来说，cookie、sessionStorage和localStorage各有其特点，需要根据具体的应用场景和需求来选择使用哪一种。
2024-02-20 10:09:10
260
原创 介绍一下浏览器的缓存（Expires, Cache-Control等）
浏览器的缓存机制通过Expires以及其他相关头部字段，实现了对网页和资源的有效缓存和更新控制。这不仅提高了网页的加载速度，还降低了服务器的负载和带宽的使用，为用户提供了更好的浏览体验。开发者可以通过合理地设置这些头部字段来优化应用的性能。
2024-02-19 14:55:04
1294
原创 浅谈Java和JavaScript区别与联系
总的来说，Java和JavaScript虽然名字相似，但在设计目标、语法、类型系统、内存管理、性能和执行环境等方面存在显著区别。它们各自在不同领域有着广泛的应用，了解它们的区别和联系对于有效地使用这两种语言非常重要。Java和JavaScript虽然名字相似，但它们是由不同的公司开发的不同产品，存在明显的区别。
2024-02-19 14:40:50
337
原创 删除数组用delete和Vue.delete有什么区别
用于删除数组中的元素。这是 Vue.js 的响应式系统的一部分，确保当数组元素被删除时，任何依赖于这个数组的 Vue 组件都会被重新渲染。删除了索引为 1 的元素，并且数组的长度也被更新为 3。方法专门用于删除数组的元素，并且会更新数组的长度和触发视图的重新渲染。在 Vue.js 中，当需要删除数组元素时，应该使用。操作符用于删除对象的属性，而不是数组的元素。是两个完全不同的概念，它们在删除数组元素时的作用和效果也有所不同。来删除数组中的元素时，它实际上是将该位置的元素设置为。，而没有改变数组的长度。
2024-02-19 13:57:08
512
原创 el-select的change事件中传参
如果我们想在el-select的change事件中拿到一些特定的参数，就可以用到(…arr)=>checkManager(field.name,…arr)的方式传参。
2022-07-19 16:41:33
5470
原创 前端面试题
前端面试题介绍一下浏览器的缓存。（Expires, Cache-Control等）（5分）可以参考这篇博客。描述一下cookie，sessionStorage和localStorage的区别？（5分）可以参考这篇博客前端性能优化有哪些方法？（至少5种）（5分）可以参考这篇博客vue组件通信。（5分）可以参考这篇博客写一个验证微信号有效性的正则。（微信号格式：由6-20个字母，数字，连字符，下划线组成，且必须以字母开头）（10分） /^[a-zA-Z][a-zA-Z\d
2021-06-11 18:22:54
221
原创 关于options请求方式
关于options请求方式options请求方法的主要用途有两个：1、获取服务器支持的HTTP请求方法；2、用来检查服务器的性能。例如：AJAX进行跨域请求时的预检，需要向另外一个域名的资源发送一个HTTP OPTIONS请求头，用以判断实际发送的请求是否安全。为什么会出现options请求方式想必很多小伙伴在第一次遇到请求方式为options时，会有一丝诧异，有些人会百度百度，有些人可能压根不在乎。至于为什么会出现options请求，我也是百度查阅资料略知一二。这得从浏览器同源策略和跨域说
2021-05-28 15:35:44
7278
原创 使用 axios 拦截器解决「 前端并发冲突 」 问题
使用 axios 拦截器解决「 前端并发冲突 」 问题背景一般的处理方式 — 每次发请求添加 loading更优的解决方案：axios 拦截器统一处理1.interceptors2.cancel token:具体实现1.存储所有 pending 状态的请求2.在请求发出前检查当前请求是否重复3.在请求返回后维护 pendingRequests 对象4.需要清空 pendingRequests 对象的场景功能扩展1.统一处理接口报错提示2.发送请求时给控件添加 loading 效果3.支持多个拦截器组合使用总
2021-05-28 15:05:20
326
原创 斗鱼自动发弹幕
斗鱼自动发弹幕(function () {var timer = null;var spred = [’.’, ‘.’, ‘.’, ‘.’, ‘.’];var start = 1;// 加载样式var fixInp = document.createElement(‘textarea’);var fixSend = document.createElement(‘input’);var fixStop = document.createElement(‘input’);var tips1
2021-05-28 15:02:18
7118
9
原创 canvas实现登录的图形验证码
canvas实现登录的图形验证码html部分的代码如下 <div class="s-canvas" > <input type="text" placeholder="请输入右侧四位随机码" v-model="randomCode"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="
2020-08-26 11:21:44
736
原创 本地vue项目的本地调试，同一个局域网下如何让其他人也可以访问我的本地项目
本地vue项目的本地调试，如何让其他人也可以访问我的本地项目（同一个局域网下）我们只需要在config文件夹下配置下host属性，只需要把host:"",里面的值改为你本地的ip即可，记得加上端口号如果是vue-cli3没有config文件，就在根目录创建上vue.config.js文件，然后同样配置host属性即可。...
2020-08-18 15:37:57
6444
原创 element的日期范围选择器快捷选择今日，昨日，本周，上周，本月，上个月，禁止选择当前日期之后的日期
element的日期范围选择器快捷选择今日，昨日，本周，上周，本月，上个月，禁止选择当前日期之后的日期 <template> <div class="card-data"> <el-date-picker v-model="orderValue" type="daterange"
2020-08-18 15:20:38
1649
原创 浅谈Vue状态管理器
Vue状态管理器1.什么是vuex?vuex是一个vue.js应用程序开发的状态管理模式,他采用集中式存储管理应用的所有组件的状态，并以相应的规则保证以一种预测的方式发生改变。2.使用vuex的原因当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，以一个单例模式管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为。3.vue...
2019-11-30 20:26:19
465
1
原创 关于git的一些基本操作，配置密钥拉代码
文章目录1.目录2.git2.1 创建本地的版本库2.2 工作区编写代码，编写完毕之后把代码存入到暂存区2.3 查看当前git的状态2.4 把暂存区的代码提交到版本库中2.5 配置git用户信息2.6 创建远程仓库2.7 上传本地仓库的代码到远程仓库2.8 配置ssh秘钥2.9 项目组成员克隆远程的代码（仅此一次）2.10 项目组成员更新自己的代码1.目录2.gitGit是目前世界上最先...
2019-10-11 22:04:07
321
原创 sass的语法及其用法
文章目录1、sass语法1.1 css的编译模式1.2 sass介绍1.3 如何使用scss2、sass用法2.1 安装 sass 模块2.2 配置处理scss文件gulp的任务3、学习scss 语法3.1 学习scss的注释语句3.2 变量3.2.1 单值变量3.2.2 scss做四则运算3.2.3 多值变量3.2.4 复杂变量 - 循环3.3 scss嵌套3.4 mixin 混入3.5 扩展 ...
2019-10-11 22:00:54
358
原创 js实现放大镜（源代码）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-09-22 20:02:17
1664
转载 canvas 制作flappy bird（像素小鸟）全流程
flappy bird制作全流程：一、前言像素小鸟这个简单的游戏于2014年在网络上爆红，游戏上线一段时间内appleStore上的下载量一度达到5000万次，风靡一时，近年来移动web的普及为这样没有复杂逻辑和精致动画效果，但是趣味十足的小游戏提供了良好的环境，同时借助各大社交软件平台的传播效应，创意不断的小游戏有着良好的营销效果，得到了很多的关注。此前在网上查询了很多关于这个小游戏...
2019-09-14 20:36:51
1674
原创 js实现烟花效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #container{ width: 80%; height: 600px; border: 2p...
2019-09-09 17:07:32
1224
原创 js模拟下拉菜单-键盘、鼠标（代码详解）
以下代码实现了下拉菜单的所有功能，既可以鼠标操作也可以通过键盘实现上下选择，基本效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
2019-08-30 12:16:07
510
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人