DonV-优快云博客

原创 Element 组件库也支持暗黑模式啦

前言最近参考了Element Plus风格样式，修改了Element内部样式源文件，并发布了自定义的暗黑主题包 element-theme-darkplus。效果预览 👉戳这里。背景 Vue版本经历了2到3的大迭代，与之相关的一些生态系统也发生了变化和改动。例如组件库 Element 升级为了 Element Plus。 Element Plus相较于Element。组件上新增加了 TreeSelect 树形选择、Text 文本等性能上优化了用户体验，例如表格组件在大数据量

2023-07-11 14:57:26 3396 4

原创自动化签到稀土掘金，拥抱 GitHub Actions 吧

前言最近儿童节刚过不久，就收到了腾讯云的扣费短信，原来是之前部署在腾讯云的SCF没有免费额度，开始付费了。根据短信提示呢，结掉了长达一天的逾期费用。比较纳闷的是，快到期了不提前通知吗，或者说临时暂停云函数都可。但是呢，不，就不，一定要先强制扣费，然后才发通知。之前部署的腾讯云，仅仅用在简单且普遍的功能上，例如自动化脚本，或者提供功能函数等。实际上，腾讯云函数的功能还有些问题，部分配置参数没有文档，只能与在线客服沟通解决，过程中也提交了很多的改进建议。总体来说，非常繁琐，也浪费了时间，于是干脆注销

2022-07-17 20:17:53 4290 3

原创关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析

前言最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想到一个困扰很久的问题，即一般把<script>放在<body>尾部，<link>标签放在<head>内部，而页面通过CDN引入第三方框架或库时，基本都是将其<script>标签放在<link>标签前面。可能此方式已经成为了约定俗成，但是究竟其好处在哪里，或者说其它的方式为什么不可取，想必你也和我有同样的疑.

2021-06-17 09:05:20 5845

原创 vue element web 表单设计工具

工具概述简介项目名 dw-form-making，基于 element-ui 组件库的Web端表单设计工具。项目技术栈vue、vue-cli3，可视化设计element-ui输入框、选择器、单选框等控件组成的Form表单，配置表单字段、标签、校验规则等。较早版本采用vuex，由于发布npm包以及项目对vuex依赖性较高（即npm安装后还需配置vuex）等原因，故此种方案抛弃。使用vue.observable实现vuex的state、mutations部分。项目第三方组件包括vue.

2020-12-07 22:22:17 38200 1

原创参考 Promise/A+ 规范和测试用例手写 Promise

这可能是手写promise较清晰的文章之一。由浅至深逐步分析了原生测试用例，以及相关Promise/A+规范。阅读上推荐以疑问章节为切入重点，对比Promise/A+规范与ECMAScript规范的内在区别与联系，确定怎样构建异步任务和创建promise实例。然后开始手写章节，过程中代码与测试可参考仓库。也试着回答以下关键问题。什么是广义对象？如何检验promise类型？promise与thenable两类型有何区别？Promise有多种社区规范，例如Promise/APromise/B。

2023-03-01 22:28:51 627

原创 ES6 Reflect

前言此文总结了Reflect对象的部分语法，对比了与Object方法的差异性，希望对你有用。语法 Reflect与Math类似，都是JavaScript内置对象，提供了工具方法。 get Reflect.get(target, property, receiver) 用于读取对象属性，其中target为目标对象，property为属性名称。读取目标对象的访问器属性时，访问器getter内this上下文就是参数receiver。未指定参数receiver，默认为目标对象。 set R

2022-12-04 16:21:25 624

原创 ES6 Proxy

前言全文共计5万字左右，大约可阅读两小时，并不定时持续更新中。此文可能是关于Proxy相对较全的文章之一，总结了Proxy代理几乎所有的用法、示例和注意事项，也有对部分代码的细节分析。结合语法和ECMAScript规范，系统性地阐释了JavaScript对象的内部方法和内部槽，对比了普通对象与代理对象之间的差异和共同点。另外也包括一些运用场景，如何分析代理的错误问题，以及如何优化解决等等。建议阅读中根据目录细化拆分，并试着回答以下问题。什么是trap？内部方法与trap、不变量三者的关

