weixin_43962020-CSDN博客

原创 el-input-number组件校验输入正整数

优点：定向监听，不会影响其他内容；缺点：无法监听中文输入法输入的内容和粘贴的内容。优点：可以限制中文输入法e的输入和粘贴；缺点：会清空之前输入的数字。监听输入框的内容，在输入内容不符合条件时清空输入框的值。限制输入框输入正整数，不能输入e和小数。监听键盘输入，输入e时不允许输入。

2024-03-29 16:37:19 301

原创前端使用正则表达式进行校验

设计思想是用一种描述性的语言定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的。在。

2024-03-22 17:03:48 957

原创 vue防止用户连续点击造成多次提交

给提交按钮加上disabled属性，在请求时先把disabled属性改成true，在结果返回时改成false。添加loading遮罩层，可以直接使用elementui等框架的loading，也可以使用自己搭建的遮罩层。在第一次提交的结果返回前，将提交按钮禁用。给按钮点击事件添加防抖。

2024-03-15 16:46:44 601

全等操作符由 3 个等于号（ === ）表示，只有两个操作数在不转换的前提下相等才返回。中存在隐式转换，等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等。的情况下，我们可以使用相等操作符（==），其他情况建议一律使用全等操作符（===）相等操作符（==）会做类型转换，再进行值的比较，全等运算符不会做类型转换，等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回。简单类型与引用类型比较，对象转化成其原始类型的值，再比较。比较，相等操作符（==）为。所以，除了在比较对象属性为。

2024-03-08 10:05:27 286

原创设备像素、css像素、设备独立像素、dpr、ppi 之间的区别

设备独立像素是一种逻辑像素单位，用于将 CSS 像素与实际渲染的设备像素进行关联。：设备像素比是设备的物理像素与 CSS 像素之间的比例关系。例如，如果设备像素比为 2，那么 1 CSS 像素将对应 2 个设备像素。：CSS 像素是在 Web 开发中使用的抽象单位，用于定义网页上的布局和样式。设备像素、CSS 像素、设备独立像素 (DIP)、设备像素比 (DPR) 和每英寸像素密度 (PPI) 是与屏幕分辨率和显示质量相关的概念。更高的 PPI 值通常意味着更高的像素密度和更细腻的图像显示。

2024-03-01 17:05:31 415

原创 Javascript数字精度丢失的问题

计算机存储双精度浮点数需要先把十进制数转换为二进制的科学记数法的形式，然后计算机以自己的规则{符号位+(指数位+指数偏移量的二进制)+小数部分}存储二进制的科学记数法。但是对于一个浮点数来说，因为小数点的存在，小数点的位置不是固定的。因为存储时有位数限制（64位），并且某些十进制的浮点数在转换为二进制数时会出现无限循环，会造成二进制的舍入操作(0舍1入)，当再转换为十进制时就造成了计算误差。主要是存储二进制时小数点的偏移量最大为52位，最多可以表达的位数是。的值为0或者1，e为小数点移动的位置。

2024-02-23 16:45:47 440

原创 scoped样式隔离原理

对于具有 scoped 特性的样式，Vue 会将选择器转换为带有唯一属性选择器的形式，例如 .class 会被转换为 .class[data-v-xxxxxxx]。在组件渲染过程中，Vue 会为组件的根元素添加一个属性值为唯一标识符的属性，例如 data-v-xxxxxxx。当组件渲染完成后，样式选择器中的唯一属性选择器或唯一类名将与组件根元素的属性匹配，从而实现样式的隔离。这里的唯一选择器是类似于 [data-v-xxxxxxx] 的属性选择器，其中 xxxxxxx 是一个唯一的标识符。

2024-02-04 17:05:20 453

原创什么是单点登录以及如何实现

