- 博客(43)
- 收藏
- 关注
RSS订阅原创 Vue组件解析：自定义弹窗组件ByDialog详解
在Vue.js前端开发中，弹窗组件是常见的交互元素之一。为了提高开发效率并保持代码的可维护性，我们可以创建自定义弹窗组件。本文将详细解析Vue.js结合ElementUi自定义弹窗组件ByDialog的实现原理和使用示例，并提供相关代码和注释。
2023-06-28 14:36:07
3977
原创 使用Node.js开发服务器进行请求转发和CORS处理
总结起来，通过使用Node.js开发服务器进行请求转发和CORS处理，我们能够克服浏览触发的CORS限制，实现前端应用与目标服务器之间的无缝通信。总的来说，通过使用Node.js开发服务器进行请求转发和CORS处理，我们能够解决前端应用中的CORS限制问题，并实现与目标服务器的无缝通信。服务器会将请求转发到目标服务器，并在转发过程中处理CORS，确保请求的顺利进行。我们可以利用这些工具来创建一个中转服务器，将前端应用发送的请求转发到目标服务器，并在转发过程中处理CORS问题。开头的请求转发到目标服务器。
2023-06-27 18:33:09
1676
1
原创 typeScript（枚举篇）
使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举。
2023-06-21 17:47:38
1060
原创 typeScript（泛型篇）
软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
2023-06-21 15:16:16
1478
原创 typeScript（函数篇）
的值在函数被调用的时候才会指定。但众所周知，这不是一件很简单的事，尤其是在返回一个函数或将函数当做参数传递的时候。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。在所有必须参数后面的带默认初始化的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。与普通可选参数不同的是，带默认值的参数不需要放在必须参数的后面。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为。JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的。
2023-06-21 10:43:51
1594
原创 typeScript（类篇）
传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。当我们比较两种不同的类型时，并不在乎它们从何处而来，如果所有成员的类型都是兼容的，我们就认为它们的类型是兼容的。在上面的例子里，我们可以自由的访问程序里定义的成员。
2023-06-21 10:04:19
1938
原创 typeScript（接口篇）
TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
2023-06-20 17:37:26
1505
3
原创 Vue组件解析：自定义表格组件ByTable详解
ByTable是一个通用的Vue表格组件，用于展示数据并提供分页功能。它具有灵活的配置选项和插槽，可以满足不同场景下的表格需求。本文介绍了Vue组件ByTable的用法和属性配置，以及如何通过自动请求接口和分页功能实现数据的获取和展示。通过合理配置表头、插槽和相关属性，你可以根据具体需求创建灵活的表格组件。
2023-06-19 11:50:49
3309
原创 typeScript（基础数据类型篇）
为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。
2023-06-19 11:26:36
1198
原创 JavaScript中的延迟防抖和立即执行防抖
标题：JavaScript中的延迟防抖和立即执行防抖简介： 在JavaScript开发中，防抖函数是一种常用的技术，用于控制事件的触发频率。它可以限制事件处理函数的执行次数，从而提高性能和用户体验。本文将介绍延迟防抖和立即执行防抖两种常见的防抖模式，并提供相应的代码示例和用法说明。
2023-06-15 15:31:51
907
原创 使用JavaScript的getBoundingClientRect()方法获取元素位置信息
是DOM元素的一个方法，返回一个DOMRect对象，其中包含了元素的边界框（bounding box）信息。x：元素左边界相对于视口左边界的距离（即元素的水平偏移量）。y：元素上边界相对于视口上边界的距离（即元素的垂直偏移量）。width：元素的宽度。height：元素的高度。top：元素上边界相对于视口上边界的距离。right：元素右边界相对于视口左边界的距离。bottom：元素下边界相对于视口上边界的距离。left：元素左边界相对于视口左边界的距离。
2023-06-14 11:08:08
1020
原创 探索 JavaScript 中的 visibilitychange 事件：优化用户体验和性能
引言： 在现代 Web 开发中，优化用户体验和性能是至关重要的。而 JavaScript 提供的事件为开发者提供了一种监听页面可见性变化的机制，从而能够根据页面的可见性状态执行相应的操作。本文将深入探讨事件的作用、触发条件和如何使用它来改进用户体验和页面性能。
2023-06-13 18:06:43
1522
原创 加速Vue CLI 4.x项目的编译速度
介绍： Vue CLI是一个强大的工具，用于快速搭建和管理Vue.js项目。然而，在大型项目中，编译速度可能成为一个挑战。幸运的是，我们可以通过一些优化措施来加快Vue CLI 4.x项目的编译速度。本文将介绍一些有效的方法和配置，帮助您优化项目并提升开发效率。
2023-06-02 14:54:25
912
原创 使用enquire.js实现响应式布局
enquire.js 是一个小巧、灵活的 JavaScript 库，用于实现媒体查询的 JavaScript 回调。它可以帮助我们在不同设备上动态地调整布局和样式，从而实现响应式布局。
2023-05-30 15:04:30
856
原创 Git分支规范与最佳实践
热修复分支（hotfix/XXX）：热修复分支是用于修复线上 Bug 的，该分支应该从 master 分支上创建，修复完成后再合并回 master 和 develop 分支。主分支（master）：主分支是用来保存稳定版本的，只允许从其他分支合并而来，不能在该分支上直接进行修改。这样可以保证主分支上的代码是经过测试、可用的。开发分支（develop）：开发分支是用来进行日常开发的，所有的新功能开发都应该基于该分支进行。以上是一些常用的 Git 分支规范，具体的分支规范可以根据团队的实际情况进行调整。
2023-05-19 14:04:54
313
原创 Vue 项目中首页长时间白屏的原因及解决方法
在 Vue 项目中，首页长时间白屏的问题会影响用户体验和搜索引擎优化。本文介绍了首页长时间白屏的。
2023-05-14 14:03:43
6480
原创 CSS 伪类和伪元素详解及区别
CSS 伪类是用来选择处于特定状态的元素，比如说鼠标悬浮在元素上面、元素被点击等等。:hover鼠标悬浮在元素上时:active元素被点击时:focus元素获得焦点时:visited访问过的链接选择元素的某个子元素a:hover {color: red;这个样式表示当鼠标悬浮在链接上时，链接文本的颜色会变成红色。CSS 伪元素则是用来选择某个元素的特定部分，比如说元素的第一行或第一个字母。::before在元素前面插入内容::after在元素后面插入内容选择元素的第一行。
2023-05-14 13:25:59
273
原创 ES6与CommonJS的模块化规范比较
这意味着，如果在一个模块中导入了另一个模块，那么在编译时就会加载这个模块，而不是在运行时才加载。这意味着，如果要在浏览器中使用ES6模块，就必须使用Babel等工具进行转换。这意味着，如果要编写跨平台的JavaScript代码，ES6模块是更好的选择。总之，ES6模块是未来的趋势，但目前在实际开发中，很多项目仍然采用CommonJS规范。因此，在选择模块化规范时，应该根据具体情况进行选择，选择适合自己项目的规范。可以看出，ES6的语法更加简洁明了，而且可以在一个语句中同时导入多个模块。
2023-05-13 21:13:28
151
原创 MVVM与MVC的区别及应用场景介绍
其中，ViewModel充当着视图和模型之间的桥梁，它将模型的数据绑定到视图上，并监听视图的变化，将用户的输入反映到模型中。无论选择哪种架构模式，都应该注重代码的可维护性和可读性，提高代码的重用性和可测试性，以便于项目的开发和维护。视图与模型之间的关系不同：MVC中，视图和模型之间是通过控制器进行交互的，而在MVVM中，视图和模型是通过ViewModel进行交互的。MVC模式适用于简单的应用程序，例如博客、新闻网站等，它能够将应用程序的功能进行清晰的分离，并提高代码的可维护性和重用性。
2023-05-11 00:09:15
553
原创 深入比较Promise和async/await的区别、优势和劣势
在处理并发请求时，Promise 可以更好地提高代码性能，而在处理异步操作结果时，async/await 可以更加简洁明了地处理异步操作。Promise 的语法是 then/catch，而 async/await 的语法是 async/await 关键字。本文将深入比较 Promise 和 async/await 的区别、优势和劣势，以便开发者能够选择适合自己的方案。使用 async/await 可以让异步代码看起来像同步代码，减少了回调函数的嵌套，提高了代码的可读性和可维护性。
2023-05-07 10:09:06
2611
原创 Vue 2 和 Vue 3 的 diff 算法：性能优化的进化之路
Vue 3 的 diff 算法的优点是可以更好地处理静态节点，通过静态标记和编译时优化，避免了对静态节点的重复比较和 DOM 操作，从而提高了渲染性能。Vue 2 的 diff 算法采用了双端指针的方式，从新旧节点的首尾开始比较，根据 key 值进行匹配，从而找出相同、新增、删除、移动等节点的变化，最后对变化的节点进行 DOM 操作。Vue 3 的 diff 算法采用了静态标记和动态标记的方式，通过静态分析和编译时优化，减少了不必要的节点比较和 DOM 操作，从而提高了渲染性能。
2023-05-07 08:19:27
967
原创 深入浅出前端模块化规范
CommonJS 规范是同步加载，也就是说，只有在加载并执行完模块代码后，才会执行后续代码。CMD 是由国内的前端开发者玉伯提出的，它采用了就近依赖原则，即模块定义时只声明依赖，而不会立即执行，需要等到真正使用的时候才会执行。需要注意的是，虽然 CMD 规范在国内使用较为广泛，但是在国际范围内，AMD 和 ES6 模块已经成为主流的模块化规范。CMD 和 AMD 的主要区别在于模块加载的时机不同，也就是说，AMD 是异步加载模块，CMD 是就近依赖原则，需要等到使用时才会加载模块。一、CommonJS。
2023-05-06 23:50:13
224
原创 深入理解浏览器三次握手四次挥手
TCP连接的建立和关闭是网络通信中非常重要的部分，它的安全和可靠性直接影响到数据的传输质量。三次握手和四次挥手是保证TCP连接可靠性的重要手段，通过它们可以确保数据的可靠传输、防止攻击和保护网络安全。希望本文能够让读者深入理解浏览器三次握手四次挥手的过程和原理。
2023-05-05 11:15:18
256
原创 浏览器接收文件后是怎么工作
浏览器是我们日常使用最频繁的应用程序之一，它让我们可以轻松地访问互联网上的各种网站和应用程序。但是，你是否想过当我们在浏览器中输入网址、点击链接或者提交表单时，浏览器实际上是如何接收和处理文件的呢？在本文中，我们将学习浏览器接收文件后的处理流程，了解浏览器是如何将不同类型的文件转换成我们在屏幕上看到的内容的。
2023-05-03 09:53:23
94
原创 使用自适应高度和加载效果优化网站iFrame
在许多网站中，我们经常需要使用iframe来嵌入其他网站的内容，但是iframe的高度通常是固定的，如果嵌入的网页内容高度超过了iframe的高度，那么就会出现滚动条，影响用户体验。此外，当iframe加载较慢时，用户可能会感到不耐烦。因此，在这篇文章中，我们将介绍如何为iframe添加加载效果以及自适应高度的功能，提高用户体验。
2023-04-20 13:48:23
270
原创 JSON深拷贝可能出现的问题有哪些
对象中存在 undefined、NaN 和 Infinity：在使用 JSON.stringify() 方法将对象转换为 JSON 字符串时，这些特殊的值会被转换为 null，因此在深拷贝后，这些值将丢失原来的特殊含义。构造函数和原型链的丢失：使用 JSON.stringify() 和 JSON.parse() 方法进行深拷贝时，会丢失原对象的构造函数和原型链信息，即新对象会失去与原对象的继承关系。
2023-03-20 11:19:21
1566
1
原创 js快速排序
在上面的代码中，我们首先判断数组的长度是否小于等于 1，如果是，则返回原始数组。否则，我们选择数组的第一个元素作为基准点 pivot，并定义两个空数组 left 和 right 分别存储小于 pivot 的元素和大于等于 pivot 的元素。最后，我们使用 ES6 的展开语法将排好序的 left、pivot 和 right 数组合并成一个新的数组，并返回它。这个算法首先选择一个元素作为基准点（pivot），然后将数组分为左右两部分，使得左边的元素都小于基准点，右边的元素都大于等于基准点。
2023-03-20 10:39:29
34
原创 前端怎么使用缓存减少不必要的重复请求
该响应头告诉浏览器该资源最后一次修改的时间，浏览器在下次请求该资源时将发送If-Modified-Since请求头，服务器会比较If-Modified-Since与Last-Modified的时间戳，如果相同则返回304 Not Modified响应，表示资源未被修改，浏览器可以从缓存中加载资源。该响应头告诉浏览器该资源的过期日期，浏览器在该日期之前可以从缓存中加载资源，而不必再向服务器发送请求。与Cache-Control类似，如果该资源在过期日期之前被修改，浏览器将从服务器重新获取资源并更新缓存。
2023-03-20 10:03:58
472
原创 光标自动打字的效果
在这个示例中，我们首先在HTML中定义了一个div元素，并在其中添加了一个p元素以及伪类，分别用于显示打印的文本和光标。在CSS中，我们设置了打印文本和光标的样式，并定义了光标闪烁的动画。接着，我们定义了一个type函数，用于实现打印文本和移动光标的效果。在该函数中，我们首先计算出应该打印的文本，并更新显示的文本。然后判断是否打印完所有文本，如果没有则继续打印。在Javascript中，我们首先获取了打印文本元素，并定义了要打印的文本和每个字符打印的时间间隔和光标闪烁的时间间隔。
2023-03-12 14:03:23
219
原创 移动端怎么适配顶部跟底部的安全区域
通常来说，IOS 设备在页面顶部和底部都会预留出一定的安全区域，底部安全区域的高度和设备尺寸、系统版本等相关，一般在 34~44px 之间。而 Android 设备在页面顶部通常不需要预留出安全区域，但在底部有导航栏时需要预留出相应的安全区域。在 HTML 的 head 标签中添加 viewport meta 标签，以适配不同设备的屏幕大小，并启用安全区域填充模式。移动端适配顶部底部的安全区域，是为了保证页面在 IOS 和 Android 系统下的显示效果和用户体验。表示页面宽度等于设备宽度，
2023-03-11 13:24:27
3054
原创 前端大文件上传处理方案
前端大文件上传处理方案是一种用于上传大型文件的技术方案。它通常包括将大型文件分成小块，每块大小通常为几兆到几十兆，然后将这些小块逐个上传，最终在服务器上重新组合成原始文件。以上方案各有优缺点，需要根据具体场景和需求选择合适的方案，我在这里就只提供一个分片上传代码实例。流式上传：将文件分成多个流，逐个上传，减小服务器压力和传输时间。
2023-03-09 13:02:10
4014
原创 详细篇 (ES6Class类)
JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过关键字，可以定义类。基本上，ES6 的可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的改写，就是下面这样。上面
2022-06-11 16:02:03
12171
4
原创 call()、apply()、bind()的使用和区别
方法使用一个指定的 值和单独给出的一个或多个参数来调用一个函数。 方法调用一个具有给定 值的函数，以及以一个数组（或类数组对象）的形式提供的参数。 方法创建一个新的函数，在 被调用时，这个新函数的 被指定为 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。用法：apply()区别：我们从上面的就能看出来他们的区别，call()和apply()主要是参数不一样，call是参数1，参数2，apply是数组【参数1，参数2】而......
2022-06-11 14:52:43
153
原创 分享篇（如何编写干净的 JavaScript 代码？）
今天来分享几个编写干净的JavaScript代码的技巧~在JavaScript中，良好命名的关键不在于最短的变量名，而在于最具描述性的变量名。将代码中的一些数字定义为一个常量，以使它更有意义，也便于后期的维护。❌✅（2）语义化命名尽可能语义化变量和函数的名称。❌✅2. 保持简洁（1）避免重复为了更好地实现简洁的代码，应该遵循DRY（Don't Repeat Yourself）原则。减少代码的重复。❌✅（2）使用递归有些情况下，使用递归的代码会比迭代更加简洁
2022-06-08 11:22:56
110
原创 10 个超棒的 JavaScript 简写技巧
今天我要转载的是10个超棒的JavaScript简写方法，可以加快开发速度，让你的开发工作事半功倍哦。普通写法：我们通常使用中的方法合并两个数组。用方法来合并两个或多个数组，不会更改现有的数组，而是返回一个新的数组。请看一个简单的例子：简写写法：原作者分享的我们可以通过使用ES6扩展运算符()来减少代码，如下所示：其实上述的方式是可以的，但是扩展性不强，因为我们不可能在定义数组的时候就把要合并的数组添加进去，其次是后续我们要合并数组时都需要到原数组上去添加，我认为最好的写法是写成如下所示：
2022-06-08 09:56:53
79
原创 如何快速获取数组最后一个值
在不知道快速获取数组最后一个值时，我们的写法是：我们需要获取它的长度再去减1，然后通过下标得到最后一个值，本人认为这样的写法会比较麻烦，其实我们可以使用另外一种方式 = 》Array.prototype.at() 方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。方括号符号没有问题。例如，将返回第一个项目。然而，对于后面的项目，不要使用array.length，例如，对于最后一个项目，可以调用。(参见以下示例)语法 at(index) Copy to C
2022-06-06 21:49:23
8033
原创 Vue-router路由组件传参
正常情况下我们通用的传参方式主要是有一下两种方式：除了上面的，其实还有另外三种方式：1.布尔模式、通过 props 解耦2.对象模式、如果 是一个对象，它会被按原样设置为组件属性。当 是静态的时候有用。3.函数模式、你可以创建一个函数返回 。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。URL 会将 作为属性传递给 组件。请尽可能保持 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 ，请使用包装组件，这样 Vue 才可以对状态
2022-06-06 11:45:09
463
原创 JS设计模式通用设计原则
设计模式描述设计模式，简称Design Pattern,代表了最佳 的实践，通常被有经验的面向对象的软件开发人员所采用。它是软件开发人员在软件开发过程中棉铃的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段实践的试验和错误总结出来的。设计模式是一套被反复使用过的，多数人知晓的，经过分类编目的、代码 设计经验的总结，使用设计模式是为了重用代码、让代码更容易的被他人理解、保证代码可靠性。设计模式基于六大原则单一职责原则（S）：一个类只做一件事，一个类应该只有一个引起
2022-05-30 10:38:14
204
原创 10个 JS 小技巧
1. 用??代替||，用于判断运算符左侧的值为null或undefined时，才返回右侧的值??运算符是 ES2020 引入，也被称为null判断运算符( Nullish coalescing operator)它的行为类似||，但是更严||运算符是左边是空字符串或false或0等falsy值，都会返回后侧的值。而??必须运算符左侧的值为null或undefined时，才会返回右侧的值。因此0||1的结果为1，0??1的结果为0例如const response = { settin
2022-05-30 10:17:26
247
原创 JS 代码优化Tip
连环 if 优化在许多业务中，往往会涉及很多的分支，当分支太多的时候，我们很容易像 code_1 那样将 if-else-if 写成非常 ugly 的代码段，那么有什么优化手段呢,接下来我们来看看代码code-1 未优化的代码逻辑很简单，根据 code 返回对应的颜色// code-1// 未优化前代码function getColor(code){ if(code === '200'){ return 'blue-blue' }else if(code === '20
2022-05-30 09:38:34
137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人