2022-10-24 10:31:20 10747

原创 ES6 集合

前言此文介绍了ES6中集合相关的Set和Map结构，跟随此文你将了解到。 ES6为什么引入Set结构强弱引用与垃圾回收 WeakMap之polyfill实现 WeakMap的应用场景 Set Set 是值的集合，类似数组，元素有序且唯一。属性方法 Set.prototype.size 用于返回Set实例中的元素个数 Set.prototype.add 用于向Set实例末尾添加元素，并返回实例注意重复的元素不会被添加进去，也就说明了Set内元素是唯一的。 Set.prototype.del

2022-09-27 17:21:34 802

原创 ES6 Symbol

前言此文对ES6中涉及的Symbol类型做了简单说明，也包括部分开放的内置Symbol。属性方法 Symbol 为符号类型，属于基本数据类型之一。 Symbol()可以用来生成唯一值，也是ES6引入Symbol的原因。创建一个Symbol包装对象。 Symbol.prototype.description Symbol.prototype.description 用于返回Symbol的描述信息，String或toString方法会包含Symbol()字符串。 Symbol.for

2022-08-11 16:54:53 628

原创 ES6 不完全手册（上）

前言此篇是阅读《ES6 标准入门》的记录小册，保留了阅读当时的记忆和拓展，以便于后续查阅，分享出来，希望对你有用。关于ES6的API更为详细的部分还是推荐参考《ES6标准入门》，只是文中相对会精简很多，同时也包括一些未提及的内容。语法提案一个新语法从提出到成为正式标准，需要经历 5个阶段，一般只要能进入Stage 2阶段，就可能会包括在以后的正式标准中。 Stage 0：Strawman，稻草人阶段，只能由TC39成员或TC39构建者提出 Stage 1：Proposal，提案阶段，只能由TC

2022-07-23 19:14:32 4178

原创 JavaScript 属性描述符

前言此文总结了属性描述符的作用和特性，以及限制对象操作的部分方法。 Object.defineProperty Object.defineProperty 用于指定对象属性的描述符。函数的第三个参数descriptor为属性的描述符，包括数据描述符和存取描述符两种。注意属性描述符固定包括configurable、enumerable、writable和value四个键，存取描述符两种。注意属性描述符固定包括configurable、enumerable、writable和valu

2022-07-23 18:50:47 3247

原创 JavaScript 中常见的排序类型

前言此文浅总结了常见的几大排序，并介绍了相关特性和优化方式。对稳定性、复杂度的含义和分析也做了简单说明，另外对于递归函数中，分析时间复杂度的master公式也做了阐述，希望对你有用。排序冒泡排序冒泡排序（Bubble Sort）非常形象，数组在每次循环时，从左至右，相邻元素两两比较，将最大的元素逐渐交换到最后，每一轮循环最大元素在视觉上像是冒泡一样上浮到数组末尾。以数组[4, 3, 2, 1]为例子，数组前一个元素与后一个元素比较，若前一个元素大则交换，一轮下来最大值被交换至末尾。.

2022-05-30 21:25:13 2897

原创 ES6 flat 与数组扁平化

前言 flat 用于将多维数组拉平（扁平化），不影响原数组，返回新的数组。[1, 2, [3, [4]]].flat() // [1, 2, 3, [4]] 仅有一个参数depth，用于指定拉平的深度，默认值为1。若depth指定为非正数，将返回原数组，指定为Infinity，无论多少层都将扁平化为一维数组。[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4][1, 2, [3, [4]]].flat(0) // [1, 2, [3, [4]]][1, 2, .

2022-04-10 14:16:50 5123

