创建一个 JavaScript 插件，用于高亮显示文本并将其发布到 Twitter。
本文最初发布在我的博客上。访问inspiredwebdev.com查看更多文章和教程。欢迎查看我在Educative上的JavaScript 课程，学习从 ES6 到 ES2019 的所有内容。
大家好，我是 Alberto Montalesi，一名自学成才的全栈开发者。我在我的网站inspiredwebdev.com上创建 JavaScript 教程和课程，旨在激励其他开发者成长并建立他们理想的职业生涯。
创建一个插件，用于高亮显示文本并将其发布到 Twitter。
很多时候，我在网站上读到一段文字，然后想把它分享给我的朋友或网络上的陌生人，但很少有网站能帮我实现这个愿望。
通常情况下，我需要复制我想分享的段落，然后去 Twitter 上发布，但我们都知道大多数人都很懒，所以，如果你想让你的用户发布你文章/博客等的内容……在本教程中，我将教你如何创建一个简单的插件来实现这一点。
或者，如果您不想自己编写代码，我已经为您打包好了，您可以在 npm 上找到highlight-to-tweet。
大部分创意和代码都归功于WebFlow上的这位用户。我主要将 jQuery 代码转换成了原生JavaScript代码，并将其发布为 npm 包。
我们将要开发的插件将按以下方式工作：
- 用户选中了您页面上的某些文本
- 系统会提示他们通过按钮将其发布到 Twitter。
- 他们点击按钮，就可以发布推文，所有操作都无需离开您的网站。
创建 tweetHighlighted 函数
现在一切准备就绪，让我们打开JavaScript文件，从这里开始：
document.addEventListener('DOMContentLoaded', () => {
window.tweetHighlighted = () => {
// our function will be built here
}
// we call it once the page loads
window.tweetHighlighted()
})
首先，我们需要定义一些稍后会用到的属性。在函数内部window.tweetHighlighted = () => {，我们需要添加以下代码：
const settings = {
node: "<a href='#'>Tweet</a>",
maxLength: 280,
extra: null,
via: null,
popupArgs:'width=400,height=400,toolbar=0,location=0',
}
以下是我们插件的基本设置：
- 节点定义了弹出按钮中将包含的元素
- maxLength 是推文允许的最大长度，这里我将其设置为 280，因为这是推文允许的最大长度，但如果您想设置得更短，也可以。
- extra 指的是你想添加到推文中的一些额外文字。
- 通过 `via` 定义了 Twitter 的处理程序，如果您希望在用户通过您的网站发布推文时被标记，则可以使用此处理程序。
- popupArgs 用于定义 Twitter 弹出窗口。
下一步我们将创建一个按钮，将其添加到 DOM 中，并为其添加一个事件监听器。
在刚才编写的代码之后，继续添加以下内容：
let url = '';
let text = '';
const shareButton = document.createElement('div');
shareButton.style.display = 'none';
shareButton.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
window.open(url, '_blank', settings.popupArgs);
})
const body = document.querySelector('body');
body.appendChild(shareButton);
首先，我们定义了两个空变量，分别用于保存我们的推文url和text目标推文。
其次，我们创建了一个新div元素并将其赋值给我们的变量shareButton。
然后我们将其隐藏display:'none'，并为其添加了一个事件监听器来监听click事件。
当用户点击我们的按钮时，我们会stopPropagation避免点击事件冒泡到a我们上面node在设置中分配给的标签，并且我们还会调用window.open传递url稍后将填充的内容以及我们的参数来定义要打开的窗口的大小。
之后，我们只需将这个新创建的元素添加到body页面中即可。
您可能想知道的一件事是，我们将如何识别用户何时在页面上突出显示文本。
答案很简单，我们将使用该mouseup事件并检查用户是否选择了某些内容。
为函数添加事件监听器
接着我们刚才的工作，让我们添加以下代码：
document.addEventListener('mouseup', (e) => {
text = getSelectedText();
const btnExists = shareButton.style.display !== 'none';
if (btnExists || !text.length){
return;
} else {
appendShareButton(e)
}
})
const getSelectedText = () => {
if (window.getSelection) {
return window.getSelection().toString();
} else if (document.selection) {
return document.selection.createRange().text;
}
return '';
};
太棒了，这两个函数将确保当用户触发mouseup事件时，如果某些文本被高亮显示，我们将捕获它，将其存储在我们的text变量中，并调用该函数appendShareButton将该按钮添加到 DOM 中。
我们继续，来定义这个函数：
const appendShareButton = (e) => {
url = getTweetURL(text, settings.extra, settings.via);
shareButton.innerHTML = '';
shareButton.innerHTML += settings.node;
shareButton.innerHTML += tweetIcon;
if(settings.cssClassess && settings.cssClassess.length){
shareButton.classList.add(settings.cssClassess);
}
shareButton.style.top = `${e.pageY}px`;
shareButton.style.left = `${e.pageX}px`;
shareButton.style.position = 'absolute';
shareButton.style.cursor = 'pointer';
shareButton.style.display = 'flex';
shareButton.style.justifyContent = 'space-between';
shareButton.style.alignContent = 'center';
shareButton.style.alignItems = 'center';
shareButton.style.opacity = 0;
shareButton.style.fontFamily = 'Arial, Helvetica, sans-serif';
shareButton.style.backgroundColor = '#3898EC';
shareButton.style.padding = '10px 15px';
shareButton.style.width = '100px'
shareButton.style.borderRadius = '5px';
shareButton.style.color = 'white';
shareButton.firstChild.style.color = 'white';
shareButton.firstChild.style.textDecoration = 'none';
shareButton.lastChild.style.fill = 'white';
}
哇，这个函数很长，不过别担心，它其实没做什么。大部分代码只是样式设置。
url首先，我们通过调用另一个尚未定义的函数来创建完整的文本，该函数名为getTweetURL，并将突出显示的文本、额外的文本和 via 处理程序传递给它。
然后，我们定义一系列样式，以便shareButton正确地显示和定位它。
唯一重要的参数是与按钮位置相关的参数，其他一切都只是样式问题。
像这样把每种样式都单独定义在一行可能有点繁琐，但我认为这样更容易看清。如果你愿意，也可以这样定义样式：
shareButton.style.cssText = `
/* your list of style here, same as how you would add it in a CSS file*/
`
您可能已经注意到这句话：shareButton.innerHTML += tweetIcon;
我们还没有定义 a，tweetIcon所以让我们跳出这个函数，复制这段代码：
const tweetIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>`;
这是推文图标，是我从网上找到的一个简单的 SVG 文件，这样我们就不用从 CDN 或其他地方调用它了。
太棒了，现在我们有了将按钮添加到 DOM 的函数，我们只需要定义这个函数即可getTweetURL。
我们现在就开始吧：
构建推文的 URL
const getTweetURL = function (text, extra, via) {
let url = 'https://twitter.com/intent/tweet?text=';
// trim the text to fit in the max allowed 280 characters
const viaUrl = `&via=${via}`;
const maxLength = settings.maxLength > 280 ? 280 : settings.maxLength;
const maxAllowedLength = maxLength - viaUrl.length - extra.length;
let textToTweet = text;
if(text.length > maxAllowedLength){
textToTweet = text.substring(0,maxAllowedLength -1);
}
url += encodeURIComponent(textToTweet);
if (extra)
url += encodeURIComponent(' ' + extra);
if (via)
url += viaUrl
return url;
};
让我们来分析一下这个函数：
- 首先，我们定义所需的基本 URL。
via然后我们创建包含处理程序的 URL 部分。- 之后，我们根据定义的 maxLength（或最大值 280）、via 处理程序和额外文本，计算文本中允许保留的字符数。
- 如果文本太长，我们通常
substring只取其中的一部分。 - 然后我们将所有内容组合在一起，并
encodeURIComponent确保所有字符都已正确转义。
这样就完成了，这个函数会返回一个完美的 URL 来分享这条推文。
现在你可以在你的网页上尝试这段代码，你会发现一切应该都能正常运行。
如果你想要一个可定制性更强的插件，可以看看我在Github上发布的那个。
非常感谢您的阅读。欢迎在DevTo、我的博客inspiredwebdev或Twitter上关注我。也欢迎访问Educative.io，那里有互动式编程课程。
免责声明：文中链接指向亚马逊和Educative网站，均为联盟链接。您通过这些链接购买商品，我将获得额外佣金。谢谢！
我的电子书已在亚马逊和Leanpub上架。