首页/ 文章/前端/正文

2020 年即将结束了,不知不觉 源码分析 专题已经写了 9 篇文章,往期的 8 篇文章介绍了 AxiosBetterScrollkoa-compose 和 FileSaver.js 等优秀的开源项目,该专题的每篇文章阿宝哥都花了挺多时间与精力。不过值得欣慰的是,专题中的多篇文章受到了 掘金小伙伴和公众号粉丝 的认可与鼓励,这让阿宝哥有继续写该专题的动力,这里真心地感谢大家的支持。

对往期 8 篇文章感兴趣的小伙伴,可以阅读 如何更好地阅读源码?这八篇文章给你答案 这篇文章。

好的,我们马上回到正题。本期阿宝哥将介绍一个被 158024 个项目引用的 JS 开源库 —— clipboard.js。相信挺多小伙伴在项目中,也用到了这个库。那么这个库背后的工作原理是什么?感兴趣的小伙伴,跟阿宝哥一起来揭开这背后的秘密吧。

一、clipboard.js 简介

clipboard.js 是一个用于将文本复制到剪贴板的 JS 库。没有使用 Flash,没有使用任何框架,开启 gzipped 压缩后仅仅只有 3kb

(图片来源:https://clipboardjs.com/#example-text)

那么为什么会有 clipboard.js 这个库呢?因为作者 zenorocha 认为:

将文本复制到剪贴板应该不难。它不需要几十个步骤来配置,也不需要加载数百 KB 的文件。最最重要的是,它不应该依赖于 Flash 或其他任何框架。

该库依赖于 Selection 和 execCommand API,几乎所有的浏览器都支持 Selection API,然而 execCommand API 却存在一定的兼容性问题:

(图片来源:https://caniuse.com/?search=execCommand)

(图片来源:https://caniuse.com/?search=execCommand)

当然对于较老的浏览器,clipboard.js 也可以优雅地降级。好的,现在我们来看一下如何使用 clipboard.js。

关注「全栈修仙之路」阅读阿宝哥原创的 3 本免费电子书(累计下载 2万+)及 50 几篇 “重学TS” 教程。


打赏

好文章,更需要你的鼓励

免责声明:本文转载至互联网,不代表本站的观点和立场。

浏览次数:75 次浏览

发布时间:2020-12-25 12:33:02

相关标签: clipboardFileSaver

本文链接:http://v3.pro.demo.hisiphp.com/show-83.html