sd-share 是一个 npm 包，能够方便地将你的网页分享到不同的社交媒体平台上。在前端开发中，经常需要把网站分享给用户或者朋友，但是每个社交平台对于分享的要素以及分享的方式都不一样，这就需要我们手动一一调整。而 sd-share 就是能够解决这个问题的最佳工具。
本篇文章会介绍如何安装和使用 sd-share，以及对于其中一些关键的代码片段的详细讲解，力求让你系统地掌握这个实用的 npm 包。
安装
在终端中，输入以下命令即可安装 sd-share：
npm install sd-share
如果你使用的是 Yarn 作为包管理工具，可以使用以下命令：
yarn add sd-share
使用
sd-share 的使用非常简单，只需要在你的 HTML 页面中插入一个 JavasScript 文件和一个 CSS 文件即可。下面是一个基本的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
----- ---------------- --------------------------------------------------------
-------
------
------- -----------------------------------
------- ---------------------------------------------------------------
--------
--- ----------- - --------------------
--- ------------------------------- -
------ -----
------------ -----
---- ----------------------
------ --------------------------------
--------- -
--------- -
------ ------------
------------ ----------------------
-------- -------
--
-------- ---
---------- --
-
---
---------
-------
-------在这个示例中，我们首先引入了 sd-share.min.css 和 sd-share.min.js 两个文件。其中，CSS 文件是样式文件，控制着分享按钮的样式。而 JS 文件则是核心文件，负责处理分享的逻辑。
在 JS 文件中，我们首先定义了一个 ShareButton 实例，并把这个实例绑定到了 HTML 中的某个按钮上，这里是 '.sd-share-button'。我们还传入了一些分享所需的参数，比如 title、description、url 和 image。这些参数分别代表分享按钮所要展示的标题、描述、网址和图片。
最后，我们还定义了一个 networks 对象，这个对象描述了每个社交媒体平台的配置信息。在上面的代码中，我们只配置了 Facebook、Twitter 和 Pinterest 这三个平台，但是 sd-share 支持更多的平台，比如 LinkedIn、Google+、Reddit 等等。
现在，你已经知道了如何使用 sd-share 实现网页分享的功能。接下来，我们将分别对上述代码块进行详细的讲解。
引入 CSS 文件
在我们的示例代码中，我们引入了以下 CSS 文件：
<link rel="stylesheet" href="https://unpkg.com/sd-share/dist/sd-share.min.css">
这个文件控制着分享按钮的样式，包括按钮的宽度、颜色、边框等等。你可以根据自己的需要，手动修改这个文件。
引入并使用 JS 文件
在我们的示例代码中，我们引入了以下 JS 文件：
<script src="https://unpkg.com/sd-share/dist/sd-share.min.js"></script>
这个文件是 sd-share 的核心文件，负责处理分享的逻辑。在这个文件中，sdShare 对象会被添加到全局的 window 对象上。我们可以通过这个对象，访问 ShareButton 类和 Networks 类。
在我们的示例代码中，我们首先定义了一个 ShareButton 实例，并把这个实例绑定到了 HTML 中的某个按钮上：
-- -------------------- ---- -------
--- ----------- - --------------------
--- ------------------------------- -
------ -----
------------ -----
---- ----------------------
------ --------------------------------
--------- -
--------- -
------ ------------
------------ ----------------------
-------- -------
--
-------- ---
---------- --
-
---在这个示例中，我们首先定义了 ShareButton 变量，等于 sdShare.ShareButton。然后，我们定义了一个新的 ShareButton 实例，这个实例绑定了一个 CSS 选择器 '.sd-share-button'，表示这个分享按钮是页面中的某个元素。
这个实例还接受了一个参数对象，这个对象包括我们上面提到过的标题、描述、网址和图片参数，以及一个 networks 对象，这个对象描述了每个社交媒体平台的配置信息。
现在，我们已经成功地创建了一个分享按钮，并为它配置了一些参数。接下来，让我们详细地看一看这些参数。
分享所需的参数
在我们的示例代码中，我们使用了以下参数：
-- -------------------- ---- -------
-
------ -----
------------ -----
---- ----------------------
------ --------------------------------
--------- -
--------- -
------ ------------
------------ ----------------------
-------- -------
--
-------- ---
---------- --
-
-下面，我们将分别介绍这些参数。
title
title 参数表示分享所需的标题。这个标题将会出现在用户分享的内容中，通常是作为分享的主题，让用户更容易地知道分享的内容。在 sd-share 中，这个参数支持字符串类型。在示例代码中，我们使用的是 '标题' 这个字符串。
description
description 参数表示分享所需的描述。这个描述将会出现在用户分享的内容中，通常是作为分享的概述，让用户更容易地知道分享的内容。在 sd-share 中，这个参数同样支持字符串类型。在示例代码中，我们使用的是 '描述' 这个字符串。
url
url 参数表示分享所需的网址。这个网址将作为用户分享的内容的链接，让用户更容易地访问分享的内容。在 sd-share 中，这个参数同样支持字符串类型。在示例代码中，我们使用的是 'http://yoursite.com' 这个字符串。
image
image 参数表示分享所需的图片。这个图片将作为用户分享的内容的缩略图，让用户更容易地知道分享的内容的外观。在 sd-share 中，这个参数同样支持字符串类型。在示例代码中，我们使用的是 'http://yoursite.com/image.jpg' 这个字符串。
networks
networks 参数表示你想要分享的社交媒体平台，以及每个平台的配置信息。在 sd-share 中，这个参数是一个对象，对象的键表示了某个社交平台，而对象的值表示了这个平台的配信息。下面是一个包括 Facebook、Twitter 和 Pinterest 的 networks 对象的示例：
-- -------------------- ---- -------
-
--------- -
------ ------------
------------ ----------------------
-------- -------
--
-------- ---
---------- --
-在这个示例中，我们配置了 Facebook 的 appId、redirectUri 和 display 三个参数。appId 表示 Facebook 应用程序的 ID，redirectUri 表示 Facebook 登录后的跳转页面，display 表示 Facebook 分享弹出窗口的形式，通常为 'popup'。
对于 Twitter 和 Pinterest，我们没有配置任何参数，因为它们并不需要。Twitter 和 Pinterest 的配置信息将会自动从 sd-share 的默认配置中继承，除非你提供了它们的自定义配置。
现在，你已经掌握了 sd-share 的基本用法，并且知道了该如何配置参数。如果你想自定义分享按钮的样式，可以修改 CSS 文件。如果你想为更多的社交媒体平台自定义配置，可以参考 sd-share 的文档，或者在 GitHub 上查看源代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4581e8991b448e5c6c