Персональные блоги → Yass + jQuery
В первом хабратопике хотелось бы поблагодарить хабраюзера sunnybear (все же знают, что он разработчик yass?) за оказанное доверие и хабраинвайт за одну строку кода :)
Как подружить Yass и jQuery?
Спасибо за внимание, ждём вас снова
зы: angry-web.blogspot.com/2009/03/yass-jquery.html оригинальный пост
зы2: традиция первых постов: testestest!!11
Как подружить Yass и jQuery?
<script type="text/javascript" src="http://yass.webo.in/yass.0.3.8.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
jQuery.noConflict();
var $ = function(.){return ('string'==typeof .)?jQuery(_(.)):jQuery(.);}; // <-- вот эта волшебная строка :))
</script>Спасибо за внимание, ждём вас снова
зы: angry-web.blogspot.com/2009/03/yass-jquery.html оригинальный пост
зы2: традиция первых постов: testestest!!11
JavaScript → Архитектура YASS. Часть 3: проблема выбора
Это третья статья из цикла, посвященного разбору практических методов, заложенных в основу YASS. Первая статья была про модульное построение, вторая — про логику выбора CSS-селектора и организацию циклов.
Начнем с наиболее очевидной составляющей любой логики: ветвления. В любом алгоритме встречается место, в котором нужно выбрать то или иное продолжение в зависимости от проверяемого условия. Давайте рассмотрим следующие примеры. В первом случае у нас три простых вложенных проверки:
Условное ветвление
Начнем с наиболее очевидной составляющей любой логики: ветвления. В любом алгоритме встречается место, в котором нужно выбрать то или иное продолжение в зависимости от проверяемого условия. Давайте рассмотрим следующие примеры. В первом случае у нас три простых вложенных проверки:
var a = 1,
b = 2,
c = 3;
if(a == 1) {
if (b == 2) {
if (c == 3) {
...
}
}
}JavaScript → Архитектура YASS. Часть 2: выборка по CSS-селектору
Статья о модульной загрузке была первой ласточкой в ряду заметок, в которых я собираюсь шаг за шагом рассказать, на каких принципах построена YASS, и каковы были результаты тестирования на максимальную производительность каждой части этой библиотеки. Но обо всем по порядку.
Насчет с самого простого: чего мы хотим добиться? Мы хотим, задав произвольную строку CSS-селектора, соответствующую спецификации, получить на выходе массив из всех элементов, соответствующих этой самой строке. Вроде пока все просто.
В качестве иллюстрации спецификации можно привести следующие примеры:
Однако уже тут можно отметить один момент: очень часто нам нужно выбрать просто элемент по его идентификатору или найти все элементы с определенным классом. Эти операции встречаются достаточно часто во всех Javascript-библиотеках, поэтому они должны выполняться максимально быстро. Запускать весь механизм анализа входной строки селектора просто в том случае, когда нам нужно вернуть один-единственный элемент, заданный с помощью идентификатора, крайне неосмотрительно. Здесь мы можем воспользоваться принципом ленивого программирования: «не делай того, чего можно не делать», — и достаточно сильно ускорить работу для простейших случаев.
Постановка задачи
Насчет с самого простого: чего мы хотим добиться? Мы хотим, задав произвольную строку CSS-селектора, соответствующую спецификации, получить на выходе массив из всех элементов, соответствующих этой самой строке. Вроде пока все просто.
В качестве иллюстрации спецификации можно привести следующие примеры:
//вернет элемент с идентификатором my_id
querySelectorAll('#my_id')
//вернет все элементы с классом external
querySelectorAll('.external')
//вернет все абзацы на странице
querySelectorAll('p')Однако уже тут можно отметить один момент: очень часто нам нужно выбрать просто элемент по его идентификатору или найти все элементы с определенным классом. Эти операции встречаются достаточно часто во всех Javascript-библиотеках, поэтому они должны выполняться максимально быстро. Запускать весь механизм анализа входной строки селектора просто в том случае, когда нам нужно вернуть один-единственный элемент, заданный с помощью идентификатора, крайне неосмотрительно. Здесь мы можем воспользоваться принципом ленивого программирования: «не делай того, чего можно не делать», — и достаточно сильно ускорить работу для простейших случаев.
JavaScript → Стыкуем компоненты в JavaScript
После заметки Стыкуем асинхронные скрипты и предложенного решения от Steve Souders я подумал о модульной загрузке какого-то сложного Javascript-приложения. И понял, что предложенный подход в таком случае будет довольно громоздким: нам нужно будет в конец каждого модуля вставлять загрузчик следующих модулей. А если нам на разных страницах требуются различные наборы модулей и разная логика их загрузки? Тупик?
Ан нет. Не зря Steve упоминает в самом начала своей заметки о событии
В качестве наиболее простого способа определить порядок загрузки модулей на конкретной странице можно предложить глобальный массив, содержащий в себе дерево зависимостей. Например, такой:
Ан нет. Не зря Steve упоминает в самом начала своей заметки о событии
onload / onreadystatechange для скриптов. Используя их, мы можем однозначно привязать некоторый код к окончанию загрузки конкретного модуля. Дело за малым: нам нужно определить этот самый код каким-либо образом.Решение первое: дерево загрузки
В качестве наиболее простого способа определить порядок загрузки модулей на конкретной странице можно предложить глобальный массив, содержащий в себе дерево зависимостей. Например, такой:
JavaScript → Версия 0.2.4: больше, лучше, быстрее
Много нового и просто хорошего:
- Поддержка части CSS2/3.
- Ускорение в 2 раза: быстрее последних Sizzle и Peppy.
- Размер кода (min.gz): 1066 байтов.
- Google Code SVN: code.google.com/p/yeasss/ .
- Дизайн для yass.webo.in/ .
JavaScript → Версия 0.1.6
Спасибо всем.
Честно, не ожидал настолько позитивного отклика (некоторые даже кинулись внедрять библиотеку в свои проекты и всячески пропагандировать :). Для большей ясности поясню основные идеи:
Честно, не ожидал настолько позитивного отклика (некоторые даже кинулись внедрять библиотеку в свои проекты и всячески пропагандировать :). Для большей ясности поясню основные идеи:
- Это мини-ядро. Чтобы выбирать элементы DOM-дерева. На его основе (или дополнительно к нему) можно разрабатывать остальные модули. Но конкретно этот функционал дальше CSS-селекторов расширяться вряд ли будет. Идея ни разу не новая.
- Это самое быстрое мини-ядро. Каждая строчка тестируется и будет тестироваться на экстремальную производительность в большинстве случаев. Чтобы это можно было положить в основу большого проекта. Иначе все остальное не имеет смысла.
- Код открытый (MIT + GPL). Можно использовать где угодно (вроде даже без ссылок на авторство). Комментарии по улучшению приветствуются.