Заметки за 2014 год (страница 3)

Однократный вызов функции с таймаутом

Бывает нужно подписаться на какое-то событие, но нет уверенности, что оно вообще может наступить. Можно условиться о неком интервале, в течение которого мы ожидаем это событие.


/**
 * @param {Function} fn function which needs to be called only once
 * @param {Number} timeout for external call
 * @param {Object} [context]
 * @returns {Function}
 */
function withTimeout(fn, timeout, context) {
  var timerId, state = true;

  function cb() {
    if (timerId) {
      clearTimeout(timerId);
      timerId = null;
    }
    if (state) {
      state = false;
      fn.apply(context || window, arguments);
    }
  }

  timerId = setTimeout(cb, timeout);

  return cb;
}

С использованием промисов код получился бы чуть короче, но потребовал бы внешнюю зависимость в виде jQuery или другой библиотеки, реализующей промисы.

Комментарии к заметке: 1

Вызов функции «чуть позже»

Мы уже привыкли пользоваться setTimeout(fn, 0) , чтобы запланировать вызов некой функции и продолжить выполнение текущего кода. Мы ожидаем, что запланированный вызов произойдёт максимально быстро на сколько это возможно. Однако у всех JavaScript движков есть ограничение — 4 миллисекунды. Побороть это ограничение можно, если пользоваться requestAnimationFrame или setImmediate.


/**
 * Runs the callback at the next available opportunity.
 * @see https://developer.mozilla.org/en-US/docs/Web/API/window.setImmediate
 */
var setImmediate = function(callback) {
  return (
    window.setImmediate ||
    window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.setTimeout
  )(callback, 0);
};

/**
 * Clears a callback previously registered with `setImmediate`.
 * @param {id} id The identifier of the callback to abort
 */
var clearImmediate = function(id) {
  return (window.clearImmediate ||
    window.cancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.clearTimeout)(id);
};

Метод setImmediate объекта window был реализован в IE10 и Node.js 10+, но встретил сопротивление со стороны разработчиков Firefox и WebKit из-за неясности спецификации.

Комментарии к заметке: 4

Доступность SVG-пиктограмм

Когда вы используете inline-SVG без текстового пояснения (например, как пиктограмму на кнопке), то неплохо было бы снабдить это изображение заголовком. В SVG-документе есть описательные теги: <title>, <desc>, <metadata>. Для наших целей хорошо подходит тег <title>.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Document title</title>
</head>
<body>
  <p>This is a test page</p>

  <button>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="32" height="32">
      <title>Next page</title>
      <polygon points="15,7 11,11 20,20 11,29 15,33 28,20"/>
    </svg>
  </button>

  <p>Actually, there is no next page here.</p>

</body>
</html>

Содержимое <title> не отображается, но может использоваться вспомогательными технологиями.

Содержимое <title> не отображается, но может использоваться вспомогательными технологиями

Более того, каждый графический элемент может иметь собственный заголовок.

Таким образом, нарушая все запреты о наличии только одного тега <title> на странице, мы получили абсолютно валидный документ с несколькими тегами.

На странице с валидной разметкой могут присутстовать несколько тегов <title>

Комментарии к заметке: 4

Преобразователь кода символа

В HTML, CSS и JavaScript для представления кода символа используются совершенно разные способы:

  • в HTML чаще всего используется код символа в десятичной системе исчисления, записанный как HTML-сущность (например, &#8212;);
  • в CSS используется код в шестнадцатеричной системе исчисления, которому предшествует символ \ (например, \2014);
  • в JS внутри строк используется код в шестнадцатеричной система исчисления, записанный как Unicode-символ (например, \u2014).

Для определения нужного значения я использую Entity Conversion Calculator . Он конвертирует HTML-сущность в код для CSS и JS. Так же с его помощью можно получить код известного символа во всех форматах.

Комментарии к заметке: 3

Редирект на другой URL с помощью mod_alias

В HTTP-сервере Apache для редиректов в основном используется mod_rewrite. Без сомнения, это очень мощный инструмент. Для редиректа с одного адреса на другой я чаще всего применяю mod_alias.

Для редиректа используется директива Redirect или RedirectMatch.

Первым опциональным аргументом идёт HTTP-статус код. Если он не задан явно, то считается равным 302 (временный редирекс). Вместо цифровых кодов можно применять ключевые слова: permanent (301), temp (302), seeother (303), gone (410). Технически, в качестве кода статуса можно использовать любое допустимое значение.

Redirect permanent /one /two

Следующими параметрам идут старый путь и новый адрес. Новый адрес может быть как в пределах текущего домена, так и полным URL включая протокол.


Redirect /path/file.txt /assets/data/file.txt
Redirect 301 /report-2013.pdf http://example.com/reports/2013/report.pdf

Итак, директивы mod_alias выглядят гораздо проще и понятнее по сравнению с аналогами в mod_rewrite и прекрасно подходят для простых редиректов.

Оставте свой комментарий