Рубрика: JavaScript

Верстка на атрибутах элементов и ИЕ11

CSS предоставляет нам возможность использовать не только классы, элементы и ID, но и атрибуты. При этом у атрибута может быть свое значение. И по этому значению мы можем применять к элементам разное оформление. На нынешнем проекте я попробовал использовать такой подход. Для разметки на flexbox я создал в стилях вот такие конструкции:

[layout] {
  display: flex;
}
[layout="column"] {
  flex-direction: column:
}

И так далее и тому подобное для использования возможностей flexbox.
А потом решил посмотреть на всё в Internet Explorer 11.
Сказать, что ничего не работало, не могу. Но все работало настолько удручающе медленно, что пользоваться интерфейсом было почти совершенно невозможно.
Немного технических деталей о проекте.
Это SPA на Angular 1x. Идет медленная миграция на React. Для стилей изначально использовали SASS, сейчас переписываем на PostCSS. Графические ресурсы в виде SVG.
Когда ИЕ11 начал подтупливать, я списывал это на большое количество JS и медленность Angular. Но когда простейший hover эффект стал отрабатывать с задержкой в секунду и более я таки решил посмотреть на вкладку Производительность, что встроена в отладчик ИЕ11.
К своему большому огорчению увидел, что основное время ИЕ11 тратит на расчёт и перерасчёт стилей :( На каждый элемент разметки, а их на странице очень много (списки, таблицы etc), ИЕ тратил от 2 до 4 десятых секунды!!!
И я стал искать.
И интернет подсказал, что проблема может крыться в использовании атрибутов для написания стилей.
В одной из статей на подобную проблему автор привел и пример своего решения. У них тоже в продукте использовался Ангуляр, и чтобы не перелопачивать кучу шаблонов для удаления атрибутов и замены их аналогичными по содержанию классами, автор написал несколько директив, которые просто добавляли классы элементам, у которых были атрибуты.
HTML

<div layout></div>

JS

module.exports = ['layout', /* @ngInject */ () => {
    return {
        restrict: 'A',
        controller: /* @ngInject */ ($element,$attrs) => {
            if($attrs.layout === 'column') {
                $element.addClass('layout-column');
            } else {
                $element.addClass('layout');
            }
        }
    }
}];

И вот такая замена стилей на атрибутах на обычную верстку на классах снизила нагрузку на расчет стилей почти на порядок: теперь для расчет стилей уходило от 1/100 до 1/10 секунды на элемент. 1/10 это тоже немало, но таких элементов немного и это обычно неизвестные ИЕ11 теги, которые неизбежны, когда продукт построен на ангулярных компонентах. Вот таких например:

<grid-item ng-repeat="file in files"></grid-item>

В общем и целом вывод таков: пока жив ??Е, не стоит отказываться от рекомендаций по производительной верстке. ??спользовать классы и не использовать атрибуты и элементы, особенно со многими вложенностями.
А я пока продолжу искать узкие места в своей верстке, чтобы окончательно привести ИЕ 11 в чувство.

Коды служебных клавиш в виде JSON

Чисто для справки: 


{
    ignoreKeys: {
        8: 'backspace'
        , 9: 'tab'
        , 13: 'enter'
        , 16: 'shift'
        , 17: 'control'
        , 18: 'alt'
        , 27: 'esc'
        , 33: 'page up'
        , 34: 'page down'
        , 35: 'end'
        , 36: 'home'
        , 37: 'left'
        , 38: 'up'
        , 39: 'right'
        , 40: 'down'
        , 45: 'insert'
        , 46: 'delete'
        , 116: 'f5'
        , 123: 'f12'
        , 224: 'command'
    }
}

Первый postcss плагин.

В продолжение темы postcss. Если коротко, то я в восторге!
Второй день работы с postcss, и я уже пишу себе плагинчик, для перевода пикселей в EM’ы. Да, вы скажете, что уже есть такое, но дело в том, что в наследие от работы с SASS в стилях осталось много мест с вызовом SASS-функции em($font-size, $context). �? чтобы не менять пока, на время миграции, этот подход, набросал плагинчик, повторяющий подобное поведение.
Не хватает пока, разве что, указания точности в настройках (precision). Чтобы уменьшить количество знаков после запятой.

Темы в angular material

Немного экзотичный кейс. В проекте использован angular material и, частично, его механизм темизации интерфейса. Есть несколько приложений, использующих общие стили. Часть стилей переопределяет стили из матириала. В одном из приложений имя темы указывается явно на все приложение, а другом не используются вообще, а применяются кастомные стили. Это дано.
Что надо? Чтобы в случае, если для приложения явно указана тема, отличная по оформлению от кастомных стилей, использовались кастомные стили, а не стили темы.
В angular material есть механизм указания темы для отдельных элементов библиотеки через атрибут md-theme. Так вот, если вам на каком-то элементе не нужно, чтобы использовалась тема приложения или даже дефолтная тема, оставьте значение этого атрибута пустым. �? пишите кастомные стили, какие вам нужны.

<md-radio-group ng-model="model" md-theme="">
  <md-radio-button ng-repeat="setting in settings" 
                      ng-value="setting.value"
                      class="app-color">
    <span ng-bind="setting.title"></span>
  </md-radio-button>
</md-radio-group>

И снова о внимательности и аккуратности

В очередном проекте необходимо было использовать кросс-доменный аякс. Конечно, воспользовался решением предлагаемым библиотекой jQuery.

Написал всё честь по чести, два почти одинаковых запроса, на один и то же домен, проверяю. Первый запрос проходи на ура, второй выдает ошибку:


XMLHttpRequest cannot load http://domain-name.example/test?params. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://test.local' is therefore not allowed access.

А вот приблизительный вид запросов:

$.ajax({
    url : 'http://domain-name.example/test?params',
    dataType : 'jsonp',
    jsonp : 'callbackFuncName',
});

и

$.ajax({
    url : ' http://domain-name.example/test?params2',
    dataType : 'jsonp',
    jsonp : 'callbackFunc2Name',
});

И вот второй вызов и давал ошибку.

Если внимательно посмотреть, то видно, что вся разница в вызовах — это пробел в значении url перед http.

Не знаю ж откуда он там взялся, это пробел. Но мне он стоил нескольких часов гугления и экспериментов. Узнал за это время что-то новое для себя по ajax, jsonp etc.

Когда заметил пробел и убрал его, то всё замечательно заработало!

Так что вот. Очередной призыв быть внимательным и аккуратным со своим кодом :)

