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

Экранирование русских символов

В js-файлах русские символы, да и любые другие символы с кодом больше 127, внутри строк нужно обязательно экранировать, если кодировка файла не совпадает с кодировкой страницы. Конечно, в таких случаях можно явно указывать требуемую кодировку

<script src="my-cool-app.js" charset="windows-1251">

Если заранее экранировать такие символы, то в дальнейшем уже будет неважно в какой кодировке «сервируется» ваш файл.

Mathias Bynens описал различные варианты экранирования и даже сделал утилиту, которая может экранировать так, чтобы результирующая строка была наименьшей длинны.

Я расскажу очень быстрый способ получить экранированную строку прямо в консоли браузера.

escape("Привет").replace(/%(u[0-9a-f]{4})/ig, "\\$1")

В результате получим экранированную строку:

"\u041F\u0440\u0438\u0432\u0435\u0442"

У этого метода есть один недостаток: символы с кодом меньше 128 нужно обрабатывать отдельным регэкспом.


escape("Hello!").replace(/%([0-9a-f]{2})/ig, "\\x$1")
Комментарии к заметке: 2

Изменение регистра букв в названиях файлов в Git

При работе с Git в Windows есть неприятная проблема: если в имени файла неправильно были указаны заглавные и строчные буквы, то после простого переименования файла git status не покажет изменений. Это связано с тем, что ни FAT32, ни NTFS не учитывает регистр букв.

Если такая ситуация всё же возникла, то переименовать файл можно средствами Git:

git mv filename.txt FileName.txt –f

Ключ -f как раз нужен для того, чтобы принудительно внести изменения, так как с точки зрения файловой системы эти имена эквивалентны.

Обновление

Выходит, что разработчики, пользующиеся OS X, так же могут столкнуться с аналогичной ситуацией.

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

Подключение Яндекс.Карт после загрузки страницы

В API Яндекс.Карт есть метод ready , который выполняет указанную функцию после полной загрузки всех требуемых модулей. Однако он стабильно работает только когда карты подключаются на страницу в теге head или по крайней мере до события DOMContentLoaded. Если карту попытаться загрузить гораздо позже, то метод может и не выполниться (обсуждение этого дефекта в клубе и ещё другое обсуждение этого же вопроса). Гарантировано получить уведомление о готовности API для работы можно другим способом.

У загрузчика карт есть недокументированный параметр onload, в котором можно указать имя функции. Эта функция как раз будет вызвана, когда будут загружены все требуемые модули карты.


function loadYandexMaps(callback) {
    var callbackName = "_myapp_map_init",
        loaderUrl = "http://api-maps.yandex.ru/2.0/?" +
            "load=package.standard&" +
            "lang=ru-RU&" +
            "onload=" + encodeURIComponent(callbackName); 
    if (!window['ymaps']) {
        window[callbackName] = function () {
            callback();
            window[callbackName] = null;
        };
        yepnope.injectJs(loaderUrl);
    } else {
        callback();
    }
}

Загрузчик карт добавляется на страницу с помощью yepnope.js только тогда, когда он реально потребуется на странице.

Функции, которая добавляется в параметры загрузчика, должна быть доступна глобально. Т.е. использовать что-то вроде App.Maps.init уже не получится. С другой стороны, название этой функции не должно меняться, чтобы запросы могли быть закешированы браузером. Поэтому к выбору этого названия стоит подойти с особой тщательностью.

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

Особенности @param в JsDoc

В комментариях я использую разметку JsDoc. Есть утилиты, которые автоматически строят документацию, основываясь на этой разметке. Ещё она польза заключается в том, что статические анализаторы в IDE умею проверять использование прокомментированных функций.

С перечнем аннотаций , их параметрами и примерами использования можно ознакомиться, например, в документации к генератору jsdoc-toolkit.

Самой популярной, пожалуй, аннотацией является @param.


@param {paramType} paramName paramDescription
  • paramType — опциональный: ожидаемый тип параметра;
  • paramName — обязательный: название параметра;
  • paramDescription — опциональный: описание параметра.

В JS нет строгой типизации параметров функции. В одном случае, например, тип параметра может быть числом, а в другом — строка. Все ожидаемые типы перечисляются с разделителем | .

/**
 * @param {Number|String} value
 */
function showValue(value) {
    alert(value);
}

А ещё параметры функции могут быть опциональными. В этом случае название параметра заключаются в квадратные скобки.


var uidx = 1;
/**
 * Generate an id that is unique among the application
 * @param {String} [prefix] optional guid prefix
 */
function guid(prefix) {
    return (prefix || 'app') + '-' + uidx++;
}

Теперь статический анализатор не будет требовать, чтобы функция guid обязательно вызывалась с параметром. Но покажет предупреждение, если будет указано больше одного параметра.

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

Равномерное выравнивание блоков по ширине

Подсказали шикарную статью про «равномерное выравнивание блоков по ширине». Решение работает с произвольным количеством блоков различных габаритов даже в самых старых, но всё ещё популярных, браузерах.

За базу берётся обычный список, построенный на элементах ul и li. Всем элементам списка назначается display: inline-block, а сам список получает стиль text-align: justify . А дальше идут мелочи и тонкости, которые в итоге и заставляют все блоки равномерно разместиться в контейнере, даже если они сами имеют разную ширину.

Равномерное выравнивание блоков по ширине

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