Введение : когда я писал ф-ю анимирования, в классическом режиме (т.е. манипуляции с style элемента) мне потребовалась функция установки стилей. Т.е. эта функция - решение одной из подзадач анимирования. Функция получилась довольно неплохой (об этом ниже), и я решил выложить её на форум.
Плюсы :
- Очень быстрая (см. сравнение в блоке ссылок, в нижней части поста).
- Очень простая.
- Гибкая в использовании.
- Возможность ускорить самостоятельно (см. внизу).
- Расширяема, за счёт использования хуков.
Минусы :
- В IE < 9 не работает transform и другие CSS3 св-а, т.к. они там не поддерживается. К выходу версии 2 добавлю хуки для частоиспользуемых свойств. Сам хук для transform сейчас есть, но он сырой.
- Оперирует только с CSSStyleDeclaration (для этого и задумывалась). Поэтому получить значение высчитанного стиля сама не может. (если вы сами вычисленный стиль не передадите).
О скрипте:
Функция создает\заменяет существующее свойство css объекта window. Window.css является callable-object, т.е. вызывается, и содержит свойства.
Вызов функции происходит так :
var style = document.body.style;
css(style, { "font-size": "16px", "float": "right", "borderWidth": "20px" });
Он и является одним из самых быстрых способов установки стиля элементу.
Ещё можно так :
var style = ...;
css(style, "font-size", "16px");
css(style, "borderWidth": "20px");
но тогда стираются различия в производительности между этой функцией и другими.
Получение значений стиля :
просто пропустите третий аргумент и передайте второй как строку.
var style = ...;
css(style, "font-size"); // "16px"
css(style, "borderWidth"); // "20px"
Функция не оперирует с элементами. Она оперирует именно со свойством style - CSSStyleDeclaration.
Свойства window.css :
- attachHook( propName, action, func)
Добавит хук на свойство propName, на действие action.
Action может быть либо "get", либо "set" - на получение свойства, или на назначение свойства соответственно. Об установке хуков см. ниже.
- lowlevel ( style, property_name, property_value )
низкоуровневая функция для установки одного значения, или же для получения значения, если не передано значение свойства - value, или оно равно undefined. Используется в window.css. "Низкоуровней" не значит "лучше" - функция по скорости такая же, как и вариант от jQuery. Используйте window.css для большей скорости.
- normalize (css_property_name)
Попытается превратить CSS-свойство в свойство CSSStyleDeclaration. Подберёт префикс к свойству, если нужно.
Не работает со свойствами, содержащих в себе вендорный префикс (она сама его подберёт).
Есть возможность ускорить её работу (ниже)
Каждая функция по-умолчанию возвращает true в случае успеха, и false в случае неудачи (при получении значения свойства при удаче возвращается значение св-а).
Об установке хуков :
Хуки не удаляются, они только добавляются. Хук не добавляется для двух операций (get и set) за раз. Хук исполняется в тот момент, когда функция сама не может установить значение свойству, или получить значение свойства.
Когда хук исполняется, в него передаются следующие аргументы :
- Текущий CSSStyleDeclaration.
- Имя свойства.
- Значение свойства
- Объект кэша.
Объект кэша - обычный объект. Приватен, т.е. для каждого свойства имеется свой кэш.
Об ускорении css.normalize:
Дело в том, что функция кеширует результат работы в объекте. Если поместить одинаковые во всех браузерах свойства (вроде border-style), то функция не будет вычислять их, а просто будет сразу брать готовые значения оттуда. Эдакая "база данных", или "холодный кеш".
Кешем является локальная переменная normalized - обычный объект. Ключом в нём является CSS-свойство, а значением - свойство CSSStyleDeclaration.
Пример :
normalized = {
"border-style": "borderStyle"
}
Разумеется, не надо сохранять в нём свойства, типа "transform".
Можно сделать по-другому. В конце использования ф-и ставим точку останова на window.css, и вызываем её (css) без аргументов. Так мы получим доступ к локальным переменным.
Далее, в консоли пишем :
normalized.toSource()
*для этого нужно использовать dev-версию - исходник, или же найти имя normalized самому.
Далее, удаляем оттуда свойства с префиксами, заменяем старый normalized на полученный, и сжимаем её - ф-я почти одинаково жмётся в GCC в обоих режимах.
Реализовывать ли для этой мелочи отдельный метод, не уверен.
Возможно, позже добавлю уже готовый кеш.
Код с комментариями и его немного. К описанным функциям есть JSDoc.
Код функции нигде не публикуется, кроме форума. Я решил, что для Github она маловата.
И ещё, она будет включена в функцию анимирования. так что Вы её ещё увидите
.
Ссылки :
Итак, сам код
тут.
Сравнение сделал
тут. Включите консоль для отображения результатов. В FF мой способ быстрее стандартного на 70%.
