前言
在前端开发中，我们常常需要将外部网页的一部分嵌入我们的网页中，例如嵌入一个 YouTube 视频或者一篇 Medium 文章。oEmbed 是一种简单的方式，让我们可以轻松地实现这个功能，而 oembed-auto-es6 是一款优秀的 npm 包，可以帮助我们快速地实现 oEmbed 的功能。本篇文章将介绍 oembed-auto-es6 这款 npm 包的使用教程，旨在帮助前端开发者更好地开发网页。
oembed-auto-es6 简介
oembed-auto-es6 是一款基于 ES6 语法编写的 oEmbed 解析器，可以解析 oEmbed data 和 oEmbed API。它可以根据传入的地址自动判断嵌入的内容类型，并生成对应的嵌入代码。
安装 oembed-auto-es6
安装 oembed-auto-es6 非常简单，只需要在命令行中运行以下命令即可：
npm install oembed-auto-es6 --save
安装成功后，我们就可以在代码中使用 oembed-auto-es6 了。
使用 oembed-auto-es6
使用 oembed-auto-es6 也非常简单，只需要在代码中引入该包，然后根据需要调用相应的方法，即可生成嵌入代码。下面我们来看一下具体的使用方法。
引入 oembed-auto-es6
import oembed from 'oembed-auto-es6';
解析 oEmbed data
oEmbed data 是包含嵌入内容信息的 JSON 对象，通常是由外部服务提供的。我们可以使用 oembed-auto-es6 的 parse 方法，将 oEmbed data 解析成对应的嵌入代码。例如下面的代码可以将 YouTube 的 oEmbed data 解析成对应的嵌入代码：
-- -------------------- ---- ------- --- ---- - - ----- -------- -------- ------ ------ ------ ------ -------- --- --------- - ----- ------ ------ ------------ ------------ ---- ------ ----------- ----------------------------------------------------------- -------------- ---------- ------------- --------------------------- ---------------- ---- ----------------- ---- -------------- --------------------------------------------------- ------ ---- ------- ---- ----- -------- ----------- ------------ ----------------------------------------------- --------------- --------------------- --------- ---------------- ---------- ------------------- -------------------------- -- --- ------ - ------------------- --------------------
解析结果如下：
<iframe width="640" height="360" src="https://www.youtube.com/embed/0-S5a0eXPoc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
解析 oEmbed API
oEmbed API 是外部服务提供的一种获取嵌入内容信息的接口。我们首先需要使用 fetch 方法获取 oEmbed data，然后再将 oEmbed data 解析成嵌入代码。例如下面的代码可以获取 Medium 上一篇文章的嵌入代码：
let url = 'https://medium.com/@addyosmani/a-few-things-i-learned-about-react-transition-group-2bb53d876737';
fetch(`https://medium.com/oembed?url=${url}&format=json`)
.then(response => response.json())
.then(data => {
let result = oembed.parse(data);
console.log(result);
});解析结果如下：
<blockquote class="embedly-card"><h4><a href="https://medium.com/@addyosmani/a-few-things-i-learned-about-react-transition-group-2bb53d876737">A few things I learned about React Transition Group – Addy Osmani – Medium</a></h4><p><em>The following is a guest post by Jack Doyle, creator of <a href="http://greensock.com/">GSAP</a> and CSSPlugin. Jack is going to tell us about some lessons he learned while tinkering with React Transition Group.</em></p><p>Recently, while...</p></blockquote> <script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
自定义嵌入代码模板
oembed-auto-es6 提供了对 template 方法的支持，该方法可以让我们自定义嵌入代码的模板，从而实现更灵活的嵌入效果。例如下面的代码可以自定义一个简单的嵌入代码模板：
oembed.template(`<div class="embed"><% if (data.html) { %><%= data.html %><% } %></div>`);然后我们就可以使用这个模板来生成嵌入代码了。例如下面的代码可以将 YouTube 的 oEmbed data 解析成使用自定义模板的嵌入效果：
-- -------------------- ---- ------- --- ---- - - ----- -------- -------- ------ ------ ------ ------ -------- --- --------- - ----- ------ ------ ------------ ------------ ---- ------ ----------- ----------------------------------------------------------- -------------- ---------- ------------- --------------------------- ---------------- ---- ----------------- ---- -------------- --------------------------------------------------- ------ ---- ------- ---- ----- -------- ----------- ------------ ----------------------------------------------- --------------- --------------------- --------- ---------------- ---------- ------------------- -------------------------- -- --------------------- ---------------- -- ----------- - ----- --------- ---- - ----------- --- ------ - ------------------- --------------------
生成的嵌入代码如下：
<div class="embed"><iframe width="640" height="360" src="https://www.youtube.com/embed/0-S5a0eXPoc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
结语
oembed-auto-es6 是一款非常好用的 oEmbed 解析器，可以帮助我们方便地嵌入各种内容。本篇文章详细介绍了该包的使用方法，希望能够帮助前端开发者更好地开发网页。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066fac3d1de16d83a671ed