войти зарегистрироваться

Персональные блоги Yass + jQuery

В первом хабратопике хотелось бы поблагодарить хабраюзера sunnybear (все же знают, что он разработчик yass?) за оказанное доверие и хабраинвайт за одну строку кода :)

Как подружить 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-селектора, соответствующую спецификации, получить на выходе массив из всех элементов, соответствующих этой самой строке. Вроде пока все просто.

В качестве иллюстрации спецификации можно привести следующие примеры:

//вернет элемент с идентификатором my_id
querySelectorAll('#my_id')
//вернет все элементы с классом external
querySelectorAll('.external')
//вернет все абзацы на странице
querySelectorAll('p')


Однако уже тут можно отметить один момент: очень часто нам нужно выбрать просто элемент по его идентификатору или найти все элементы с определенным классом. Эти операции встречаются достаточно часто во всех Javascript-библиотеках, поэтому они должны выполняться максимально быстро. Запускать весь механизм анализа входной строки селектора просто в том случае, когда нам нужно вернуть один-единственный элемент, заданный с помощью идентификатора, крайне неосмотрительно. Здесь мы можем воспользоваться принципом ленивого программирования: «не делай того, чего можно не делать», — и достаточно сильно ускорить работу для простейших случаев.

JavaScriptСтыкуем компоненты в JavaScript

После заметки Стыкуем асинхронные скрипты и предложенного решения от Steve Souders я подумал о модульной загрузке какого-то сложного Javascript-приложения. И понял, что предложенный подход в таком случае будет довольно громоздким: нам нужно будет в конец каждого модуля вставлять загрузчик следующих модулей. А если нам на разных страницах требуются различные наборы модулей и разная логика их загрузки? Тупик?

Ан нет. Не зря 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

Спасибо всем.

Честно, не ожидал настолько позитивного отклика (некоторые даже кинулись внедрять библиотеку в свои проекты и всячески пропагандировать :). Для большей ясности поясню основные идеи:
  1. Это мини-ядро. Чтобы выбирать элементы DOM-дерева. На его основе (или дополнительно к нему) можно разрабатывать остальные модули. Но конкретно этот функционал дальше CSS-селекторов расширяться вряд ли будет. Идея ни разу не новая.
  2. Это самое быстрое мини-ядро. Каждая строчка тестируется и будет тестироваться на экстремальную производительность в большинстве случаев. Чтобы это можно было положить в основу большого проекта. Иначе все остальное не имеет смысла.
  3. Код открытый (MIT + GPL). Можно использовать где угодно (вроде даже без ссылок на авторство). Комментарии по улучшению приветствуются.