Twitter 分享按钮 - 需要 HTML 解释

Question

我最近在我的随机报价生成器 (http://conn3cted.uk.tn/quote.html) 中添加了一个分享按钮，它可以工作:-)

为了完成这项工作，我必须添加两件事，一是在我的 HTML 文件中，一是在我的 Javascript 文件中...

Javascript

twttr.widgets.createShareButton(
    // Do not share a URL
    " ",
    // Div where the share button should be inserted
    document.getElementById('tweetButton'),
    {
        // Define the tweet that will be used
        text: "'" + $(".quoteContent").text() + "'" +
        $(".quoteTitle").text(),
        // Set the size of the Twitter share button
        size: "large",
    }
);

HTML

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

我很沮丧，因为我无法弄清楚 HTML 位实际上做了什么......

Answer 1

“HTML”部分创建一个<script> 以从https://platform.twitter.com/widgets.js 加载twitter 小部件库。它将创建的 <script> 元素放在所有脚本之前。

你可以在开发者工具中看到结果：

如果您需要更多解释，请告诉我。

更新

好的，一步一步来。查看第一行和最后一行：

<script>window.twttr = (function(d, s, id) {
...
}(document, "script", "twitter-wjs"));</script>

声明一个函数并立即调用它是 JavaScript 中的一种常见模式。这就是这里发生的事情。第一行是 function 的声明，它接受 3 个参数：d、s 和 id。在最后一行，使用实际参数document、"script" 和"twitter-wjs" 调用声明的函数。此外，函数的结果被分配给window.twttr 变量。

现在让我们进入函数内部：

var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};

上面的 2 行声明了 3 个变量：

• js - 此时未定义
• fjs - 等于页面上的第一个 <script> 元素（将 d 和 s 替换为实际参数值，您将得到：document.getEelmentsByTagName("script")[0]）
• t - 等于 window.twttr 如果之前定义或为空对象 {}

下一行是对 twitter 小部件库的多个包含的保护：

if (d.getElementById(id)) return t;

如果带有id="twitter-wjs" 的元素已经存在，则返回，即中断函数的执行。如果它不存在，那么继续前进：

js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";

这 3 行创建了一个 <script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script> 标记。

下一行插入创建的<script> 作为文档中包含第一个<script> 的元素的第一个子元素：

fjs.parentNode.insertBefore(js, fjs); 

以下 3 行：

t._e = [];
t.ready = function(f) {
  t._e.push(f);
};

初始化一个队列，您可以将函数放入其中，一旦加载了 twitter 小部件，它们就会被调用。你可以这样使用它：

twttr.ready(function() {
    twttr.widgets.createShareButton(...);
});

最后一行返回 t 变量作为函数的结果。

return t;