（注意这个 Cookie 是当前应用系统的）当用户再次访问当前应用系统时，就会自动带上这个 Token，应用系统验证 Token 发现用户已登录，于是就不会有认证中心什么事了，此种实现方式相对复杂，支持跨域，扩展性好，是单点登录的标准做法。path属性默认为web应用的上下文路径，利用 Cookie 的这个特点，没错，我们只需要将Cookie的 domain属性设置为父域的域名（主域名），同时将 Cookie 的path属性设置为根路径，将 Session ID（或 Token）保存到父域中。

2024-02-04 16:53:41 1074

原创 es5 中的类和es6中的class有什么区别

es6为new命令引入了一个new.target属性，它会返回new命令作用于的那个构造函数。如果不是通过new调用或Reflect.construct()调用的，new.target会返回undefined。static静态方法只能通过类调用，不会出现在实例上，如果静态方法包含 this 关键字，这个 this 指的是类，而不是实例，static声明的静态属性和方法都不可以被子类继承。class类执行的话会报错，而es5中的类和普通函数并没有本质区别，执行是可以的。二、class类不存在变量提升。

2024-01-26 15:50:34 334

原创 Blob，ArrayBuffer和Base64

Blob和ArrayBuffer都是用于表示和处理二进制数据的对象，但Blob通常用于处理大量数据和文件，而ArrayBuffer用于处理更小粒度的数据。Blob对象提供了一些方法和属性，用于操作和读取二进制数据，而ArrayBuffer本身并不直接提供数据访问方法，需要通过TypedArray视图或DataView对象来读写数据。Blob是一种表示二进制数据的对象，可以存储大量的数据。Base64编码后的数据可以用于在文本协议中传输二进制数据，例如在网络请求中传递图片数据或在HTML中嵌入图片。

2024-01-19 14:55:58 412

原创 v-model 的原理

，将用户的输入同步到Vue实例中的属性，并在属性值变化时重新渲染视图。这使得我们可以轻松地将表单数据与Vue实例的状态保持同步，消除了手动监听和更新的冗余代码。是Vue.js框架中的一个指令，用于在表单元素和组件之间实现双向数据绑定。它提供了一种简洁的方式来将表单输入的值与Vue实例的属性进行关联。Vue会捕获该事件并更新绑定的数据，以及根据数据的变化重新渲染视图。等）自动为其添加相应的事件监听器，并在用户输入时更新绑定的数据。指令时，Vue会根据表单元素的类型（如。事件时，才会更新绑定的数据。

2024-01-12 15:02:38 632

原创虚拟DOM渲染到页面的过程

如果一个节点在新的虚拟DOM中存在但在旧的虚拟DOM中不存在，框架会创建该节点并添加到页面上。如果一个节点在新的虚拟DOM和旧的虚拟DOM中都存在，但其属性或子节点发生变化，框架会更新相应的DOM节点。虚拟DOM渲染到页面时，框架会根据Diff算法的结果进行DOM的创建、更新和删除操作。：框架会将新的虚拟DOM与旧的虚拟DOM进行对比，找出它们之间的差异。：如果一个节点在新的虚拟DOM中不存在但在旧的虚拟DOM中存在，框架会从页面上移除该节点。：框架会重新绑定事件处理程序，以便在更新后正确响应用户交互。

2024-01-05 15:45:27 484

原创前端跨页面通信方法

它提供了一个类似于发布-订阅模式的机制，通过创建一个广播频道，并在不同上下文中加入该频道，可以实现消息的广播和接收。：SharedWorker 是一个可由多个窗口或标签页共享的 Web Worker，它可以在不同页面之间进行跨页面通信。一个页面可以将数据存储在本地存储中，另一个页面则可以读取该数据并进行相应处理。通过监听 storage 事件，可以实现数据的实时更新。：IndexedDB 是浏览器提供的一个客户端数据库，可以在不同页面之间存储和共享数据。通过在一个页面中写入数据，另一个页面可以读取该数据。

2023-12-29 15:34:33 528

原创 vite 的构建流程