原创 ES6 copyWithin

前言 copyWithin 用于浅复制数组的一部分到另一位置。[1, 2, 3, 4, 5].copyWithin(0, 2, 4) // [3, 4, 3, 4, 5] 其中参数分别为target（复制到的索引）、start（开始复制的索引）、end（结束复制的索引，不包括end位置的元素）。参数参数start默认值为0，end默认值为数组长度，若参数为负数，函数toAbsoluteIndex会将其转换为正数。function toAbsoluteIndex(target, le.

2022-04-07 15:57:24 3019

原创关于取消 ES6 函数尾递归的相关探究

前言 ES6中的尾递归优化非常实用，于是乎去初步探究。但是你会非常失望，发现绝大多数浏览器已经不支持，node也在很早的版本中取消了支持。关于尾递归优化的相关文档，也都仅仅是简单提及，只言片语，优化点原理几乎就不提，了解起来非常麻烦。因此查阅了很多文档，并简单汇总，希望可以由斐波那契数列，逐步展开，引导你了解尾递归的知识点。以下内容中的知识点包括。STC、TCO和STC分别是什么尾调用优化的优化点是什么V8为何取消支持尾调用优化PTC与STC的优缺点尾调用调用栈 Jav.

2022-03-31 20:13:09 3212

原创多种方式同步 GitHub 代码至镜像仓库

前言大多数的开发者都或多或少在GitHub上维护有项目，但是通常GitHub访问起来都很慢，或者无法响应。为了不能正常访问GitHub的用户，一般会将Gitee或其它平台托管作为镜像。我们通常只考虑维护在GitHub上的仓库就足够了，而对于其它镜像仓库，更多的是希望在GitHub更新的同时，都以静默的方式自动同步。因此以下将以Gitee作为镜像仓库，对比多种同步方式的利弊，跟随此文你将了解到。同步GitHub和Gitee代码仓库的多种方式webhooks是什么什么是GitHub A

2022-03-15 19:22:30 5673

原创 JavaScript 箭头函数

前言 ES6中的箭头函数作用非常简单，即简化函数且不绑定this。内容仅是记录箭头函数的部分特性，包括一些发散和总结，希望对你有用。语法特性没有 this 箭头函数没有this，它的this是根据词法作用域派生而来，由上下文决定。function fn() { setTimeout(() => { console.log(this) })}fn() // Window {} 结合babel转换后的es5代码，简单概括就是，箭头函数的this总是.

2022-03-09 14:11:24 3256

原创进行浏览器原生的图片懒加载的几种方式和原理

前言对于图片较多的网站，倘若一次性加载所有图片，一方面由于同时加载的图片较多，页面的DOM元素将非常多，会造成页面卡顿性能严重下降，另外服务器的压力也会很大。另一方面若加载了很多图片，而用户浏览的图片仅有几张，将会耗费大量流量，造成浪费。而懒加载就是针对此情况做的优化，同时会极大地提升用户体验。一句话总结就是，懒加载即延时加载，当图片要用到的时候再去加载。offsetTop 懒加载的图片一般是固定宽高的，为避免图片较大时拉伸，可运用object-fit: cover来裁剪。<st.

2022-03-07 19:02:22 1591

原创 JavaScript 严格模式差异性对比

前言严格模式（strict mode）由ES5引入，用于消除部分语法错误，提高运行效率，规范JavaScript语法等。此文细致梳理了严格模式与非严格模式的差异，目的仅是为了加深对严格模式的认识。开启脚本文件为脚本文件开启严格模式，以下第一个脚本未开启严格模式，第二个脚本将开启严格模式。<body> <script> foo = 33 console.log(window.foo) // 33 </script> .

2022-01-24 14:05:57 3146

原创关于 ES6 参数默认值形成的第三作用域问题

