冷门技巧 & 疑难杂症
阻止浏览器加载 favicon
<link rel="icon" href="data:," />
Map 返回 Object 时的 Lint 问题
const launchOptimistic = rockets.map((elem) => ({
country: elem.country,
launches: elem.launches + 10,
}));
React 中使用 input[type=file] 的问题
if (this.props.webkitdirectory) {
var inputEle = ReactDOM.findDOMNode(
this.refs.input
) as HTMLInputElement;
inputEle.setAttribute("webkitdirectory", "");
}
由于webkitdirectory不是 w3c 的标准属性，所以你无法在 JSX 中直接声明。
模拟安卓桌面滚动效果（粘性滚动）
参考 MDN
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;
Markdown 链接变量
此方法可以让一个链接复用多次。
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
判断当前页面是否存在输入事件
navigator.scheduling.isInputPending();
这 facebook 官方贡献给 Chromium 的 api, 现在已经列入 W3C 标准(具体解释), 用于判断是否有输入事件(包括: input 框输入事件, 点击事件等)。
Authenator (2FA) 原理
Authenticator 会保存密钥和用户名的信息，并使用共享密钥和当前时间生成每 30 秒更改一次的六位数代码。
云服务通过相同的算法，检查用户输入的代码是否与 Google Authenticator 使用共享密钥和当前时间生成的代码相匹配。
如果代码匹配，则用户被授予访问该服务的权限。
分割 emoji 字符串
由于 emoji 的特殊构成，直接使用 split 方法会出现问题。可以使用浏览器自带的Intl来进行本地化分词。
const emojis = "🫣🫵👨👨👦👦";
console.log(emojis.split(""));
console.log([...emojis]); // ['🫣', '🫵', '👨', '', '👨', '', '👦', '', '👦']
const segmenter = new Intl.Segmenter("en", {
granularity: "grapheme",
});
const segments = segmenter.segment(emojis);
console.log(Array.from(segmenter.segment(emojis), (s) => s.segment)); // ['🫣', '🫵', '👨👨👦👦']
iframe 的安全用法
使用 sandbox 属性可以保证安全性。
<iframe
srcdoc="{{UNTRUSTED_HTML_HERE}}"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
csp="script-src 'none'"
/>
srcdoc 属性允许你直接把 html 写在属性值当中。例如：
<iframe
srcdoc="<p>Hello, world! This is an inline HTML document.</p>"
width="500"
height="300"
></iframe>
值得一提的是，srcdoc 的优先级要比 src 高，这意味着如果二者同时被设置，前者将生效。