当浏览器请求某个模块时，Vite 会检查该模块是否已经被编译，如果没有，它将根据模块的类型（如 .js、.vue）采取不同的编译策略。总结起来，Vite 的构建流程主要是基于原生 ES 模块的按需编译，每个模块都被实时编译并返回给浏览器。此外，Vite 还支持热模块替换，可以在开发过程中实时更新代码。完成编译后，Vite 会将模块包裹在一个虚拟模块中，并将该模块作为一个请求的响应返回给浏览器。Vite 内置了热模块替换功能，使得在开发过程中修改代码后，可以实时更新浏览器中的页面，而无需刷新整个页面。

2023-12-22 15:51:01 454

原创 DOS及DDOS的原理及防御方式

DOS（Denial of Service）和DDOS（Distributed Denial of Service）是一种网络攻击方式，其主要原理是通过向目标系统发送大量的请求或数据流量，使目标系统无法正常服务或响应。DOS 和 DDOS 攻击是一种比较常见的网络安全问题，其防御需要综合运用多种技术手段和策略，包括流量过滤、负载均衡、加强认证和授权、升级硬件和软件等，并且需要及时调整和更新。升级硬件和软件：及时升级和更新系统软件，安装最新的安全补丁，以及增强硬件配置，提高系统的性能和安全性。

2023-12-15 15:48:19 934

原创 vue常用的修饰符

使用sync需要注意：使用sync的时候，子组件传递的事件名格式必须为update:value，其中value必须与子组件中props中声明的名称完全一致，注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用，将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的。在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是在change事件之后再进行信息同步。解析，则会返回原来的值。

2023-12-09 18:07:06 1747

原创 canvas 和 webgl 的区别

选择Canvas还是WebGL取决于具体的需求。如果只需要简单的2D图形和动画，Canvas是一个不错的选择。但如果需要更高级的3D图形渲染和性能，或者开发复杂的游戏或可视化应用程序，那么WebGL可能更适合。

2023-12-03 19:27:37 721

原创 js实现图片懒加载

IntersectionObserver 是一个新的 API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。它的用法：IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象（该参数可选）。在页面初始化的时候，<img>图片的src实际上是放在data-src属性上的，当元素处于可视范围内的时候，就把data-src赋值给src属性，完成图片加载。方式一：html实现。

2023-11-24 17:04:43 532

原创 css继承属性

在中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性关于继承属性，可以分成：继承中比较特殊的几点：

2023-11-17 15:27:22 443

原创 http1.0、1.1、2.0、3.0

QUIC 协议是谷歌推出的一套基于UDP的传输协议，它实现了 TCP + HTTPS + HTTP/2 的功能，目的是保证可靠性的同时降低网络延迟。引入管线化：发送请求后需等待收到响应后，才能发送下一个—>允许客户端同时并行发送多个请求，按照客户端发送的请求顺序返回响应，可能发生队头阻塞(上一个请求的响应若迟迟未处理完毕，后面的响应会阻塞)阻塞问题：http1.0是下一个请求的发送必须要等到上一个请求返回后才会进行，如果上一个请求没有返回，那么后面的请求就会全部阻塞。引入额外的缓存控制机制。

2023-11-10 16:41:58 228

原创 JS中null和undefined的区别

undefined 在 JavaScript 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，但是这样的做法是非常危险的，它会影响对 undefined 值的判断。当对这两种类型使用 typeof 进行判断时，Null 类型化会返回 “object”，这是一个历史遗留的问题。undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

2023-11-03 15:06:49 118

原创 JS清除字符串中的空格

replace方法在字符串中搜索值或正则表达式，返回已替换值的新字符串，不会更改原始字符串。的空格：str = str.replace(/^\s*|\s*$/g,“”)的空格：str = str.replace(/(\s*$)/g,“”)的空格：str = str.replace(/\s*/g,“”)的空格：str = str.replace(/^\s*/,“”)trim方法从字符串的两侧删除空格，不会更改原始字符串。trimStart() 方法从字符串的。trimEnd() 方法从字符串。

