作为一名前端开发工程师，开发 Web 应用程序的同时，实现社交媒体分享的功能早已成为一项必不可少的任务。这也就需要我们寻找一些好用的工具，以便达到简单、快速和高效的目的。在这篇文章中，将会介绍一个 npm 包—— ember-share-buttons，它是一个基于 Ember 框架开发的社交媒体分享插件。
什么是 Ember?
Ember.js，是一个为 Web 开发者提供的 JavaScript 应用程序框架。它是一款基于 Model-View-ViewModel（MVVM）架构模式的 JavaScript 框架，拥有高度团队化的设计，并且社区中也拥有众多的插件和工具。
ember-share-buttons 简介
ember-share-buttons 是由 Deepak Mittal 开发的社交媒体分享插件，其目的是将社交媒体分享功能集成到 Ember 应用程序中。该插件根据用户所选择的社交媒体站点生成不同的分享按钮，方便用户实现一个简单且易于使用的分享组件。
在开发过程中，ember-share-buttons 使用了 Font Awesome 图标字体库来为不同的社交媒体分组提供适当的图标。它还支持使用 Bootstrap 样式库来控制按钮的样式。你也可以使用 CSS 样式来更改按钮的颜色和大小，以及插件中内置的样式表，这让 ember-share-buttons 具有一定的定制性。
安装 ember-share-buttons
安装 ember-share-buttons 可以通过 npm，从命令行输入如下命令即可：
npm install ember-share-buttons --save-dev
在 Ember 应用程序中注册这个组件，在你的项目中的 app.js 文件中加入如下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- -----------------------------------------------------
----- --- - --------------------------
------------- ---------
--------- ------------------------------
---------- -
------------- --------
-
--
---
---------------------
----------- ---------------------
---
------ ------- ----如何使用 ember-share-buttons
- 使用
share-buttons组件
在需要添加分享按钮的地方，可以使用如下组件：
{{share-buttons targetUrl=this.currentUrl}}该组件中的 targetUrl 属性必须被设置，以指向你想要分享的 URL 地址。你可以在你的 Controller 中定义它:
import Ember from 'ember';
export default Ember.Controller.extend({
currentUrl: window.location.href
});- 支持的社交媒体站点
在 ember-share-buttons 中支持了以下社交媒体站点：
- Google+
在组件定义中，可以使用 excludeSites 属性来排除不需要的社交媒体站点。
{{share-buttons targetUrl=this.currentUrl excludeSites='google,pinterest' classNames='my-social-buttons'}}如果你要自定义你的社交媒体站点的顺序，可以使用 order 属性来自定义排序。
{{share-buttons targetUrl=this.currentUrl order='facebook,twitter,linkedin,reddit' classNames='my-social-buttons'}}- 为分享按钮添加 Bootstrap 样式
如果你需要使用 Bootstrap 样式来控制分享按钮的样式，你可以在你的应用程序视图的 CSS 文件中添加以下样式：
.my-social-buttons button {
margin: 5px;
}- 自定义图标和颜色
你可以使用 Font Awesome 图标字体来为分享按钮添加自定义图标，同时也可以在样式表中自定义按钮的颜色和大小。在关键部分可能需要通过命令行安装 Font Awesome。
.my-social-buttons .facebook {
color: #3B5998;
}
.my-social-buttons .twitter {
color: #1DA1F2;
}现在你已经知道如何在你的 Ember 应用程序中使用 ember-share-buttons。祝你好运！
总结
社交媒体分享已经成为现今互联网中一项必不可少的功能。当然，这种功能也存在越来越多的解决方案。而 ember-share-buttons 则是一个基于 Ember 框架的社交分享插件，提供了一系列的定制选择，既实现了快速集成，也与其支持的 Ember 框架无缝对接，大大提高了分享功能的开发效率。所以在实际的开发过程中，我们可以灵活使用 ember-share-buttons 来快速高效实现社交媒体分享的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1da563576b7b1eccf9