P.S. А вообще удивительно, хотя я могу не охватывать все варианты, но почему в строке url не вырезается на уровене библиотеки jQuery пробел в начале строки.

Незнание закона не освобождает от ответственности, или почему надо читать документацию jQuery… �? не только :)

Мелочь, но отняла время: оказывается, читать доки по jQuery полезно :)
Задача простая: если длина значения в текстовом поле меньше некой величины, то кнопка остаётся неактивной, то есть disabled. Действовал по доступной мне логике:


if( length >= someValue ) {
    btn.removeProp( 'disabled' );
} else {
    btn.prop( 'disabled' , true );
}

�? вот если первое условие отрабатывало, то второе, то есть при удалении символов из поля, когда длина значения становилась меньше someValue, нет! �? кнопка оставалась «включённой». Потыкался, потыкался, полез в гугл, первая же ссылка, весьма давняя, дала ответ с отсылкой на документацию.
А там оказывается написано:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

То есть метод removeProp() полностью удаляет такое свойство, и добавить его методом prop() не представляется возможным. Всё просто и очевидно.
�? вышеприведенный код должен быть таким:


if( length >= someValue ) {
    btn.prop( 'disabled', false);
} else {
    btn.prop( 'disabled', true );
}

Надо чаще читать доки!

Маскирование данных

