Расширяем функционал jQuery по работе со стилями

Работая с jQuery легкое неудобство доставляет применение большого количества свойств CSS правил к тегам. Решение этой задачи в большинстве случаев сводиться к повторению $.(“селектор”).css(“свойство”, “значение”);, что не есть хорошо, но несколько строк кода исправили ситуацию.
Каким образом? Читаем ниже.

43 строки — все расширение

Идея, положенная в основу – следующая:
С помощью регулярных выражений разбираем CSS файл на правила (getStyles), правила на свойство-значение (setStyle), и применяем к загруженному документу.
И, собственно, реализация.

$.fn.extend({
    setStyle : function (selector, rulesString) {
        var rules = (rulesString+';').match(/([^:]+)\:([^\;]*)\;/gi);
        for (var id in rules) {
            rules[id].replace(/[\s]*([^\s]+)[\s]*\:([^\;]*)\;/gi,
                function(rule, propery, value) {
                    $(selector).css(propery, value)
                })
        }
    },
    getStyles : function (styleRef){
        var styles = styleRef.replace(/\/\*(.|\s)*?\*\//gi, "", "$1").match(/[^\}]*\{([^\}]*)\}/gi);
        for (var id in styles) {
            styles[id].replace(/\s+/gi, " ", "$1").replace(/([^\{]*)\{([^\}]+)\}/gi,
                function (style, selector, rules){ 
                    $.fn.setStyle(selector, rules)
                });
        }
    },
    _css : function(styleRef) {
        if (/.*\.css/gi.test(styleRef)) {
            $.ajax({
                type: "GET",
                url: styleRef,
                success: function(retValue) {
                    $.fn.getStyles(retValue)
                },
                error: false
            })
        } else if (/[^\}]*\{([^\}]*)\}/gi.test(styleRef)) {
            $.fn.getStyles(styleRef)
        } else {
            $.fn.setStyle(this.selector, styleRef)
        }
        return true
    }
})

$.extend({
    _css: function(styleRef) {
        return $.fn._css(styleRef)
    }
})

Colored with dumpz.org
В сжатом виде файл весит 700 байт.

А что оно может?

А может оно следующее:

• Загружать стили из файла, например так $._css("../css/style.css");
• Применять к тегам стили, указанные по правилам CSS так $._css("div {color2: red; font-size: 16px;}");, или так $("p")._css("font-weight: bold; color: green;");
• И последняя, не очень явная возможность: использовать селекторы jQuery в CSS-файлах

Тестирование и результаты

Тестирование проводилось на наборе:

• Denwer
• Google Chrome 9.0.597...
• CMS PHP-Fusion v7.01.05
• Это самое расширение

Суть теста следующая: в теме выбранной CMS за стили отвечает один файл — style.css, его и грузим скриптом и без него, замеряя время с помощью инструментов разработчика Chrome. Работу скрипта замеряем посылом в консоль сообщений типа var currentDate = new Date(); console.log("Закончили обработку " + currentDate.getTime() + "ms");

По результатам нескольких измерений оценим скорость загрузки.
В картинке ниже слева данные по работе скрипта, справа хронометраж загрузки css без него. Колонки по порядку:

1. Скорость загрузки со страницы Network
2. Скорость замеренная по сообщениям консоли (почему-то выше, хотя замер производился перед и после GET запроса)
3. Скорость применения правил стилей к документу
4. Сумма

Разница по времени получилась равной 12%, что приблизительно = 10ms, так что можно сказать, что работа расширения не заметна, по крайней мере в Chrome.