Coley's Blog

君之所向，一往无前。

前端小技巧汇总

发表于 更新于 分类于
本文字数： 2.7k 阅读时长 ≈ 5 分钟

前言

本篇文章主要是记录 HTML 部分可用于实际开发中的小技巧，部分章节是翻译整理而来，所有章节后都附有原文地址或者其他参考资料，本文将持续更新；

添加键盘快捷键

通过使用 accesskey 特性，我们可以为用户激活或聚焦在一个元素上赋予一个快捷键。这个特性的值必须是一个单独的字符。

值得注意的是每个浏览器提供了不同的组合键来触发快捷方式。

浏览器 macOS Windows Linux
Chrome alt + ctrl + key alt + key alt + key
Firefox alt + ctrl + key alt + shift + key alt + shift + key
Safari alt + ctrl + key n/a n/a

在下面的示例代码中，在 macOS Chrome 中按下组合键 alt + ctrl + e 会触发按钮的 click 事件。

1
<button accesskey="e" onclick="alert('Edit')">Edit</button>

判断浏览器是否支持一个元素属性

我们可以检测当前浏览器是否支持给定的特性，以 pattern 为例，如下：

1
const isPatternSupported = 'pattern' in document.createElement('input');

如果你想检查某些特性值，则需要多几个步骤。下面的示例代码判断原生的日期输入框标签是否被支持：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const isDateInputSupported = () => {
    // 创建一个新的 input 元素
    const ele = document.createElement('input');

    // 设置 type 特性
    ele.setAttribute('type', 'date');

    const invalidValue = 'not-a-valid-date';

    // 设置一个非法的值
    ele.setAttribute('value', invalidValue);

    return ele.value !== invalidValue;
};

如果浏览器支持 date input，调用 setAttribute 并传入一个非法的日期将不会在 value 特性上生效。因此，ele.value 将会是一个空字符串。

否则，这个输入框会被当做普通文本输入框，同时 ele.value 会返回原始的值。

通过 :is 伪类选择器组合样式

:is 伪类选择器为其参数中列出的选择器匹配到的所有元素应用样式，而不是写分开的选择器：

1
2
3
4
5
header a:hover,
nav a:hover,
footer a:hover {
    text-decoration: underline;
}

我们可以把它们组合成一个单独的，如下：

1
2
3
:is(header, nav, footer) a:hover {
    text-decoration: underline;
}

创建一个一次性的事件处理器

有时候我们想要一个给定元素的事件触发一次。通常，这可以通过绑定一个移除自身的处理器实现：

1
2
3
4
5
6
const handler = (e) => {
    // 做些事情 ...
    element.removeEventListener('click', handler);
};

element.addEventListener('click', handler);

我们可以使用一个命名函数表达式使代码缩短一点：

1
2
3
4
5
6
element.addEventListener('click', function handler(e) {
    // 做些事情 ...

    // 移除处理器
    e.currentTarget.removeEventListener(e.type, handler);
});

然而，现代浏览器提供了一个新的 once 选项让事情变得更简单了。我们不再需要去跟踪处理器的引用了。

1
2
3
4
5
6
7
8
9
element.addEventListener(
    'click',
    (e) => {
        // 做些事情 ...
    },
    {
        once: true,
    }
);

强制给定必须的参数

在 ES6 中，默认参数值在参数缺省时被计算。这让我们可以强制给定某个必须的参数：

1
2
3
4
5
const required = () => {
    throw new Error('Missing parameter');
};

const getAges = (yearOfBirth = required()) => new Date().getFullYear() - yearOfBirth;

不带参数调用 getAges() 函数会抛出 Missing parameter 异常。

在 CSS 属性选择器中忽略大小写敏感

默认情况下，CSS 属性选择器是大小写敏感的。这意味着 a[href$=".png"] 只对带有 .png 扩展名的链接起作用。

设想你正在创建一个文件管理应用。这可能需要根据文件的扩展名来添加一个图标。比如，下面的 CSS 为任意的 .png 文件插入一个图标。

1
2
3
a[href$='.png']:after {
    content: url(/img/png.svg);
}

在现实中，文件是由用户上传的，我们不能控制文件的扩展名。一个 png 文件可以被命名为 .png，.PNG，.pNG。

为了接受所有这些变种，我们可以在选择器的 ] 前面添加 i。

1
2
3
a[href$='.png' i]:after {
    content: url(/img/png.svg);
}