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

＆＃34; HTML＆＃34; part创建<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;