這個(gè) 29.7 K 的剪貼板 JS 庫(kù)有點(diǎn)東西！
2020 年即將結(jié)束了，不知不覺(jué) 源碼分析 專(zhuān)題已經(jīng)寫(xiě)了 9 篇文章，往期的 8 篇文章介紹了 Axios、BetterScroll、koa-compose 和 FileSaver.js 等優(yōu)秀的開(kāi)源項(xiàng)目，該專(zhuān)題的每篇文章阿寶哥都花了挺多時(shí)間與精力。
不過(guò)值得欣慰的是，專(zhuān)題中的多篇文章受到了掘金小伙伴和公眾號(hào)粉絲的認(rèn)可與鼓勵(lì)，這讓阿寶哥有繼續(xù)寫(xiě)該專(zhuān)題的動(dòng)力，這里真心地感謝大家的支持。
對(duì)往期 8 篇文章感興趣的小伙伴，可以閱讀 如何更好地閱讀源碼？這八篇文章給你答案 這篇文章。
好的，我們馬上回到正題。本期阿寶哥將介紹一個(gè)被 157317?個(gè)項(xiàng)目引用的 JS 開(kāi)源庫(kù) —— clipboard.js。相信挺多小伙伴在項(xiàng)目中，也用到了這個(gè)庫(kù)。那么這個(gè)庫(kù)背后的工作原理是什么？感興趣的小伙伴，跟阿寶哥一起來(lái)揭開(kāi)這背后的秘密吧。
一、clipboard.js 簡(jiǎn)介
clipboard.js 是一個(gè)用于將文本復(fù)制到剪貼板的 JS 庫(kù)。沒(méi)有使用 Flash，沒(méi)有使用任何框架，開(kāi)啟 gzipped 壓縮后僅僅只有 3kb。
（圖片來(lái)源：https://clipboardjs.com/#example-text）
那么為什么會(huì)有 clipboard.js 這個(gè)庫(kù)呢？因?yàn)樽髡?zenorocha 認(rèn)為：
將文本復(fù)制到剪貼板應(yīng)該不難。它不需要幾十個(gè)步驟來(lái)配置，也不需要加載數(shù)百 KB 的文件。最最重要的是，它不應(yīng)該依賴(lài)于 Flash 或其他任何框架。
該庫(kù)依賴(lài)于 Selection 和 execCommand API，幾乎所有的瀏覽器都支持 Selection API，然而 execCommand API 卻存在一定的兼容性問(wèn)題：
（圖片來(lái)源：https://caniuse.com/?search=execCommand）
（圖片來(lái)源：https://caniuse.com/?search=execCommand）
當(dāng)然對(duì)于較老的瀏覽器，clipboard.js 也可以優(yōu)雅地降級(jí)。好的，現(xiàn)在我們來(lái)看一下如何使用 clipboard.js。
二、clipboard.js 使用
在使用 clipboard.js 之前，你可以通過(guò) NPM 或 CDN 的方式來(lái)安裝它：
NPM
npm?install?clipboard?--save
CDN
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>