Статьи

Сделайте свои собственные значки для веб-сайтов с помощью jQuery и JSON

Январь 7, 2019

jquery-logo-sm

Такие сервисы, как Flickr , Delicious и Twitter, предлагают значки JavaScript или виджеты, которые вы можете добавить на свой сайт. Но если вы уже используете JavaScript-фреймворк на своем сайте, например, jQuery, зачем вам добавлять больше JavaScript? Кроме того, веселее делать свои собственные. Все эти сервисы также предлагают API фида в формате JSON, и переход на собственный виджет очень прост. Вот один из них, который я быстро нашел в Twitter, используя jQuery. Вы будете удивлены тем, как мало кода требуется.

Все, что вам нужно для использования Twitter JSON API — это URL:

http://twitter.com/status/user_timeline/sitepointdotcom.json?count=5&callback=yourfunction

Замените sitepointdotcomcount=5 Скопируйте этот URL-адрес в поле адреса вашего браузера, и вы сможете загрузить данные JSON для просмотра: 

 yourfunction

Результатом является вызов вашей функции JavaScript. Массив, содержащий коллекцию объектов JSON — по одному на каждый твит — передается в качестве единственного аргумента. Идея состоит в том, что вы добавляете элемент script на свою веб-страницу с указанным выше URL в качестве источника. Это необходимо, чтобы обойти ограничение безопасности Ajax, присутствующее в большинстве браузеров, где JavaScript не может выполнять вызовы Ajax в домены, отличные от текущего. Вполне нормально, однако, включить исходный файл JavaScript из другого домена; это стандартный способ работы таких значков.

Тем не менее, мы будем использовать другой подход, потому что добавление другого тега сценария и проверка наличия функции обратного вызова звучит для меня грязно. Мы собираемся использовать исключительно yourfunction([ ... ]);getJSON Для начала нам понадобится HTML-код, в который нужно поместить данные виджета: 

 <div id="tweet">
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

Идея состоит в том, что все обновления Twitter будут вставляться в этот элемент div Красиво и просто. Мне также это нравится, потому что если по какой-то причине JavaScript не запускается, на странице остается значимое содержимое, а не, скажем, анимация загрузки, которая никогда не заканчивается.

Поэтому я хочу, чтобы этот скрипт запускался, когда страница была готова, и лучший способ сделать это в jQuery — это использовать $(document).ready 

 $(document).ready(function(){
  //our code goes here...
});

Все, что нужно методу getJSON Что хорошего в этой функции в том, что если вы добавите параметр строки запроса callback=? в конце URL jQuery позаботится о функции обратного вызова для вас: 

 $(document).ready(function(){
  var tweeturl = "http://twitter.com/status/"
      +"user_timeline/sitepointdotcom.json?count=5"
      +"&callback=?";
  $.getJSON(tweeturl, function(data){
    //read the JSON data here...  
  });
});

jQuery передаст данные JSON функции, указанной во втором аргументе, в качестве переменной data Затем мы можем использовать каждый метод, чтобы просмотреть все твиты и вставить их в HTML-код нашей страницы: 

 $.getJSON(tweeturl, function(data){
  $.each(data, function(i, item) {
    $('<p></p>')
        .addClass(i%2 ? 'even' : 'odd')
        .html(item.text)
        .prependTo('#tweet');
  });
});

Если вы пойдете и посмотрите демо , вы увидите, что теперь у нас есть виджет, который извлекает данные Twitter, преобразует каждый твит в абзац HTML и вставляет их в HTML нашей страницы. Мы также добавляем значение classoddeven Пока все хорошо, но чего не хватает? Ну, я думаю, что любой значок Twitter должен содержать хотя бы ссылку @replies, hashtags и URL; и добавление некоторых регулярных выражений JavaScript поможет нам в этом: 

 var txt = item.text.replace(
  /(https?://[-a-z0-9._~:/?#@!$&'()*+,;=%]+)/ig,
  '<a href="$1">$1</a>'
).replace(
  /@+([_A-Za-z0-9-]+)/ig, 
  '<a href="http://twitter.com/$1">@$1</a>'
).replace(
  /#+([_A-Za-z0-9-]+)/ig,
  '<a href="http://search.twitter.com/search?q=$1">
      +'#$1</a>'
);
$('<p></p>')
  .addClass(i%2 ? 'even' : 'odd')
  .html(txt)
  .prependTo('#tweet');

Это оно! Иди и посмотри на готовый продукт . Насколько просто это было?

Тот же подход можно использовать с Delicious , Flickr , Last.fm и даже Yahoo Pipes . Есть много возможностей для совершенствования; Вы можете добавить информацию о времени, ссылку на URL твита, добавить аватары и так далее. Раена, другой технический редактор SitePoint, предположила, что вы можете даже объединить данные из всех этих сервисов в обратном хронологическом порядке, чтобы создать отображение в стиле жизненного потока. Если у вас есть желание сделать свой собственный, оставьте комментарий и дайте мне знать.

33
Share: