前端蛋卷-CSDN博客

原创 calc-size: 一个解决浏览器11年的 bug的属性终于上线了

我们在平常写动画的时候，经常会遇到元素的高度 height：auto或者 100% 时，无法触发过渡动画效果。[1]这是浏览器一直存在的问题，这个问题最早可以追溯到距今2013年，可以说是由来已久的问题了。

2024-07-26 00:08:57 605

原创慎用 readFileSync 读取大文件，教你一招如何优雅处理大文件读取

会占据服务器大量的内存，即使读取的文件比较小，但是如果遇到用户访问剧增的时候，大规模读取小文件也会使得服务器内存长时间处于高位。通过 hyperfine 工具我们可以对这两个脚本进行基准测试，我们可以通过基准测试数据可以看出，同样是同步获取。去读取文件有很多方法，今天我们介绍一种不是很常见的方式去读取。接下来我们通过一个案例来比较这两种方式在读取同一文件速度上的差异。常见使用方法是采用回调的方式，也可以使用本案例中的。会将文件读取在内存中，如果遇到了文件很大时，文件路径：要读取的文件的路径。

2024-07-23 22:59:46 425

原创原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道

设置区块元素中文本行前面空格（缩进）的长度, 因此如果我们想要隐藏的元素是文本内容的时候，我们就可以使用这个属性将文本缩进到视口范围之外，从而达到隐藏的效果。通过上面的介绍，相信大家对隐藏元素有了更多的了解和认识了，以后在面对不同的需求时，就可以使用上述不同的方法去匹配相应的需求，从而达到事倍功半的效果。的场景不多，这个属性主要的功能就是将元素剪裁成显示区域为一个 1px * 1px 的矩形，这样就在视觉上实现了隐藏元素的效果。属性也是同样的类似的实现原理，通过调整元素的透明度来实现元素 “隐身”的效果。

2024-07-22 09:52:48 470

原创前瞻断言与后瞻断言：JavaScript 正则表达式的秘密武器

JavaScript 中的前瞻断言（lookahead）和后瞻断言（lookbehind）相信用过的小伙伴就知道它的威力了，在一些特定的需求场景下，可以做到四两拨千斤的作用，今天让我们来盘点一下在 JavaScript 正则表达式中这两个秘密武器吧。单词边界指的是在单词字符（字母、数字或下划线）和非单词字符（如空格、标点符号或其他字符）之间的位置，同时字符串的开头或结尾也存在单词的边界。相信通过上面的介绍，你已经掌握了使用前瞻断言和后瞻断言的精髓了，相信我使用它可以让你写正则的速度嗖嗖的，下班早早的。

2024-07-17 00:07:58 1052

原创什么? CSS 将支持 if() 函数了？

函数距离正式落地还有很长的路要走，按照以往的惯例，这一个过程顺利的话也要1-2年的时间。因此，我想说的是，这个函数一旦落地实现在浏览器的那天，我相信那一天一定是一个历史性的时刻。函数移除掉，替换成编译时确定的样式，这意味着我们无法动态地去调整样式。虽然现在还没有发布，没有环境可以让我们真实体验效果，但是我们可以从官方的。当我看到这个消息的时候，心中直呼这很逆天了，我们知道像。的，在打包 build 的时候，就会把这个。为 true 的时候应用的 css 值。函数在运行时的动态性，省去大量的。

2024-07-13 16:22:10 764

原创面试官：讲一下如何终止一个 Promise 继续执行

Bluebird作为一个基于 Promises/A+ 标准的社区的第三方库 Promise 库，比 async 还早出现，提供了很多原生标准没有的一些方法功能，例如这里的 cancel 取消promise 的功能，更多的细节或其他功能可以参考官网。由于这个新的 promise 状态提前结束了，所以我们一开始传递的 promise（async 是 promise 的语法糖，内部也是一个 promise）就不会再执行了，因此达到一个终止的效果。封装一个新的 promise 去终止另一个 promise。

