前端

calc() 是一个 CSS 函数，可让您直接在 CSS 中计算值。例如： 此功能最有用的功能之一是您可以混合多个 CSS 单位使用。在我们的示例中，我们使用了像素百分比，当然我们也可以使用 em、pt、rem 等。 我发现90%情况都...

现在有一个新的数组方法：array.at()，与普通方括号访问语法的主要区别是对负索引的支持。 让我们看看以下数组： [] 和 at() 会做同样的事情： 虽然 legumes[-1] 最终会返回 undefined，但 legumes.at(-1) 将返回&qu...

场景举例 当我们按下 click 按钮的时候，number 会被循环增加1000次。 那么按照之前的理解，每次 number 被 +1 的时候，都会触发 number 的 setter 方法，从而根据上面的流程一直跑下来最后修改真实 DOM。那么在这个...

很多开源项目中都会有manifest文件，一些人不知道它是什么。最近，我在工作中听到了很多关于 Javascript manifest文件的讨论，并开始阅读更多关于它的内容。 Javascript manifest是一个 json 文件，它定义了 Progres...

1.每个computed属性都会生成对应的观察者（Watcher 实例）观察者存在 values 属性和 get 方法。 computed 属性的 getter 函数会在 get 方法中调用，并将返回值赋值给 value。 初始设置 dirty 和 lazy 的值为 true，l...

乍一看，编写以下两行 Javascript 似乎具有相同的效果。 第一个是函数声明，第二个是函数表达式。 为了更容易记住，我们可以考虑以下规则： “如果语句以 function 关键字开头，那么它就是一个函数声明，否则就是一个...

网站很多地方都需要用省略号来截断长文本，比如分类页里每篇文章的概要等，那么怎么用css来实现呢？其实并不复杂，最后的效果如下图： 我们要用 text-overflow: ellipsis; 表示用省略号代替截断的文字。 要实现图中...

为了检测窗口是否满足特定的媒体查询，css是使用media query，js使用 matchMedia 方法。 每当窗口等于或小于 800 像素时，都会调用这个侦听器方法。下面是一个完整的代码。 更多关于 matchMedia 详细信息，请点击此...

我正在为初级前端开发人员出常见的面试问题。一个常见问题是如何从 JavaScript 数组中删除重复项。 假设是使用以下数组： 为了保持数组里的值唯一，我们可以这么做： 它只适用于数值，不适用于对象。 Set 是一种 Jav...

今天早上我偶然发现了来自 Polypane 博客的一篇很酷的文章：如何排查出现水平滚动条的原因。 我从这篇文章中的主要收获如下： 1.设置body style为width:100vw和width:100%不一样会导致溢出问题 这是因为如果我们说 w...

Promise有很多选项，可能看起来有点混乱。让我们详细看看Promise all()、race()、allSettled() 和 any()这些选项： Promise.all() - 仅当所有给定的promises都被解决时才执行。如果一个承诺失败，它会立即拒绝并返回...

在 CSS 中，我们有一个名为 currentColor 的特殊颜色值，可能大多数人都不知道。 currentColor 所做的是获取颜色属性的值并将其用于任何其他具有颜色参数的属性。 例如以下内容： 下面currentColor写法与上面效果一...

假设您有一个按钮，它只会在 React 组件的状态下切换布尔值： 最初对我来说，最直观的方法似乎是这样： 但是，这似乎可能会导致一些极端情况（并且非常烦人）的错误。如果需要根据之前的值设置状态变量，建议在 useS...

直到今天我才知道的4个JavaScript小技巧，今天跟大家分享一下。 1.如果你在 finally 块中有 return 语句，它将覆盖其他 return Jake Archibald 撰写的这篇文章中有更多详细信息。 2.我们可以使用数字分隔符来提高可...

CSS 仍然无法为自动尺寸auto设置动画。 但可以尝试使用 JavaScript 技巧来实现，Brandon Smith 不久前概述了这种方法。不过我总是想到这个解决方案，因为它太简单了： 另一个问题是滚动条。 当我们设置 max-height: ...