Сегодня ночью закончил написание своего лесапеда типа jQuery. Как и обещал, первым делом выкладываю сюда. Прошу посмотреть, оценить, раскритиковать, дать советы/пожелания. Вобщем все как мы любим
Убил на написание сего 20 дней, с перерывом в два дня на НГ.
В начале несколько слов о том,
что это вобще такое и зачем я это писал. Ну сразу скажу, что библиотека по типу всем известного и любимого jQuery. Но! Во-первых она в 8 раз меньше jQ, по скорости работы примерно в 2 раза быстрее (пока это еще не совсем так, но все же быстрее jQ).
Зачем я ее писал? Давно была задумка написать свою библиотечку, с самыми используемыми мною функциями. Ведь каждый раз грузить 100кБ как-то не интересно, учитывая, что многое из этого не используется. Ну и конечно практика, она никогда не будет лишней. Писалась она по принципу "ничего лишнего", все самое необходимое и чаще всего используемое.
Итак,
что она умеет, как с ней работать.
Работаем по аналогии с jQ:
CODE (
javascript):
скопировать код в буфер обмена
// jQuery
$('selector').method();
jQuery('selector').method();
// SCQ
$$('selector').method();
SCQ('selector').method();
Ничего лучше $$ я придумать не смог
В качестве селектора - строка CSS3, можно передать и DOM элемент, и набор элементов, и работать уже с ними. Так же можно передать ф-цию, она будет вызвана по завершению построения DOM. Тут все по аналогии с jQ.
Работа с DOM, методы: children, parent, parents, find, next, nextAll, prev, prevAll, el. Вобщем тоже все по аналогии с jQ, также можно передать селектор и отфильтровать элементы.
Метод each применяет переданную функцию к каждому элементу объекта.
Для работы с css есть метод addCSS.
Для классов: addClass, removeClass, hasClass, toggleClass.
Анимация и эффекты: show, hide, slideUp, slideDown и animate.
animate должна работать со всеми числовыми свойствами, но тестировалась только для: width, height, opacity, top, left, right, bottom.
Навешивание событий - метод event(). Естественно есть поддержка "живых" событий. Для click есть отдельная обертка, т.к. его я использую чаще всего.
Ну и естественно $$.ajax()
Прикрепил файлик с описанием всех доступных методов, их параметрами, документация вобщем.
Теперь несколько слов
о поддержке браузерами.
Проверялось: Opera 12, FireFox 17, Chrome 23, IE9, Yandex 1.1, Safari 4 и IE8, но с ограничением в виде потдержки только CSS2.1 селекторов. Т.е. в ослике 8 при попытке выбрать элементы по псевдоклассу, будет возврщен "пустой" объект.
О скорости.
Сделал страничку с грaфиками, сравнивающими скорость работы моей либы с jQ -
http://94[dot]240[dot]175[dot]28:2013/ Для тестов была украдена главная страница этого форума
В двух словах: при выборе всех элементов на странице, либо выборе по id, классу, либо тегу скорость примерно на 10 - 15% выше jQ. Видимо это из-за использования множества обверток в jQ. На более сложных селекторах "заторможенность" jQ становится еще более заметна. Селекторы примерно такие:
На последнем селекторе моя библиотека в IE8 ествественно ничего не "нашла". jQ же здесь работает. Но как работает, это нечто. Выбор элементов в jQ по последнему запросу, при цикле в 5000 занимает более 70 секунд!
Т.е. скорость просто черепашья...
Что касается навешивания событий (в данном случае обычных, не "живых"), то я был крайне удивлен
Мой код обгоняет jQ в среднем в 10 раз! Аж стало интересно разковырять jQ и посмотреть в подробностях, что он там такое делает, что так тупит.
При навешивании "живых" событий я так же впереди jQ, но на столько шокирован не был.
Единственное, вылез один мой баг. При навешивании "живого" события в Safari, оно отрабатывает за 10+ секунд и здорово подвешивает браузер
Вобщем буду это исправлять, а пока результаты из Safari в данном тесте не участвовали.
Что касается CSS, то тут вобщем все на равне с jQ, нет ничего интересного. График не делал по данному тесту.
А вот с работой с классами просто беда. При количестве элементов в 10 - 20 штук, все нормально. Но как только в наборе больше 100 элементов, все начинает жутко тормозить. Вобщем эта часть будет переделана и исправлена.
Скорость анимации не тестировал, ну в принципе тоже можно сделать тесты именно на вызов и отрисовку первого "кадра".
Вобщем смотрите графики, они нагляднее.
Кстате по результатам тестов сделал вывод, что самый быстрый браузер в плане js - это опера, ну, а самый тугой - ослик 8.
Файлы прикрепил. Не смог прикрепить несколько, поэтому запаковал их в архив.
з.ы. извините за длинный текст.
