前端日刊(200304)

zhangbao90s
205 阅读6分钟

本篇分享也在 我的语雀 上同步发布，欢迎大家关注。

阅读

准确理解 CSS clear:left/right 的含义及实际用途

clear 属性是用来控制元素本身不能和前面的浮动元素相邻的。clear: left 表示元素不和前面的左浮动元素相邻，即抗左浮动；clear: right 表示元素不和前面的右浮动元素相邻，即抗右浮动。

举个例子：

<div><!-- 之前 -->
    <img src="mm.jpg" style="float: left;">
    <div>我不喜欢你，我不要和你在一起~</div>
</div>
<div><!-- 之后 -->
    <img src="mm.jpg" style="float: left;">
    <div style="clear: left;">我不喜欢你，我不要和你在一起~</div>
</div>

之前：

image.png

之后：

image.png

解释一下：<div style="clear: left;">...</div> 的意思是——我对前面的左浮动元素很抗拒，不要跟他相邻。

再来看下右浮动：

<div><!-- 之前 -->
    <img src="mm.jpg" style="float: right;">
    <div style="float: right;">我不喜欢你，我不要和你在一起~</div>
</div>
<div><!-- 之后 -->
    <img src="mm.jpg" style="float: right;">
    <div style="float: right; clear: right;">我不喜欢你，我不要和你在一起~</div>
</div>

之前：

image.png

之后：

image.png

都是右浮动，因为 mm.jpg 最先右浮动，所以在最右边。

<div style="float: right;">...</div> clear: right，表示对前面的右浮动元素抗拒，不跟他相邻——于是就在下面了（div 是个块元素）。

假设我们需要实现下面这个效果：

通常的做法是把“头像”和“姓名”包在一个 div 里左浮动。但语义上“描述”跟它们应该是同层级的。我们只要真正理解 clear 属性的含义，就不难实现。

<div>
  <span style="float:left;">头像</span>
  <strong style="float:left;clear:left;">姓名</strong>
  <p style="margin-left:106px;">自我描述</p>
</div>

“头像”跟“姓名”同时左浮动，然后给“姓名”一个 clear: left，清除“头像”左浮动对它的影响，而后面的“自我描述”依然受到左浮动影响。

如此，我们对用烂了的清除浮动效果 .clearfix 又有了新的认识。

.clearfix::after { content: ''; display: table; clear: both; }

.clearfix 是用在浮动元素上的，它巧妙的利用了 ::after 伪元素作为中间缓冲元素，这个元素对浮动免疫，于是不受浮动影响的排在了浮动元素下方，使得浮动元素之后的元素不再受浮动影响了。

因为 float 属性要么是 left 要么是 right，所以 clear: both 是表示不和前面的左浮动或右浮动元素相邻的，这对我们在不知道前面元素是左浮动还是右浮动的情况下，排除浮动干扰，非常有帮助，这也是 .clearfix 使用 clear: both 的原因所在。因此，还能得出一个结论：凡是 clear: left 或者 clear: right 起作用的地方，一定可以使用 clear: both 替换。

npx 使用教程

npx 是从 npm 从 5.2 版开始引入的一个指令。

一方面调用本地 node-modules 里的模块更方便了。

# 之前
$ node-modules/.bin/mocha --version
# 之后
$ npx mocha --version

另一个方面：不管本地是否安装了某个模块，都可以 npx 调用那个模块的指令。

$ npx create-react-app my-react-app

执行上面的命令时，npx 将 create-react-app 下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载 create-react-app。

图解：防抖（debounce）和节流（throttle）

防抖和节流是开发 Web 项目时的高频需求。

上面是篇日文文章，我不懂日语，但是看里面的图片，就能让我足够理解它们之间的区别了。

假设下图是我们在浏览器器中发起的一连串的同一个事件：

横向表示时间线，每个球表示发生事件的时间点，球与球之间间隔表示时间间隔。

那么防抖就是下面的意思：

防抖回调会在最近的最后一次事件发生后的 Xms 后触发。

节流呢？如下图所示：

image.png

与防抖不同的是，节流的回调函数不会等到事件结束后再等待，而是在事件发生的过程中就会触发。节流会保证前后回调的触发间隔至少 Xms。

工具

throttle-debounce

throttle-debounce 是个工具库，包含防抖和节流两个工具函数。

下面展示了它的使用情况。虽然 Star 数少，但是使用量非常大。

image.png

引入：

import { throttle, debounce } from 'https://cdn.jsdelivr.net/npm/throttle-debounce@2.1.0/dist/index.esm.js'

用例展示：

demo 1

window.onresize = throttle(300, () => console.log('throttle callback'))

效果（在事件频繁触发时，保证每次回调间隔时间至少 300ms，且最后一次事件触发完成后 300ms，还会有一次回调执行）：

GIF.gif

demo 2

window.onresize = throttle(300, true, () => console.log('throttle callback'))

效果（在事件频繁触发时，保证每次回调间隔时间至少 300ms，且最后一次事件触发完成后，不再有 额外一次的回调执行）：

GIF.gif

demo 3

window.onresize = debounce(300, () => console.log('debounce callback'))

效果（最后一次事件触发后的 300ms，执行回调）：

GIF.gif

debounce(300, callback) 效果等同于 debounce(300, false, callback)，等同于 throttle(300, callback, false)。

demo 4

window.onresize = debounce(300, true, () => console.log('debounce callback'))

效果（第一次事件发生时，如果距离上次触发回调的时间超过 300ms 了，就立即执行本次回调，否则不执行回调）：

GIF.gif

等同于使用了 throttle(300, callback, true)。

演示地址

你可以点击下面链接，查看上述的演示效果。

codepen.io/zhangbao/pe…

代码

:focus-visible：匹配 Tab 键触发的聚焦

:focus-visible 伪类匹配的是由 Tab 键触发的聚焦。

由此我们可以写出这样的按钮效果：鼠标点击时，不显示按钮 outline；而由 Tab 键触发的聚焦，会显示按钮的 outline。

/* Reset Style */ 
button {
	font: inherit;
	border: 1px solid transparent;
	cursor: pointer;
	padding: .25rem .5rem;
}

button:focus {
	outline: 0;
}

button:focus-visible {
	outline: -webkit-focus-ring-color auto 1px;
}

效果：

GIF.gif

演示地址：codepen.io/zhangbao/pe…

深度优先遍历

树的深度优先遍历代码：

function traverse(tree, func, childProp = 'children') {
  const nodes = [...tree]
  nodes.forEach(function(node) {
    func.call(this, node)
    const children = node[childProp]
    if (children && children.length) {
      traverse(children, func, childProp)
    }
  })
}

一句话技巧

  • <form> 中 <button> 的 type 默认是 submit，如果你不想在点击按钮时提交表单，需要写成这样：<button type="button">Back</button>。
  • Chrome 浏览器中，只有对 <button> 设置了 border 或 background 属性后，用鼠标点击时才会有 outline 出现→ demo。

（正文完）

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。

（完）

avatar
文章
阅读
粉丝