В заголовке написал «маскирование», но точнее будет «форматирование данных по заданной маске». Это бывает удобно использовать для форматирования того, что вводит в форму пользователь, например, номера телефона. Скажем, посетитель вводит подряд цифры своего номера, например, +79041234567 а мы на лету преобразуем этот номер в более удобный для восприятия и привычный формат +7 (904) 123-45-67. По службе возникла необходимость отформатировать данные, вводимые пользователями, в частности, номер кредитной карты и телефон. Поначалу стал писать свой велосипед, но к счастью наткнулся на весьма и весьма годный jquery-плагин для маскирования данных, коим и не преминул воспользоваться! Если у вас есть необходимость в форматировании данных по маске, то, думаю, jQuery-Mask-Plugin легко решит эту задачу. На сайте хороший набор примеров и краткая, но вполне исчерпывающая документация.
�? простой пример с форматированием номера кредитной карты:
Читать далее Маскирование данных

Origin null is not allowed by Access-Control-Allow-Origin

Если вы пользователь брузера Chrome, то при попытке протестировать ajax на локальной машине, не разворачивая сервер, у вас ничего не получится. В консоли браузера вы можете увидеть подобную ошибку:


Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. 
XMLHttpRequest cannot load file:///C:/some-file. Origin null is not allowed by Access-Control-Allow-Origin.

Для решения проблемы есть два пути. Всё-таки развернуть сервер локально, хоть тот же denwer, или же запускать Chrome со следующим параметром:


--allow-file-access-from-files

Для добавления этого параметра к запуску сделайте так:

  1. кликните по иконке Chrome правой кнопкой мыши
  2. выберите пункт Свойства
  3. во всплывшем окне в закладке Ярлык в поле Объект к строке запуска Chrome, например, C:\Users\user-name\AppData\Local\Google\Chrome\Application добавьте вышеприведенную строчку ‐‐allow-file-access-from-files. В итоге должно получиться C:\Users\user-name\AppData\Local\Google\Chrome\Application ‐‐allow-file-access-from-files
  4. перезапустите браузер

Теперь можно спокойно проверять свои ajax-запросы на локальных файлах.
�?сточник знания. Очень помогло. Долго тупил, почему не работает. Вроде всё правильно написано, но ничего не происходит!

Комментарии в JSON

Плохо не знать теории. Взялся за работу с JSON. Передаются на клиент данные в виде JSON, на клиенте шаблонизируем с помощью handlebars, всё красиво вроде. Тестовый объект с данными был написан в теле HTML страницы. Всё работало.
Перенёс код копипастом в отдельный файл .json, стучусь к нему аяксом, запрос проходит, но ничего не происходит. Смотрю в ответ, а там parsererror. Ничего не понимаю. Удаляю всё, создаю простенький тестовый json-файл.


{
    "test" : "value"
}

Всё работает.
А вся разница между тестовым и рабочим JSON’ом, что в в тестовом нет комментариев. В рабочем я закомментировал лишнее. Стоило убрать комментарии и всё заработало. Буду знать.

Поле формы с именем submit

Для именования полей в форме не стоит использовать имена (или ID), совпадающие с методами объекта формы. То есть reset и submit. Это важно, если вам необходимо отправлять форму с помощью javascript.
При попытке отправить форму методом submit() вы увидите в консоли:

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

Коротко дело здесь в следующем. Когда вы «стучитесь» к методу формы submit() привычным способом (вариант для jQuery), как-то так:

<form id="testForm">
    <input name='submit'/>
    <input type='submit' id='testButton' value="test"/>
</form>

<script>
    var form = document.getElementById('testForm'),
        button = document.getElementById('testButton');
    form.onsubmit = function(){
        return false;
        //отключаем обычный сабмит, чтобы отправить форму
        //с помощью javascript
}
    button.onclick = function(){
    form.submit();
}
</script>


— вы получите ошибку на строчке form.submit(). Почему?

Когда вы пытаетесь отправить форму командой form.submit(), вы пытаетесь обратиться к методу формы по имени submit. Но на деле обращаетесь к элементу по имени submit. О чём вам и сообщает консоль, что HTMLFormElement submit не является функцией!
Столкнулся с этим буквально на днях, хотя такое поведение форм уже обсуждалось.

Простое резюме: не стоит использовать в форме поля с именем submit. Да и reset тоже, потому как получите аналогичную ошибку.