前端小黑

该需求涉及到许多零散的知识点，遂以此文做总结记录，下面将介绍思路和具体的实现代码。 通过设置其 multiple 属性和 accept 属性可以使得 input 标签支持多选和仅支持选择 gif、jpg/jpeg 和 png 类型的文件。 当点击标签时，则可以从文件系统中选择照…

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可；如今CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（表单验证等），随着web2.0时代的到来，Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会…

我们先简单了解这道JS经典问题, 然后再解决它的扩展问题。 如果你已经了解过这个问题并且知道如何解决这个JS谜题(是的，只是一个谜题，我并不想在生产代码中看到这样的用例) , 那你可以直接跳到下一节，阅读它的扩展问题。关于这个问题在reddit上有相关讨论， 下面是我看到最有…

将HTML构建成一个DOM树（DOM = Document Object Model 文档对象模型），DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。 根据DOM树和CSSOM来构造 Rendering Tree（渲染树…

如果对这个例子很清晰，大佬请点击右上角。 如果不清楚 我们可以来往下共同探索一番。。 Partial 作用是将传入的属性变为可选项. 我们发现一个有意思的用法 -?, 这里很好理解就是将可选项代表的 ? 去掉, 从而让这个类型变成必选项. 与之对应的还有个+? , 这个含义自然…

这一年注定是不平凡的一年，经历了疫情在家两个月封城。刚好 hooks 出来了，学习了一下，发现真香，根本停不下来，分享一下用了将近一年的心得，在 2020 年最后一天上了末班车 useState 返回值为一个数组，数组的第一个参数为我们需要使用的 state，第二个参数为一个 …

在 web 页面中，如果需要改变多个元素的位置，可以通过元素拖动来实现。HTML5中加入了一个全局属性draggable，通过设置该属性的值为 true/false 来控制元素是否可拖动。需要注意的是： 链接和图片默认是可拖动的，可以通过将 draggable 设置为false…

ECMAScript 2020 是 ECMAScript 语言规范的第11版。自1997年出版第一版以来，ECMAScript 已发展成为世界上使用最广泛的通用编程语言之一。 matchAll() 方法返回一个包含所有匹配正则表达式的结果的迭代器。使用 for...of 遍历或…

前端优化是一个大的课题，需要花好多时间才能理解，之前对前端优化陆陆续续有一些了解。所以这次从渲染优化，打包优化，代码优化做了一个系统的总结，并且引申出了几个需要关注的问题，文章可能有点长，大家一定要看到最后。最后写作不易，希望觉得还可以的话，帮忙点赞一波，提前感谢了。当然如果有…