2024-07-10 00:46:10 400

原创 Vine: 一种全新定义 Vue 函数式组件的解决方案

这种代码组织方式可以让我们在一个组件中可以更好地在一个文件中将一些小部件组件进行拆分，既拆分了组件，拆分出来的小组件还能继续保持上下文的变量访问。这下真的变 React 了。7月6日的 vue confg 大会上 ShenQingchuan 大佬介绍了他的 Vue Vine 项目，一种全新定义 Vue 函数式组件的解决方案。结尾的后缀定义一个 Vine 组件（官方称其为 VCF组件，类似 Vue 的 SFC），组件定义的方式很简单就是一个。的模板字符串函数, 具体的组件内容就定义的模板字符串中。

2024-07-08 00:54:04 924

原创全面解析 TypeScript 泛型的二三事

这时候我们可以使用泛型约束，确保传递的参数一定具有某个属性或者属于某一种类型，这样就能安全地在函数体内执行相关的属性或方法。使用默认类型，可以让我们在调用的时候，如果不传递类型给泛型，泛型也能获取到默认类型应用到具体的变量约束上。关键字实现泛型的约束，就是在一些场景下，你知道这个泛型的类型不确定，但是你知道这个类型一定有一些。当泛型在使用的时候，指定了具体的类型之后，我们就不能违背这个类型，否则会触发。中重要的基石的存在，学会了泛型的使用，可以让我们编写更加健壮且可维护的代码。

2024-07-06 23:57:49 926

原创面试官：谈一谈如何编写一个易维护的 Vue 单文件组件

编写单文件组件时，是否曾思考过如何使这些组件在代码维护上更加容易，而不会变成“堆屎山”？在重构的代码中，我们改进了变量和方法的命名，使它们更具描述性。虽然组件比较长，但我们还是可以看出这个组件存在明显的边界性。虽然将一个复杂的组件变成多个简单的组件，可能会稍微增加一些代码量，但这些代码更容易理解、维护和修改。这样的分离使得代码更加模块化，也使得我们的代码更具可读性。当然，这只是一个简单的例子，好处可能有限。长组件原则告诉我们，将长组件分解为较小的、集中的组件有助于提高可读性、可重用性和可测试性。

2024-07-05 09:06:33 428

原创什么？2024年只要 HTML 和 CSS 就可以实现一个自适应的瀑布流页面了？

瀑布流页面布局，故名思义就是页面上的元素子项像瀑布一样进行上下紧凑布局，一般图片类网站、电商类或者博客类的网站经常会使用这种布局，使得展示的元素比较紧凑和丰富，类似下图。定义网格容器中自动创建的行的高度。瀑布流布局可以适应不同的屏幕尺寸，会根据屏幕的尺寸动态调整布局的列数和子项的位置。瀑布流布局的子项可以具有不同的高度，与标准网格相比，瀑布流布局看起来更自然。以前的兼容性却是有点不行，但是随着现在浏览器的支持程度的提升，现在的。设置每个网格项跨越的行数，形成不同高度的网格项，模仿瀑布流效果。

2024-07-04 09:04:03 764

原创请不要在 Vue 中滥用“watch”功能，拜托了！

但是事实却是相反，在我们实践编写代码中，特别是当维护别人的代码（尤其是复杂的代码）时，我们通常不喜欢修改现有的代码，而是在上面添加自己的代码。我们猛地一看，好像并没有什么大问题，但是当我们几个月之后回来再改这段代码的时候，就会发现这里面的问题了。更改别人的复杂代码可能会触发改动引发，因此，我们通常最保险的做法是添加另一个。看到前面示例的缺点后，静下心思考一下🤔，到底可维护的代码应该是什么样的？的逻辑，在更新之前，我们必须要理清楚更新的逻辑，这样才能避免改动引发。的数据更新会和多个数据的变化相关，

2024-07-03 00:52:19 386

原创快来看看 ECMAScript 2024 (ES15) 发布了什么新特性

它在范围 0xD800 到 0xDBFF 内（含）（即为前导代理），但它是字符串中的最后一个码元，或者下一个码元不是后尾代理。它在范围 0xDC00 到 0xDFFF 内（含）（即为后尾代理），但它是字符串中的第一个码元，或者前一个码元不是前导代理。标志的“升级”，可启用更多与 Unicode 相关的功能。（“v”是字母表中“u”之后的下一个字母。原先也是可以进行转移的，之前是通过参数进行配置的，现在对外提供了一个。，这意味着你只能读取此属性。字符串的属性，允许使用\p 转义的多节点属性。

2024-07-02 00:04:28 892

原创二分查找法时间复杂度计算推演

我们要在这个数组中查找一个特定的元素。如果元素存在，我们返回其索引；我们知道当一个算法的循环次数每次减少一半时，时间复杂度通常会变成是。，我们可以用二分查找算法作为示例来推算这个时间复杂度的计算过程。次查找后，数组的长度 length 变为 1。重复上述步骤，直到找到目标值或者子数组为空。这样下去，每次查找数组的大小都会减半。每次查找时，数组的大小减少一半。第一次查找时，数组的大小是。第二次查找时，数组的大小是。第三次查找时，数组的大小是。，则在左半部分继续查找。，则在右半部分继续查找。

2024-06-18 23:53:26 283

原创我看谁还不会这几个 TypeScript 高级技巧

这种机制对于在运行时根据不同的类型执行不同的操作非常有用，尤其是在处理联合类型或更复杂的类型结构时。条件类型的上下文中，根据使用它们的上下文自动推断类型。这可以使类型实用程序更加灵活，能够处理复杂的类型场景，而无需用户进行显式类型声明。类型常用于表示不可能发生的事情，例如一个函数永远不会正常返回，或者一个变量将永远不会有值.类型表示的是那些永不存在的值的类型。它是任何类型的子类型，但没有类型是。相信上面的报错在日常开发中，经常会遇到的，平常的解决方法大多数都是使用。类型中的基础类型，同时这里使用了。

2024-04-23 00:56:11 970

原创长文揭秘让人忽略的Console对象

它接受一个数组或对象作为参数，并将其内容以表格的形式显示在控制台中，其中数组的每一项或对象的每一个属性将对应表格的一列。中，展现的动画，并不会影响网站的性能，因为这些代码只会在控制台打开时运行，这对正常使用网站的用户而言是无感的，并不会影响用户的正常体验。对象的方法，用于在控制台输出不同类型的信息，以便于开发者进行调试和查看程序执行过程中的各种状态。是用于在控制台输出指定对象的属性列表的方法，在需要查看某些对象的属性的时候很有用，例如下面使用。方法用于创建一个新的分组，将相关的输出信息分组显示在控制台中。

2024-03-11 23:35:56 1101 1

原创 23年你可能错过的 10个前端新变化

已添加到主屏幕的 Web 应用程序可以请求接收推送通知的权限，只要该请求是响应直接用户交互（例如点击 Web 应用程序提供的“订阅”按钮）即可。，带来了出色的开发人员体验和一些狂野的东西，关于性能的声明以及在首次发布后发现了相当多的错误，但它仍然是未来处理后端。的可延迟视图将性能和开发人员体验提升到了一个新的水平，因为它们通过前所未有的人体工程学实现了声明性和强大的延迟加载。10 月 17 日发布的 Node.js 21 配备了一个实验性的、与浏览器兼容的 WebSocket 实现，通过。

2024-02-16 23:50:22 1107 1

原创 brew 下载 nvm 之后，nvm command not found

使用 brew 安装 nvm 并运行 nvm 后，系统提示 nvm：未找到命令.

2023-11-18 22:34:45 1312 2

