Twitter кнопка доля - нужен HTML объяснил

Question

Я недавно добавили кнопку Share в моей случайной цитатой генератора (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 || {}; 

2-выше линий объявить 3 переменные:

• js - не определено в этой точке
• fjs - равна первому <script> элемент на странице (замените d и s с фактическими значениями параметров, и вы получите: document.getEelmentsByTagName("script")[0])
• t - равно window.twttr, если они определены до или пустой объект {}

Следующая строка является защита от нескольких включает в себя библиотеки твиттер виджета:

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;