Скрипт рейтинга постов. Выносим из кода.

Board index phpBBex 1.x Мастерская

Description: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Moderator: Поддержка

Post #1by factotum » 16.09.2013, 00:08

Трудночитаемый код стилей изрядно раздражает. В том числе статичные инлайновые скрипты.
Немного поразмыслив, созрел план вынести код рейтинга в кешируемые файлы js.
Мнение не претендует на правильное, но имеет право на жизнь.
Собственно идея:
в файле шаблона вместо кода рейтинга оставляем скрытый див с нужными данными:
Code: Select all
<!-- IF S_RATE_ENABLED -->
   <div id="rate-data" class="hidden" data-token="{AJAX_TOKEN}"></div>
<!-- ENDIF -->
Тут мы указываем лишь уникальный тоукен. Этого вполне достаточно(?), чтобы контролировать исполнения скрипта рейтинга.
Сам скрипт выносим в соответствующий файл.
Сопутствующие небольшие изменения:
Code: Select all
jQuery(function($) {
      var $token
      $token = $('#rate-data').data('token')
      if ($token == '') return
В начале проверяем наличие тоукена. При его отсутствии выходим из функции.
Исполняемый код помещаем в отдельную функцию:
Code: Select all
var runThis = function (element) {
      var action = element.hasClass('rate-minus') ? 'minus' : 'plus';
      var post_id = element.closest('.post').data('id');
      var $box = element.parent();
      // $('.rate-value', $box).wrapInner('<span class="inline-preloader"></span>');
      $.getJSON('ajax.php', {'module': 'rating', 'action': action, 'post_id': post_id, 'token': $token})
      .done(function(data) {
         if (data.status != 'ok') return;

         var html = '';
         html += '<span class="rate-';
         html += (data.user_rate < 0) ? 'minus-voted' : (data.user_can_minus ? 'minus' : 'no-minus');
         html += '"></span><span class="rate-value rate-';
         html += (data.post_rating > 0) ? 'positive' : ((data.post_rating < 0) ? 'negative' : 'zero');
         html += '" title="+' + data.post_rating_positive + ' −' + data.post_rating_negative + '">';
         html += (data.post_rating_positive != 0 || data.post_rating_negative != 0) ? data.post_rating : '−';
         html += '</span><span class="rate-';
         html += (data.user_rate > 0) ? 'plus-voted' : (data.user_can_plus ? 'plus' : 'no-plus');
         html += '"></span>';
         $box.html(html);
      })
      .fail(function()
      {
         $('.rate-value', $box).text($('.rate-value span', $box).text());
      });
Ковыряться не стал, временно удовлетворившись компактностью кода. Сходу добавил пару небольших правок:
Code: Select all
var post_id = element.closest('.post').data('id');
var $box = element.parent();
исходные parents заменил на более быстрые closest и parent

прослушивание портов опустилось как и положено - в самый конец функции:
Code: Select all
$(document).on('click', '.rate-minus, .rate-plus', function(e) {
      e.preventDefault()
      $this = $(this)
      runThis($this)
   });
Тут кеширование this экономит пару запросов к ДОМ. Плюс более быстрое прослушивание

Все вместе:
Code: Select all
jQuery(function($) {
      var $token
      $token = $('#rate-data').data('token')
      if ($token == '') return

   var runThis = function (element) {
      var action = element.hasClass('rate-minus') ? 'minus' : 'plus';
      var post_id = element.closest('.thread-row').data('id');
      var $box = element.parent();
      // $('.rate-value', $box).wrapInner('<span class="inline-preloader"></span>');
      $.getJSON('ajax.php', {'module': 'rating', 'action': action, 'post_id': post_id, 'token': $token})
      .done(function(data) {
         if (data.status != 'ok') return;

         var html = '';
         html += '<span class="rate-';
         html += (data.user_rate < 0) ? 'minus-voted' : (data.user_can_minus ? 'minus' : 'no-minus');
         html += '"></span><span class="rate-value rate-';
         html += (data.post_rating > 0) ? 'positive' : ((data.post_rating < 0) ? 'negative' : 'zero');
         html += '" title="+' + data.post_rating_positive + ' −' + data.post_rating_negative + '">';
         html += (data.post_rating_positive != 0 || data.post_rating_negative != 0) ? data.post_rating : '−';
         html += '</span><span class="rate-';
         html += (data.user_rate > 0) ? 'plus-voted' : (data.user_can_plus ? 'plus' : 'no-plus');
         html += '"></span>';
         $box.html(html);

      })
      .fail(function()
      {
         $('.rate-value', $box).text($('.rate-value span', $box).text());
      });
   }
   
   $(document).on('click', '.rate-minus, .rate-plus', function(e) {
      e.preventDefault()
      $this = $(this)
      runThis($this)
   });
});

Из легких плюсов:
+ файл шаблона становится легче
+ немного выигрываем в производительности
+ при включенном рейтинге скрипт перестает таскаться с каждой страницей, располагаясь в кеше

Очивидные минусы при отключенном коде:
- При каждой загрузке странице скрипт будет жрать немного памяти и совершать один запрос для проверки тоукена

В теории есть другое направление. Собирать скрипты исходя из настроек и загружать только нужное, либо вынести скрипт в отдельный файл и подгружать по требованию. В обоих случаях цена такой загрузки (читать как цена ресурсов) будет велика (сборка компилятором, исполнение загрузчика, дополнительные запросы к серверу)
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Topic author, Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 7 months

Return to Мастерская