- 博客(49)
- 收藏
- 关注
RSS订阅原创 取消Element UI响应式设计——打造固定布局的菜单
要取消Element UI导航菜单的响应性，我们可以使用自定义的CSS样式来覆盖框架的默认样式。具体来说，我们需要设置菜单项的水平排列（flex-direction: row 或者 mode="horizontal"），并使其宽度为100%，以保持固定的布局。
2023-11-14 16:20:59
161
原创 使用JavaScript实现定时任务队列
在这篇文章中，我们将探讨如何使用JavaScript实现一个基于一定时间间隔连续执行任务队列的功能。我们将通过创建一个简单的TaskQueue类来实现这个功能，并使用setTimeout函数来控制任务的执行时间。这个TaskQueue类可以用于处理需要定时执行的任务，例如定时处理数据、进行周期性的事件触发等。
2023-11-07 15:49:45
93
原创 Antv G6入门之旅--combo图
G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight，为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js，当我遇见 AntV G6 后，突感惊喜，其内含丰富的效果与强大的功能。相对于 ECharts，AntV G6 的图表种类更多，也更灵活，更容易上手；而相对于 D3.js，AntV G6 的 API 更为简单易用，适合快速上手。
2023-10-23 17:36:39
513
翻译 使用 Doctype 激活浏览器模式
本文档解释了现代Web浏览器为同时处理根据Web标准和20世纪90年代后期盛行的传统做法编写的网页内容而实现的引擎模式。涵盖了基于Gecko、Webkit、Chromium和EgdeHTML等引擎的浏览器，侧重于模式选择机制，并避免使用旧版模式。目的是提供有关如何避免使用旧版模式的信息，并进行足够的研究以令人信服。
2023-10-23 16:48:07
40
原创 实时更新进度条：JavaScript中的定时器和异步编程技巧
在Web开发中，有许多场景需要实时地更新页面上的进度，例如上传文件、数据处理等。本文将介绍如何利用JavaScript中的定时器和异步编程技巧来实现实时更新进度，并探讨一些其他解决方案。本文介绍了如何利用JavaScript中的定时器和异步编程技巧实现实时更新进度的效果，同时也探讨了一些其他解决方案。根据具体场景的需求，选择合适的方法来实现实时更新将会极大地改善用户体验。
2023-09-22 17:07:17
238
原创 定制化图标——Element UI 组件图标替换指南
本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。
2023-09-14 16:59:10
1056
原创 D3.js入门之旅--基础讲解
D3.js（Data-Driven Documents）是一个用于创建数据可视化的JavaScript库。它使用HTML、SVG和CSS等Web标准来呈现数据，帮助开发者通过数据驱动方式构建交互式、动态的可视化图表和图形。D3.js的主要优点包括灵活性、强大的数据处理能力和对Web标准的广泛支持。在学习D3.js时，我们将了解到如何使用JavaScript操作和绑定数据，创建可扩展的可视化效果，并在图表中实现交互和动画等功能。
2023-09-12 15:53:35
192
原创 CSS实现白天/夜晚模式切换
在网页设计和用户体验中，模式切换功能是一种常见的需求。模式切换可以为用户提供不同的界面外观和布局方案，以适应其个人偏好或特定环境。在这篇博客中，我们将探索如何使用纯CSS实现一个简单的模式切换效果，无需依赖JavaScript的运行。使用纯CSS实现模式切换功能的好处之一是它可以提供更好的性能，尤其是在移动设备上。纯CSS解决方案能够充分利用浏览器的硬件加速，并避免了JavaScript引擎的运行开销。此外，纯CSS实现还能简化代码结构，减少对外部脚本的依赖。
2023-08-28 14:24:24
1152
2
原创 树状表格子节点移动 - 在Vue.js中实现上下移动子节点的表格功能
本文介绍了如何在Vue.js框架下实现一个树状表格，其中支持选择子节点行的上下移动。通过这个功能，用户可以方便地改变子节点的顺序。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。
2023-08-28 11:46:00
565
原创 树状表格父节点选择 - 在Vue.js中实现仅选择父节点的树状表格功能
本文介绍了如何在Vue.js框架下实现一个树状表格，其中只支持选择父节点的复选框。通过这个功能，用户可以方便地选择表格中的父节点，而无需关心子节点的选择。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。
2023-08-25 16:48:11
405
1
原创 借用空数组方法：处理类数组的对象的实用技巧
总之，借用空数组的方法是一种方便而常见的技巧，可用于处理类似数组的对象。通过将数组的方法与这些对象绑定，我们可以使用数组的方法来处理它们，提高代码的可读性和简洁性。例如，可以使用 Array.from() 方法将类似数组的对象转换为真正的数组，然后直接使用数组的方法来操作。同样的技巧也适用于其他类似数组的对象，比如 Arguments 对象，它是一个包含函数参数的类数组对象。通过将数组的方法与类似数组的对象绑定，我们可以将这些方法应用于这些对象，就好像它们是真正的数组一样。在上面的代码中，我们首先通过。
2023-08-16 10:58:43
144
原创 提升Element UI分页查询用户体验与交互：实现修改未保存提示
我实现的功能是在element ui的分页组件中进行分页查询时，如果当前有未保存的修改数据就提示用户，用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据；选择不放弃，不重新查询，并且显示条数选择框保持原样（选择框中文字与选择列表中选择项），页数跳转也是同样的功能。例子说明：当我们修改了表单某项数据但未保存时。 更改每页显示条数：我们点击显示条数选择框的 '20条/页'，此时会弹出一个提示如图。选择确定就重新查询渲染，未保存数据就丢失了；选择取消的话，不重新查询，并且显示条数保持原样
2023-08-08 14:59:16
1002
原创 TypeScript 5.2 新特性：探索 ‘using’ 关键字的强大功能
TypeScript 5.2 将引入一个新的关键字 —— 「using」，它的作用是：当离开作用域时，你可以使用 Symbol.dispose 释放掉任何内容。using 对于管理文件处理、数据库连接等资源非常有用。Symbol.dispose 是 JavaScript 中的一个新的全局符号。任何带有 Symbol.dispose 功能的都被视为“资源”—— “具有特定生命周期的对象” ——并且可以与关键字 using 一起使用。
2023-07-22 11:58:03
539
原创 如何实现并发控制的Promise队列调度器
当涉及到并发控制时，Promise是一种强大的工具，广泛应用于现代编程中。本文介绍了Promise并发控制的相关概念。总结而言，Promise并发控制是一种强大且灵活的工具，可以优化应用程序的性能和用户体验。根据具体的需求和应用场景，我们可以灵活地使用Promise并发控制来管理并发任务，并确保数据的一致性和正确性。通过掌握Promise并发控制的实践，开发人员可以更好地处理并发任务，提供高效的应用程序，并提升用户满意度。
2023-07-18 12:53:43
455
原创 详细分析CSS伪类:only-of-type
2.特定状态下的样式变化：如果在某些特定状态下，你想要为唯一的某个特定类型的标签应用不同于其他同类型标签的样式，:only-of-type 可以帮助你实现这个效果。通过使用 :only-of-type 选择器，你可以确保只有一个该类型的标签应用特定的样式，而其他相同类型的标签不会受到样式的影响。比如上述结构，因为p、span、i都是在div里唯一存在的，就可以用div>p:only-of-type,div>span:only-of-type,div>i:only-of-type来选中三者。
2023-07-17 11:06:03
236
原创 我的创作纪念日
接近一年的时间，获得了许多阅读和关注，被人认可的感觉最是能督促人前进。也接触了很多大佬，更加了解这个领域，从转发文章更多到现在基本都是自己的文章，也希望自己的文章能帮助到其他人。觉得日常接触了很多东西，但是一旦长期不用，再想拾起便是不那么容易，光说当时的构思就不复存在，还要去找各种资源未免不让人扫兴。希望记录更多日常接触到的知识，在互联网上留下不独属于自己的一小块痕迹，谁又知道十年后的自己咀嚼当下时又是什么心情呢？而且常常觉得自己懂了，但是应用时才发现相差颇多，故最终还是决定把他们都记在纸上。
2023-07-12 11:25:58
68
原创 JavaScript 生成器函数(generator)详解：优雅处理异步任务流
Generators 是 JavaScript 中的一种特殊函数，它们可以暂停执行并根据需要生成多个值。通过 yield 关键字，生成器函数可以在每次被调用时产生一个新值，这使得它们非常适合处理大量数据或需要延迟计算的场景。本文将详细介绍 generators 的作用、用法以及与其他语言特性的配合使用。
2023-07-03 15:09:16
1744
1
原创 reduce解决读取多层嵌套对象属性
可以看出官方推荐的用法是使用这个累加器可以方便的计算一个数组元素的和，通过 return 可以把每次迭代的值返回给total作为下一次的初始值，如果我们 return 一个对象的话，不就可以依次读取多层嵌套的对象的属性了吗？我们将子级结构作为上一次的值返回，从而实现遍历多层嵌套结构。在reduce函数的回调函数中，根据需要选择将子级结构与累积值（上一次的值）进行合并或者进行其他操作，并将结果作为下一次迭代的累积值返回。在使用reduce时突然发现reduce似乎可以遍历对象嵌套结构。
2023-06-30 09:27:21
194
原创 JS flat手写实现与对象进行flat
实现js的数组扁平化，flat()是ES2019引入的特性，是 JavaScript 数组的一个方法，用于将多维数组扁平化为一维数组。该方法可以接收一个可选的参数 depth，用于指定要扁平化的嵌套层数。默认情况下，它只会将数组降维一层。如果传递的参数大于 0，则会按照指定的层数进行扁平化。如果传递的参数是 Infinity，则会完全扁平化所有嵌套层级。
2023-06-27 11:33:28
272
原创 TypeError: Cannot read properties of undefined (reading ‘classList‘)
使用swiper完成轮播图时出现报错：TypeError: Cannot read properties of undefined (reading 'classList')
2023-06-25 15:49:56
868
原创 ant design vue选择框背景色更改
因为要实现网页白天模式和夜间模式的切换，那相应文字和组件颜色也要适配对应的主题，而a-select默认的白色背景色在夜间模式下非常突兀，故我们要修改选择框和选项列表框的颜色。另外关于下面代码中的getPopupContainer这个API，是因为a-select默认相对于body定位的，故我们点开选项列表后滑动页面，选项列表会相对视口固定，即与选项框分离，使用getPopupContainer将a-select绑定到他的父节点上，这样就解决了两者分离问题。
2023-06-23 17:46:22
1215
1
原创 promise的前世今生
Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中。代码书写比较new Promise(请求1).then(请求2(请求结果1)).then(请求3(请求结果2)).then(请求4(请求结果3)).then(请求5(请求结果4)).catch(处理异常(异常信息))比较一下这种写法和上面的回调式的写法。我们不难发现，Promise 的写法更为直观，并且能够在外层捕获异步函数的异常信息。
2023-06-22 16:35:07
106
原创 vue3中封装echarts组件并实现夜间模式
myClass是白天模式或者夜间模式，title为图表标题，在封装的echarts组件中传入到自己封装的baseTitle组件中，data为图表的数据，color是图表中的颜色，如果对图表颜色需求较多的话，还可以将颜色细分后来封装。饼图：圆环显示，圆环中间显示数据总数，能自定义圆环各项颜色，legend实现数据名与值的显示，并且两者颜色不一致。直方图：取消横纵坐标，悬停显示信息，数据可以有不同的颜色。
2023-06-22 16:19:11
339
原创 VUE实现级联选择框与选项互斥
我们看到二级选择框的选择项并没有像一级一样直接双向绑定选项的code，因为一级选项虽然能多选，但是数据结构是对象，而二级是数组，如果直接item.secondaryIndicators[index].itemCode就有问题，故用一个secondaryIndicatorkeys来单独存储二级选项的code。功能布局如下图，实现根据一级选项的code去查询二级选项，并且其他二级选择框无法再次选中已经被选的二级选项。上面就实现了基本的级联功能，但是没用实现二级选项的互斥，下面我们来实现二级选项互斥。
2023-06-13 14:54:49
372
原创 VUE实现禁止选择未来时间的日期选择器
那么先选中59分钟再选择当前时间会导致BUG吗？我们实验一下，发现选中小时后分钟会被限制，如果之前选中的分钟在未来会被清空，需要重新选择，如果是过去或者正在发生的则会保持。PS. 虽然点开日期选择框，默认选中了当天，但是disabledTime中的current此时为null，故在if判断中要加上!此时是2023-06-13 11:41，似乎分钟没用生效？单位：年、月、日、时、分。根据考勤时间查找列表项。
2023-06-13 11:47:26
392
原创 手写call方法改变this指向
封装一个myCall函数，用来实现call函数的功能。myCall函数接收多个参数，第一个参数是fn，代表要执行的函数，第二个参数是context，代表需要显式改变的this指向，之后的参数都是fn的参数。
2023-04-07 13:38:28
221
原创 Vue数据渲染问题
经过排查后发现，是因为从服务器请求回来的数据，大部分商品数量都是1，而我们在视图上输入非法数据后，组件将这些非法数据处理为1返回app.vue，因为本身数据就为1,等于没有改变，故不会重新渲染，而我们输入的非法数据就留在的视图上。当点击任意勾选事件、增减商品数量的事件后，视图会刷新为从服务区请求回来的数据中的数量（大部分为数量1）。先将商品数量赋值为0（因为购物车中不可能为0），再赋值给商品数量为1就可以重新渲染了。场景：在购物车中，可以输入商品数量，但输入非法数据时，数量会修改为1。
2023-04-05 20:01:08
193
转载 EventLoop的宏任务、微任务执行（图文讲解）
事件循环Event Loop，这是目前浏览器和NodeJS处理JavaScript代码的一种机制，而这种机制存在的背后，就有因为JavaScript是一门的语言。单线程和多线程最简单的区别就是：单线程同一个时间只能做一件事情，而多线程同一个时间能做多件事情。而JavaScript之所谓设计为单线程语言，主要是因为它作为浏览器脚本语言，主要的用途就是与用户互动，操作Dom节点。而在这个情景设定下，假设JavaScript。
2023-03-31 23:59:30
388
转载 web性能优化的实用技巧
但是js下载仍然会阻塞其他资源的下载，如图片。如果浏览器不采用“白屏”机制，将页面内容逐步显示（如Firefox），则后加载的样式表将导致页面重绘重排，将会承担页面闪烁的风险。1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。
2023-03-26 22:22:25
278
1
原创 为什么要使用base64？
Base64编码是一种常见的二进制数据表示方式，通过将二进制数据转换为文本形式，便于传输和存储。它在许多应用场景中发挥着重要作用，例如电子邮件附件传输、HTTP协议授权信息、数据URL和图像数据存储等。虽然Base64编码会增加数据大小，但却提供了广泛的兼容性和可读性，使得二进制数据能够在文本环境中方便地处理。
2023-03-25 21:10:34
806
转载 开源协议 - 几种开源许可比较
GPL的出发点是代码的开源/免费使用和引用/修改/衍生代码的开源/免费使用，但不允许修改后和衍生的代码做为闭源的商业软件发布和销售。而在MPL（1.1版本）许可证中，对源代码的定义是:“源代码指的是对作品进行修改最优先择取的形式，它包括:所有模块的所有源程序，加上有关的接口的定义，加上控制可执行作品的安装和编译的‘原本’（原文为‘Script’），或者不是与初始源代码显著不同的源代码就是被源代码贡献者选择的从公共领域可以得到的程序代码。LGPL是GPL的一个为主要为类库使用设计的开源协议。
2023-03-25 15:15:25
1240
转载 哈希（Hash）与加密（Encrypt）
最有效的方法就是“加盐”，即在密码的特定位置插入特定的字符串，这个特定字符串就是“盐（Salt）”，加盐后的密码经过哈希加密得到的哈希串与加盐前的哈希串完全不同，黑客用彩虹表得到的密码根本就不是真正的密码。对于单机来说，暴力枚举法的时间成本很高（以14位字母和数字的组合密码为例，共有1.24×10^25种可能，即使电脑每秒钟能进行10亿次运算，也需要4亿年才能破解），字典法的空间成本很高（仍以14位字母和数字的组合密码为例，生成的密码32位哈希串的对照表将占用5.7×10^14 TB的存储空间）。
2023-03-23 21:09:45
1886
原创 Web元素定位与尺寸：理解page、client、screen和offset的区别
当处理网页中的元素位置和尺寸时，常常会遇到一些属性和概念，例如 pageX、clientY、screenWidth、offsetLeft 等。这些属性用于描述元素在不同坐标系统中的位置和尺寸，理解它们的区别很重要。在这篇博客中，我们将深入探讨 page、client、screen 和 offset 的含义以及它们之间的区别。
2023-03-22 22:27:17
337
转载 Fetch是什么？Fetch与Axios、Ajax
XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。Fetch 的出现就是为了解决 XHR 的问题。Fetch、Ajax、Axios区别。
2023-03-20 21:18:20
294
转载 什么是NPX
npx 会在当前目录下的./node_modules/.bin里去查找是否有可执行的命令，没有找到的话再从全局里查找是否有安装对应的模块，全局也没有的话就会自动下载对应的模块，如上面的 create-react-app，npx 会将 create-react-app 下载到一个临时目录，用完即删，不会占用本地资源。接下来本文就简单地聊一聊npx。--ignore-existing 告诉npx忽略本地已经存在的模块，每次都去执行下载操作，也就是每次都会下载安装临时模块并在用完后删除。
2023-03-20 11:25:47
945
转载 什么是闭包？闭包的作用? 闭包会导致内存泄漏吗？
任何定义在函数或块中的变量，都可以认为是私有的，因为在这个函数或块的外部无法访问其中的 变量。闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。由于闭包会携带包含它的函数的作用域，因此会占用更多的内存，过度的使用闭包会导致内存占用过多，因此，在绝对必要时，再考虑使用闭包。
2023-03-19 12:13:07
415
原创 const是否可被修改
而对于引用类型的数据，因为const中保存的是对象的指针，这就意味着，const仅保证指针不会发生改变，允许对象的属性改变（指针不会改变）。记得以前记忆中一直是const定义后无法被修改，但是突然发现某些情况其实是可以被“修改”的。const是用来定义常量的，且定义时必须初始化。对于基本类型的数据是不可修改的。
2023-03-19 11:02:06
781
原创 计算机网络知识点总结
或者接收端的应答包，发送端没有收到也会重发数据。优点:概念清晰，易于理解，网络规划相对简单，同时在IPv6逻辑网络中可以充分发挥IPv6协议的所有优点（如安全性、路由约束、流的支持等方面）。由于光波处于频谱的高频段，有很高的带宽，因而可以实现多路的波分复用。冲突域：连接在同一根线上的节点组成的区域，例如网络上的两台计算机在同时通信时会发生冲突，那么这个网络就是一个冲突域，也叫碰撞域。将许多前缀相同的地址用一个来代替，有利于减少路由表中的项目，减少路由器之间的路由选择信息的交换，从而提高了整个互联网性能。
2023-03-05 21:20:25
197
前端Promise的理解的面试题
2023-04-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人