2023-10-27 17:06:19 1636

原创 vite 和 webpack 的区别

Vite 的构建速度比 Webpack 更快，因为 Vite 在开发环境下使用了浏览器原生的 ES 模块加载，而不是像 Webpack 一样使用打包后的文件进行模块加载。Vite 的配置相对更简单，因为它无需进行大量的配置，只需指定一些基本的选项就可以开始开发。综上所述，Vite 更适合用于开发环境下的快速构建，而 Webpack 则更适合用于生产环境下的复杂应用程序的打包处理，选择使用哪种工具需要根据具体项目需求进行评估。Webpack 的生态环境更加成熟，在社区中拥有广泛的支持和丰富的插件库。

2023-10-20 15:53:32 847

原创 JS数组方法map 和 forEach 的区别

2、map 方法会遍历数组中的每个元素，并将每个元素传递给回调函数进行处理，然后将处理结果组成一个新的数组并返回。而 forEach 方法仅仅是遍历数组中的每个元素，不进行任何处理，因此不能生成新的数组。3、map 方法会生成一个新的数组，而原数组不会被修改。而 forEach 方法不会生成新的数组，但是它可以修改原数组的值。map(): 创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。1、map 方法返回一个新的数组，而 forEach 方法不会返回任何值，仅仅是遍历数组。

2023-10-13 16:48:47 202

原创 JS实现节流和防抖公共函数

原理：规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

2023-09-27 10:11:45 91

原创 JS手动实现发布者-订阅者模式

发布-订阅模式是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。具体过程是：订阅者把自己想订阅的事件注册到调度中心，当发布者更新该事件时通知调度中心，由调度中心统一调度订阅者注册到调度中心的处理代码。

2023-09-22 16:23:18 92

原创 Vuex有几种属性以及它们的意义

每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，Module是将Vuex模块化的对象，目的是更好的维护。更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

2023-09-15 17:01:00 98

原创 vue-router路由守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航分为：全局的，单个路由独享的和组件级的。在全局前置守卫中，我们可以访问到即将要进入的路由对象 to，以及当前的路由对象 from。另外，还可以通过 next 函数控制路由的跳转行为。如果调用 next 函数并传入一个路由对象，则会跳转到该路由。如果不调用 next 函数，则当前路由不会发生变化。全局解析守卫是在路由解析之前进行拦截和控制的，它会在所有全局前置守卫 resolve 完成之后被调用。

2023-09-08 17:08:21 264

原创 vue自定义指令

通过自定义指令，你可以在 DOM 元素上添加自定义行为，并在元素插入、更新和移除时进行相应的操作。这只是一些常见的应用场景，实际上自定义指令的应用范围非常广泛，可以根据具体需求进行灵活的使用。通过自定义指令，你可以扩展 Vue 的能力，实现更复杂和灵活的交互行为。你可以创建一个自定义指令，在其中初始化和配置第三方库，并在适当的时机调用库的方法。你可以在自定义指令中根据用户权限进行条件判断，并修改元素的显示或行为。通过自定义指令，你可以监听输入框的值变化，并根据自定义的验证规则进行验证，以便提供实时的反馈。

2023-09-01 17:35:22 528

原创浏览器有哪几种缓存?各种缓存之间的优先级

如果服务器返回 304 Not Modified 响应，则表示客户端本地缓存仍然有效，可直接使用缓存的资源。如果强制缓存未命中，但协商缓存可用，则会向服务器发送条件请求，询问资源是否更新。Service Worker 是一种特殊的 JS 脚本，可以拦截网络请求并返回缓存的响应，以实现离线访问和更快的加载速度等功能。由于其可以完全控制网络请求，因此具有最高的优先级，即使是强制缓存也可以被它所覆盖。如果存在强制缓存，并且缓存没有过期，则直接使用缓存，不需要向服务器发送请求。

