javascript - 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 加载推特小部件库.它把创建的 <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 || {};

上面两行声明了 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;