- 博客(70)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue-修饰符
在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。为解决这一问题，Vue 为 v-on 提供了事件修饰符。函数进行处理转换为数字，如果用户输入的数据无法被。提供了一些修饰符，用于改变其行为。默认去除用户输入内容中两端的空格。处理，那么将返回原始值。事件变更数据修改为每次。
2024-07-13 09:23:22
321
原创 vue-ref与reactive
refref所创建的对象本身不具有响应性，而是将内部值包装在特殊对象中，通过.value访问响应对象。在模板中使用ref时，不需要加.value，会自动解包。ref可以为对象和非对象的普通变量增加响应性。（如果是对象用proxy包装再交给_value属性，如果是非对象的普通变量直接交给_value属性，通过get和set进行依赖收集和发布更新。如果是 shallow ref直接赋值给_value.）ref传递给函数，同时保留对最新值和响应式的连接和访问。ref可以持有任何类型的值，包括深层的对象、
2024-07-13 09:22:53
232
原创 vue-计算属性
计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。现在当你再运行 fullName.value = ‘John Doe’ 时，setter 会被调用而 firstName 和 lastName 会随之更新。一个计算属性仅会在其响应式依赖更新时才重新计算，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数。// 注意：我们这里使用的是解构赋值语法。，和其他ref类似，可以通过。
2024-07-13 09:21:41
230
原创 vue-模板引用
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 ref attribute：ref 是一个特殊的 attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，或在一个元素上初始化一个第三方库。
2024-07-13 09:20:55
422
原创 vue-侦听器
在setup()和script setup中同步语句的侦听器，会在宿主组件卸载时停止自动停止。（异步创建则不会，必须手动停止，比如定时器中创建侦听器）而一个返回响应式对性的getter函数，只有在返回不同对象时，才会触发回调函数。传入一个响应式对象，就会隐式的创建一个深层侦听器，所有嵌套变更都会触发回调。创建侦听器的返回值是一个函数，调用这个函数即停止对应侦听器。默认是懒执行的：仅当数据源变化时，才会执行回调。我们希望在创建侦听器时，立即执行一遍回调。声明周期内，数据源变更只回调一次。
2024-07-13 09:19:27
334
原创 UML-各种图
定义系统中的类，描述类的内部结构（属性、方法等），表示类之间的关系（泛化、实现、依赖、关联、聚合、组合）。依赖关系：较弱的关系，临时性，一个类的变化可能影响依赖它的类。关联关系：一般关系，对象独立存在，生命周期不相互依赖。聚合关系：整体与部分的关系，部分对象可以独立存在。组合关系：强聚合关系，部分对象的生命周期完全依赖于整体对象。
2024-07-10 08:31:48
837
原创 vue-路由自动化
工程中的Router会根据src/views目录结构自动生成路由配置，路由结构与文件系统结构保持一致，不需要手动编写，使得项目结构更加直观和易于理解。
2024-07-09 14:04:23
683
原创 js-中止请求控制
然后，将新的AbortController实例与请求的配置信息合并，并发送请求。如果请求被取消，则捕获错误并判断错误码是否为’ERR_CANCELED’，如果不是，则重新抛出错误。它通过传入URL作为参数，从一个Map对象map中获取对应的AbortController实例，并判断其是否已被终止。如果未被终止，则调用abort方法终止请求，并从map中删除该URL对应的AbortController实例。用户第一次修改查询条件并发送请求，在第一次请求回调之前，用户第二次修改了查询条件并发出请求，
2024-07-09 14:00:27
329
原创 UML-概述
是一种专门为面向对象系统的产品进行说明、可视化和编制文档的一种标准语言。UML是面向对象设计的建模工具。它是一种图形化、图标式的一种语言。做需求–> 形成需求文档 --> 系统设计（写代码之前的准备工作）–> 编码开发–> 测试 --> 运维…，就像甲方需求一个类似鸟巢的体育场，让我们盖出来，我们在没有图纸的情况下就开始施工。这时我们就需要使用UML去制作系统的图纸，形成系统设计文档，程序员面向系统设计开发。把产品当作一座建筑大楼，那么系统设计就是这座大楼的设计图图纸。
2024-07-06 12:39:33
312
原创 mock-前端数据模拟
是一个简单的 Node.js 服务端应用程序，这个工具的主要作用是提供一个模拟的后端服务，可以在前端开发过程中独立于后端进行简单工作。Mock.js 是一个用于生成随机数据的 JavaScript 库，它可以帮助前端开发者在没有后端数据的情况下模拟 API 响应。通过 Mock.js，开发者可以很容易地生成各种类型的数据，如字符串、数字、布尔值、对象、数组、图片等，并且可以自定义数据生成的规则。mock.js有两个作用：1、 产生模拟数据：调用mock接口后直接返回模拟数据。
2024-06-21 10:06:36
875
原创 vitest-前端单元测试
可以直接在vite.config.ts中直接对vitest进行配置，也可以新建一vitest.config.ts文件单独对vitest进行配置，如果使用vitest.config.ts单独对vitest进行配置的话，要注意vitest.config.ts会覆盖vite.config.ts中的配置。Vitest提供的功能还有很多，比如报告器、测试覆盖率、测试快照等，以上只提到一小部分，使用vitest达到提升代码质量，提高调试效率，提高代码可维护率的水平，还是需要一定的学习成本的。（it是test的简写）
2024-06-19 13:11:42
1245
原创 vite|webpack环境变量-多模式配置
webpack与vite配置几乎一样，不同点如下：（建议vue项目使用vite，原因很多，主要快~）运行测试：npm run staging。Vite 在一个特殊的。对象上暴露环境变量。
2024-06-17 10:41:06
642
原创 数据结构-二叉树
树（Tree）是一种非常重要的数据结构，它模拟了一种层级或者分支结构。在树结构中，数据以节点（Node）的形式存储，并且每个节点都可以有零个或多个子节点。除了二叉树最后一层，其他各层的节点数都达到最大个数，且最后一层从左向右的叶节点连续存在，只缺右侧若干节点。完美二叉树是特殊的完全二叉树。除了最下一层的叶子节点外，每层节点都有两个子节点，就构成了满二叉树。如果树中每个节点最多只能有两个子节点，这样的树就称之为二叉树。
2024-06-12 10:12:45
344
原创 数据结构-哈希表
他的结构就是数组，但是他神奇的地方在于对下标值的一种变换，这种变换可以称之为哈希函数，通过哈希函数可以获取到HashCode。哈希表不像数组、链表和树一样，直接画出来就知道他的结构，甚至原理。哈希表通常是基于数组进行实现的，但是对于数组，它有很多优势。
2024-06-11 15:54:47
544
1
原创 算法-冒泡排序
冒泡排序每一轮（index）循环把max-index 大的数放到数组length-index-1的位置上。第二次循环把倒数第二大的数放到数组倒数第二位置上。第一次循环把最大的数放到数组最后面。***以上描述前提是正序，倒叙相反。
2024-06-07 09:48:22
121
原创 es6+-箭头函数细节与应用场景
3、在不影响其他代码的情况下，保持代码间接。（比如数组方法中的函数，自行编写的回调函数）2、为了绑定外层this的函数（比如定时器层级的this）
2024-06-06 15:49:09
485
原创 ES6+-函数的双重用途，语法层面上判断函数的调用方式
函数可以被当作普通函数使用，也可以当作构造函数使用new关键字调用，有时候我们编写一个函数明确就是用来当做构造函数的，可无法限制其他人对此函数的调用方式。使用new.target来判断函数的调用方式，如果函数是使用new调用的，new.target会返回函数本身，如果不是返回undefined。
2024-06-06 14:57:44
271
原创 线性数据结构-队列
队列（Queue）是一种先进先出（First In First Out, FIFO）的数据结构，它按照元素进入的顺序来处理元素。
2024-06-06 11:46:28
545
原创 线性数据结构-栈
在JavaScript中，栈（Stack）是一种遵循后进先出（Last In First Out, LIFO）原则的数据结构。这意味着最后进入栈的元素将会是第一个被移除的元素。栈通常被用于限制线性数据的访问顺序，使得数据的插入和删除操作只能在栈的一端进行。
2024-06-06 11:06:15
747
原创 线性数据结构-链表
单向链表（也称为单链表）是一种简单的数据结构，其中每个节点包含两个部分：一个是数据元素（或称为值），另一个是指向下一个节点的指针。最后一个节点则指向一个空值来表示链表的结束。双链表所有的东西都可以用单链表表示，双链表还存在来个引用空间，极其浪费时间。2、链表的每一个节点都需要创建一个指向next的引用，浪费一些空间。1、只要内存足够大，就能存的下，不用担心内存碎片问题。2、每存放一个值，都要多开销一个引用空间。1、查询速度慢，（指的查询某个位置）线性的数据结构强调存储和顺序。2、链表的添加和删除非常容易。
2024-05-31 15:39:56
322
原创 线性数据结构-数组
因为数组定长，当想往长度为8的数组中添加第九个元素时，操作系统会开辟一段长度为16的新的空间（操作系统会开辟一些提前量，多划一些空间），然后将旧数组的八个元素复制到新的数组中，并将新添加的元素，添加到新数组的第九个位置上，并且销毁就数组。1、因为空间必须是连续的，如果数组比较大，当系统的空间碎片较多时，容易存不下。在长度8的数组中删除第5个元素，不改变数组长度，从第六个元素开始向左移动一个单元，即数组删除。2、因为数组长度是固定，所以数组的内容难以被添加和删除。3、数组的变量指向了数组第一个元素的位置。
2024-05-31 14:19:08
270
原创 js-异常的使用场景
在js中，异常表现为一个对象，不同的对象表达了不同的异常类型，不同类型的异常对应不同的错误。不仅浏览器会抛出异常，我们还可以自己抛出异常，手动抛出异常和浏览器抛出异常的效果一样。捕获异常就是处理错误，当错误发生后，我们对错误进行响应的处理，让程序不至于终止。所以有的异常构造器都继承于Error，更多信息参见MDN。每一个异常都是一个对象，通过对应的构造函数创建。上面的条件任意一个不满足都不应该处理异常。**永远不要为了不报错而处理异常。1、能够预知某段代码会出现异常。2、知道出现异常后要做些什么。
2024-05-30 10:57:58
263
原创 js-正则表达式
正则表达式（Regular Expression，简称regex或regexp）是一种强大的文本处理工具，它使用一种特殊的语法来描述或匹配一系列符合特定语法规则的字符串。正则表达式广泛应用于文本搜索、替换、验证等领域。
2024-05-29 16:14:53
387
原创 js-arguments与剩余参数
4、arguments在箭头函数中不可用，箭头函数没有自己的arguments，但是会捕获其封闭执行上下文中的arguments（如果有的话）arguments对象在函数体内自动可用，并且它是一个类似数组的对象(伪数组)，包含了传递给函数的所有参数。4、剩余参数可以在箭头函数中使用，就像在任何其他函数中一样。2、arguments是在函数体内隐式可用的，不需要声明。3、arguments包含了函数调用时传入的所有参数。剩余参数允许将一个不定数量的参数作为一个数组收集起来。1、剩余参数是真正的数组。
2024-05-28 16:02:54
188
原创 js-hasOwnProperty与in
hasOwnProperty方法仅检查自身属性，而不考虑原型链上的属性。如果检查的属性是来自原型链的，那么返回false。in运算符则检查自身以及它的原型链上是否存在该属性。如果属性存在自身或原型链，in都会返回true。hasOwnProperty与in都是被用于检查对象属性。但他们的检查范围不通。
2024-05-28 16:02:45
228
原创 js-函数防抖
函数防抖（debounce）是一种常用的编程技术，用于限制某个函数在短时间内的频繁触发，常常应用于性能优化和避免不必要的计算或操作。其核心思想是，如果一个函数持续地、频繁地触发，那么只在最后一次触发后，等待一定的延迟时间再执行该函数，如果在这个延迟时间内又触发了该函数，则重新计算延迟时间。函数防抖的基本实现原理是设置一个定时器，在每次函数调用时清除之前的定时器并重新设置，以确保只有在最后一次函数调用后，定时器才会触发并执行目标函数。这样，如果在设定的防抖时间内函数被多次调用，那么只有最后一次调用会被执行。
2024-05-28 16:02:28
388
原创 js-var与let
使用 var 声明的变量具有函数作用域或全局作用域（如果在函数外部声明）。这意味着在 for 循环外部，仍然可以访问到使用 var 声明的循环变量 i。使用 let 声明的变量具有块作用域，它只在其被声明的块（在这种情况下是 for 循环体）内部可见。一旦退出循环，i 变量就不再可用。
2024-05-27 16:20:31
222
原创 WebAPI事件传播机制
如：点击button后从开始捕获window->html->body->div->button，找到目标元素‘button’，然后开始冒泡button->div->body->html->window。示例代码中使用addEventListener给元素注册点击事件，addEventListener的第三个参数为true表示为捕获阶段，即捕获阶段触发回调点击事件。比如有个需求，点击div打印‘1’，点击button打印‘2’，如果不阻止事件冒泡的话，点击button就会先打印2，在打印1.
2024-05-27 15:04:10
1053
原创 WebAPI-DOM事件
事件发生后，会自动调用事件处理函数，并向函数传递一个参数，该参数为事件对象，里面包含了事件发生的相关信息，比如鼠标位置，键盘按键等等。DOM事件：某个DOM发生了某件事后，需要做的某些处理。①‘button（dom）’ 被 ②‘鼠标左键点击’之后，③‘登录微信’*另外，在事件处理函数中，this指针始终指向注册事件的dom。①‘谁’发生了②‘什么事’之后，③‘做了写什么’*缺点：某些事件不支持这种方式注册。*优点：易于监听，覆盖，移除。鼠标事件，键盘事件等等。1.dom.on+事件。
2024-05-26 19:12:50
453
原创 WebAPI-DOM基础
计算样式：元素最终计算出来的样式，只读（最终样式-设置的内联样式不一定就是最终显示的效果，《css属性计算过程》）getComputedStyle(dom)：获取该元素的计算样式，无法被重新赋值。*布尔属性会被自动转成Boolean，比如：下拉列表的checked属性。一个页面对应一个dom树，window.document：dom树的根。*标准属性始终都是存在的，不管你是否有在元素中设置该属性。*内联样式：元素的style属性中属性的样式，可以读写.*当给样式的赋值不合法时，赋值语句无效，不会报错。
2024-05-26 18:25:36
1807
原创 WebAPI-BOM
BOM:Browser Object Model， 浏览器模型， 提供和浏览器相关的操作（提供了一系列的多项和函数）window.location 提供浏览器地址栏的相关操作。window.history 页面历史记录操作。window 全局对象。
2024-05-26 15:04:56
186
原创 js函数方法-call/apply/bind
call/apply/bind都是函数的方法。Fun.call 改变函数中this指针。使用call实现继承。
2024-05-25 22:44:52
118
原创 js原型链对开发的影响
更改构造函数的原型会对所有圆形脸上有该构造函数的原型的对象产生影响。三.创建空原型对象（无隐式原型的对象，节约内存）一.在原型上修改会产生多大的影响。1.instanceof 关键字。二.利用原型链判断类型。
2024-05-25 21:49:41
217
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人