原创 Error message “error:0308010C:digital envelope routines::unsupported“

重新安装当前的 LTS 版本。对于 Windows，请使用。您可以从 Node.js 的。

2023-11-18 22:23:30 317 1

转载【Git报错】error: Your local changes to the following files would be overwritten by checkout

如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时候,在发布这个配置文件的时候,会发生代码冲突:error: Your local changes to the following files would be overwritten by merge: protected/config/main.phpPlease, commit you...

2018-09-02 23:38:41 1875

转载浅谈focus /focusin /focusout /blur 事件

事件触发时间focus:当focusable元素获得焦点时，不支持冒泡；focusin:和focus一样，只是此事件支持冒泡；blur:当focusable元素失去焦点时，不支持冒泡；focusout:和blur一样，只是此事件支持冒泡；以前一直以为所有事件都是支持冒泡的，都是可以cancel的，查阅了[MDN上相关资料]（https://developer.mozilla.org/en-US/d...

2018-07-01 19:17:03 3003

原创【常见错误】通过document.getElementsByClassName()获取的dom元素添加监听事件时报错：addEventListener is not a function

今天写了一个表达验证的网页，在给一个输入框添加监听事件的时候，控制台一直报错，报错原因显示Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function通过查资料得知：这是因为选择器没有正确选择元素对象document.getElementsByClassName(...)捕捉到...

2018-06-30 10:52:23 34563 1

转载 js中prop和attr区别

首先attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说比较慢。如:<input name='test' type='checkbox'> $('input:checkbox').attr('type'); 返回checkbox. $('input:checkbox').attr('checked'); 返回undefined。因为<input na...

2018-06-07 00:16:22 262

转载 JS中attr和prop属性的区别

相比attr，prop是1.6.1才新出来的，两者从中文意思理解，都是获取/设置属性的方法（attributes和properties）。只是，window或document中使用.attr()方法在jQuery1.6之前不能正常运行，因为window和document中不能有attributes。prop应运而生了。既然我们想知道他们两的区别，最好就看看他们的源代码，不要被代码长度所吓到，我们只...

2018-06-07 00:13:55 2781 1

转载 jquery中attr和prop的区别

jquery中attr和prop的区别在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。上面的描述也许有点模糊，举...

2018-06-07 00:09:42 169

转载 jquery中获取属性值的方法attr（） prop（）的区别

jquery1.6中新加了一个方法prop()，一直没用过它，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"check...

2018-06-07 00:08:16 356

转载 nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document注释：nodeName 所包含的 XML 元素的标签名称永远是大写的nodeValue对于...

2018-06-05 15:05:14 2157

转载 item、nameItem的区别

html文档结构：<input type="text" name="nini1" value="我是第一项"><input type="text" name="nini2" value="我是第二项"><input type="text" name="nini3" value=

2018-05-25 20:06:44 2037

原创学习笔记—document write( )语法、功能、以及需要注意的‘坑’

语法：document.write(exp1,exp2,exp3,....)参数解析：（1）.expN：可以是一个或者多个参数，如果是多个参数，那么按照顺序写入文档。(如果写入多个参数的话，这些参数会自动换行显示) (2)这里的参数可以是变量，也可以是函数体、函数自执行体，数字等等，也可以进行一些简单的运算 (3)参数支持标签属性，写入的时候会按照html进行解析，但是需要用字符串的形式(常用...

2018-04-21 23:01:49 34479

原创学习笔记—JavaScript全局变量与局部变量的作用域和生命周期

function fn() { var x=y=1 }; fn(); document.write(y);//1 document.write(x);//报错，显示未定义全局变量的声明： 1.在全局环境中var声明变量； 2.不带var的声明变量如（y=1）；(非严格模式下)生命周期：全局变量可以在全局中访问得到，直到全局代码执行完毕之后，...

2018-03-21 10:33:40 573

公众号：前端蛋卷