2023-08-25 16:29:35 886

原创前端-轮询

基于定时器的轮询使用 setInterval() 方法来定时发送请求，而基于递归的轮询则使用 setTimeout() 方法来控制下一次请求的时间。轮询是在固定的时间间隔内向服务器发送请求，即使服务器没有数据更新也会继续发送请求。而长轮询是先发送一个请求，服务器如果没有数据更新，则不会立即返回，而是将请求挂起，直到有数据更新时再返回结果。轮询会产生大量的无效请求，浪费带宽和服务器资源，并且对服务器的压力比较大。轮询是指在一定的时间间隔内，定时向服务器发送请求，获取最新数据的过程。

2023-08-18 16:49:12 2539

原创 vue插槽slots

插槽内容可以是任意合法的模板内容，不局限于文本，还可以传入多个元素甚至是组件，插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的，但插槽内容无法访问子组件的数据。插槽的内容无法访问到子组件的状态，然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据，需要一种方法来让子组件在渲染时将一部分数据提供给插槽，向一个插槽的出口上传递。默认插槽如何接受 props，通过子组件标签上的 v-slot 指令，直接接收到了一个插槽 props 对象。最终渲染出来的dom。

2023-08-11 16:27:42 145

原创层叠上下文

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的x轴，y轴以及表示层叠的z轴，层叠上下文即元素在某个层级上z轴方向的排列关系。注意，层叠等级并不一定由 z-index 决定，只有定位元素的层叠等级才由 z-index 决定，其他类型元素的层叠等级由层叠顺序、他们在HTML中出现的顺序、他们的父级以上元素的层叠等级一同决定。元素在同一个层叠上下文中的顺序规则，从层叠的底部开始共有七种层叠顺序，对于处在同一层的元素，它们的层叠顺序由它们在文档中出现的顺序决定。1、文档根元素（）；

2023-08-04 16:26:16 132

原创 JS类数组转化为数组

组各种元素检索 API 返回的都是类数组，如 document.getElementsByTagName，document.querySelectorAll 等DOM API；不过它只能作用于 iterable 对象，即拥有 Symbol(Symbol.iterator) 属性值，但是严格意义上来说，它不能把类数组转化为数组，如 { length: 3 }它将会抛出异常。由于借用 Array API，一切以数组为输入，并以数组为输出的 API 都可以来做数组转换，如。

2023-07-28 14:52:37 80

原创前端event loop事件循环机制

将javascript中非微任务的所有任务都归为宏任务比如：script中全部代码；（3）异步任务进入到Event Table，当异步任务有结果后，将相对应的回调函数进行注册，放入Event Queue；（4）主线程任务执行完空闲下来后，从Event Queue（FIFO）中读取任务，放入主线程执行；（5）放入主线程的Event Queue任务继续从第一步开始，如此循环执行；分为同步任务和异步任务，异步任务又分为宏任务和微任务。（1）主线程自上而下依次执行所有代码；（2）同步任务直接进入到主线程被执行；

2023-07-21 14:35:43 230

原创 TCP协议3次握手4次挥手

Client收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给Server，Server检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client与Server之间可以开始传输数据了。Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

2023-07-14 16:18:56 267

原创 VUE-服务端渲染SSR和静态站点生成SSG

如果用服务端渲染一个页面所需的数据对每个用户来说都是相同的，那么我们可以只渲染一次，提前在构建过程中完成，而不是每次请求进来都重新渲染页面。它带来了优秀的首屏加载性能。1.定义：Vue 支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”为能够交互的客户端应用。服务端渲染的应用需要一个能让 Node.js 服务器运行的环境，不像完全静态的 SPA 那样可以部署在任意的静态文件服务器上。一些外部库可能需要特殊处理才能在服务端渲染的应用中运行。

2023-07-07 16:26:09 874

空空如也

空空如也