前言最近系统回顾《ES6 标准入门》时，在函数的拓展一章下的作用域小节，又看到了以下代码。var x = 1function foo(x, y = function () { x = 2 }) { var x = 3 y() console.log(x)}foo()console.log(x) 大约一分钟时间思考一下结果吧😁。如果你有仔细阅读文初的结论，一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域，结果想必一目了然。foo() // .

2022-01-12 17:46:08 3097

原创你不知道的 JSON.stringify 特性

前言 JSON.stringify可配合JSON.parse来进行对象深拷贝，也可以用于字符串转换为对象，但是会有很多问题。语法特性 JSON.stringify 用于将JavaScript对象或值转换为JSON字符串。undefined、函数、Symbol作为对象属性值 undefined、函数或者Symbol在序列化时会被忽略，换句话说会丢失掉。const object = { foo: undefined, bar: function () { console.l.

2022-01-05 19:38:18 3667

原创 JavaScript 正则表达式

前言 MDN 对正则表达式有更为详细的描述，此文仅是学习正则表达式过程中的记录和发散，相关的内容后面会逐步进行完善。方法test test 用来检查字符串是否与正则表达式相匹配，返回布尔值。/hello/.test('hello_world') // true 来看一个特殊情况。const reg = /hello/reg.test('hello_world') // truereg.test('say_hello') // trueconst reg = /hello/g.

2021-12-30 15:42:12 2907

原创 JavaScript 浮点数取整

前言此文整理了JavaScript中常见的浮点数取整函数，当然也包括一些更为高效的位操作取整。Math.trunc Math.trunc 用于返回数字的整数部分。Math.trunc(-11.25) // -11Math.trunc(NaN) // NaNMath.trunc(Infinity) // InfinityMath.trunc() // NaN Math.trunc内部也会调用Number将参数隐式转换为数值，然后再取整。const object = { val.

2021-12-30 15:33:58 4896

原创 JavaScript 浮点数陷阱

前言 JavaScript中的浮点数经常会有奇怪的运算结果，例如0.1 + 0.2 != 0.3或者是1.005.toFixed(2)结果为1.00，又或者Number.MAX_VALUE与Number.MAX_SAFE_INTEGER的区别等等。此处对JavaScript浮点数的存储标准和以上疑问做了比较细致的整理，希望对你有用。IEEE 754 JavaScript与其它语言不同，Number类型是不区分整型和浮点的。对于所有的数字包括整数和小数相同存储，遵循IEEE 754的双精度标.

2021-12-24 13:52:54 3613

原创 vscode 插件与 npm 包，保存时自动修复代码格式错误

前言日常开发中的绝大多数项目，都是以团队为单位进行的。而由于每个成员的代码习惯和编码差异的不同，最终将导致整个项目的代码参差不齐，出现各式各样风格的代码。而此差异性会严重导致团队协作效率低下，后期可维护性也会严重降低。例如代码缩进问题，大部分都是以2个或者4个空格为标准，倘若在没有格式化工具的前提下，迭代起来就会显得异常麻烦，只能逐行添加或者删除空格，不仅浪费时间也毫无意义。因此制定统一规范的代码风格，并以此配置出格式化工具显得尤为重要，并且最好是在开发中就将此问题解决掉，于代码运行之前.

2021-11-04 17:43:58 6521 3

原创 Vuepress 博客搭建与 GitHub 静态页面部署

前言最近整理博客文章时，偶然想要把本地文章推送到GitHub上维护，毕竟看着很多次的Git提交记录和历史线，时间长了总会萌生再去提交几次的想法。但是推送到GitHub后，想要便捷跳转到某篇文章，发现没有一个导航系统可以很好地链接到每篇文章，于是动手搭建一个依赖于Vuepress的博客，为了便于访问，再将其部署为GitHub的静态页面。而此篇文章仅是记录Vuepress搭建博客的具体步骤，且仅对内部涉及到的api作解释，更为详细的部分可参考 Vuepress 官方文档。在线预览 Gi.

2021-10-20 14:30:07 3457 5

原创解析图片的瀑布流（含懒加载）原理，并搭配服务端交互数据

前言瀑布流是一种很常见的网页图片交互方式，效果可以参考花瓣网。准备工作首先来查看一下目录结构，其中app.js为服务端启动文件，主要用来提供接口，返回所需的图片数据，index.html为瀑布流页面。├── app.js├── index.html├── package.json├── node_modules/ 服务端app.js利用express搭建本地服务器，其中访问http://127.0.0.1:3000默认返回瀑布流页面，获取图片接口一般是以pageNo和page.

2021-09-28 17:33:54 4481

原创 HTML5 之 Img 标签

概述 img 用于将图片嵌入文档。 img是行内单标签元素，同时img也是可替换元素（可修改宽高）。可替换元素 HTML元素可分为可替换元素和不可替换元素，详细参考。绝大多数的HTML元素都是不可替换元素，其内容由DOM内容决定。例如<p>hello world</p>，展示的内容就是文本节点hello world。而对于可替换元素，其内容则由元素的标签和属性决定。例如<img>元素的内容实际是由src属性读取的图片的原始宽高来确定的。典.

2021-09-09 18:39:16 17281

原创 HTML5 之 Frame Frameset Noframes 标签

概述 frame 可定义特定区域，用于显示HTML文档。 HTML5已废弃，不再支持frame，但是当前仍有一部分浏览器支持。 frame为块级双标签，只能作为frameset子元素，无法单独使用。常用属性如下。src：指定显示的HTML文档name：为frame添加标识，若未指定标识，所有链接将在其所在的frame打开noresize：禁止改变区域大小<!DOCTYPE html><html lang="en"><frameset row.

2021-09-01 19:12:48 4091

原创 HTML5 之 Form 标签

概述 form 是块级双标签，用于指定一个表单区域，并向服务器提交信息。属性常用属性action：指定表单提交的URL，表单内提交按钮的formaction属性会覆盖此属性enctype：指定表单的数据编码方式，表单内提交按钮的formenctype属性会覆盖此属性method：指定表单的请求方式，表单内提交按钮的formmethod属性会覆盖此属性。另外若表单在dialog元素中，指定method为dialog将在提交时关闭模态框，详细参考target：表示表单提交时于何处响应，表单内.

2021-08-20 13:49:36 4751

原创 HTML5 之 Figure Figcaption 标签

概述 figure 用于定义一个可附加标题的内容元素，figcaption 用于为figure元素添加标题和描述信息。页面中的插图卡片比较常见，卡片中包含有图片的描述信息、标题或者按钮等。一般的实现方式可能会用div元素设置background: url()的方式将图片作为背景，其余的描述信息和标题作为div的子元素。或者是div元素内部添加img元素，其余的描述信息和标题则定位至图片上方。虽然两者都能实现上面的卡片样式，但是HTML的结构和语义化不是非常明显。以下HT.

2021-08-17 20:27:49 6990

原创 HTML5 之 Fieldset 标签

概述 fieldset 用于对表单中的控件元素进行分组。 fieldset是块级双标签，绝大多数浏览器都支持。属性disabled fieldset的所有子代控件均会继承，即不可编辑状态。<form method="post" action="http://www.baidu.com"> <div> <label for="username">用户名</label> <input type="text" name=.

2021-08-17 11:42:02 9579 1

原创 HTML5 之 Dialog 标签

概述 dialog 是HTML5新增的语义化双标签，用于展示一个交互式的模态对话框。绝大多数浏览器都不支持，仅有Chrome等浏览器支持。属性open 用于控制模态框的显隐，即含有open属性就显示，否则隐藏。<dialog open> <p>hello world</p></dialog> 浏览器呈现如下，含有部分默认样式，并且仅水平方向居中。显示时样式。隐藏时样式。returnValue 保留clo.

2021-07-31 15:48:09 10263

原创 HTML5 之 Col Colgroup 标签

col col 用于定义表格中的列。 col为表格内单标签元素，只能在table元素或者colgroup元素中使用。其属性值主要包括如下几种，均能通过CSS属性实现。span：指定col元素横跨的列数，此属性值为正整数，默认值为1align：指定col元素关联的列的内容的水平对齐方式，包括left（左对齐）、center（居中对齐）、right（右对齐）、char等，注意此属性HTML5已废弃，仅IE7及以下等浏览器可用，绝大多数浏览器已不再支持bgcolor：指定col元素关联的列.

2021-07-26 17:12:43 6615

原创 HTML5 之 Button 标签

概述 button 用于显示一个可点击的按钮，可用在表单或文档的其它地方。 button元素是内联双标签，不同浏览器下button样式不同，可以通过CSS修改。<button>按钮</button>标签属性autofocus 指定页面加载时聚焦此按钮，多个按钮指定autofocus，仅仅只会聚焦首个按钮。<button autofocus>按钮</button>disabled 禁用，用户不能与button交互。<but.

2021-07-17 13:51:45 20556 1

原创 HTML5 之 Audio 标签

概述 audio 用于在文档中嵌入音频元素。 audio元素是HTML5新增的行内标签，IE8及以下浏览器不支持audio标签。若浏览器不支持video元素或者无法播放音频，则会显示替代文本（开始和结束标签之间的内容）。<audio src="music.mp3">当前浏览器不支持audio标签</audio>标签属性autoplay：音频会尽快自动播放，不会等待整个音频下载完成controls：浏览器提供包括声音、播放进度、播放暂停的控制面板（不同浏览器.

2021-07-12 14:26:00 13958

原创 HTML5 之 Script 标签

概述 script 用于嵌入或者引用可执行脚本。其中可选属性如下。type：用于定义脚本语言的 MIME 类型，包括text/javascript、text/ecmascript、application/javascript、application/ecmascript，注意HTML5中可以省略掉type，其默认值为text/javascriptsrc：指定引用的外部脚本的URLdefer：仅适用于外链，规定脚本延迟执行async：仅适用于外链，规定脚本异步执行integrity：用.

2021-07-02 17:18:13 4717

原创 HTML5 之 A 标签

概述 a 元素可通过其href属性创建指向其他网页、文件、同一页面内的位置或其他URL的超链接。其基本属性及含义如下。href：链接目标的URLhreflang：指定目标URL的语言rel：指定当前文档和被链接文档的关系target：指定打开目标URL的方式media：指定目标URL的媒体类型type：指定目标URL的 MIME 类型download：指示浏览器下载URL链接样式在浏览器中a标签的默认样式带有下划线，其状态和颜色如下。link：未访问状态，字体颜色为.

2021-06-18 17:04:13 8631

原创 HTML5 标签汇总

文档结构 html页面的基本结构如下，其中head为页面的头部信息，body为页面的主体信息。<!DOCTYPE html><html lang="zh-CN"><head></head><body></body></html>文档元素DOCTYPE DOCTYPE 即文档类型（document type），用于声明当前文档类型，告知浏览器使用哪种HTML版本（<!DOCTYPE htm.

2021-06-16 11:29:24 13621 2

原创 HTML5 之 Link 标签

概述 link 元素用于链接外部css样式表等其他相关外部资源。link 其中link中包括如下属性。href：指明外部资源文件的路径，即告诉浏览器外部资源的位置hreflang：说明外部资源使用的语言media：说明外部资源用于哪种设备rel：必填，表明当前文档和外部资源的关系sizes：指定图标的大小，只对属性rel="icon"生效type：说明外部资源的 MIME 类型，如text/css、image/x-iconrel rel核心属性的参数值如下，也可参考 MDN.

2021-06-16 11:29:13 19774 1

空空如也

空空如也