19 сентября 2009, 11:15

Javascript: minijQuery 0.0.0.1 alpha :D

Есть много проектов, где функционал Джиквери слишком излишен, и используется от сили 1% возможностей? Зачем тогда тянуть 55кб? Если тот проект вместе с графикой в два раза меньше ;)

Недолго подумав, решил начать писать нечто кастомное. Название всплыло само собой minijQuery. Сразу скажу, для работы использует $ и addLoadEvent, что бы сразу было кроссбраузерно и красиво ;)
minijQuery = function(pattern, action) {
	// пустой патерн, уходим, возможно скоро закоментируется
	if (typeof pattern != "string" || pattern.length < 1) return;
	// объявляем дефолтный выбор
		var _target = document.body; // контейнер всё боди
		var _select = "*"; // выбераем все теги
		var _class = false; // класс
	// разбиваем на части запросик
	var selector = pattern.split(" ");
	var parts = selector.length;
	// дальше по сценарию
	switch (parts){
		case 1: //если всего один, подразумеваем тег.класс
			var sel = selector[0].split("."); 
			_select = sel[0]; 
			_class = sel[1];
			break;
		default: // если больше, значит есть ещё и #контейнер
			var sel = selector[0].split("#");
			_target = $(sel[1]);
			var sel = selector[1].split(".");
			_select = sel[0]; 
			_class = sel[1];
	}
	// дальше просто перебераем в контейнере, все нужные тэги
	var tag_s = _target.getElementsByTagName(_select);
	for(var i=0; i < tag_s.length; i++) {
		if (tag_s[i].className == _class || !_class) {
			// совпал класс, или не задан выполняем действие
			// пока только элементарные
			// скоро они преврятятся в методы 
			switch (action) {
				case "hide": tag_s[i].style.display = 'none'; break;
				case "show": tag_s[i].style.display = 'inline'; break;
				case "toggle": 
					var _display = tag_s[i].style.display;
					tag_s[i].style.display = 
						_display != 'none' || _display.length < 1
						 ? 'none' : 'inline'; 
					break;
			}
		}
	}
	// возвращаем список выбраных элементов
	return tag_s;
}
Попробовать пример можно слева, на тэгах, посмотреть отдельно, будет ссылка ниже.

Ограничения (поддерживает только двухуровневый запрос):
  • .класс
  • тэг.класс
  • #конетйнер .класс
  • #конетйнер тэг.класс
  • #конетйнер тэг
  • всё остальное идёт боком ;)
В планах:
  • добавить простейшую рекурсию, для более вложенных запросов;
  • расширить функционал изменением стилей;
  • добавить методы / выкинуть второй параметр;


CSS: Highlight table cell and row       Ctrl       Javascript nl2br

3 комментария РСС

SMiGL
А зачем этот огород, функционала которого может не хватить после добавления новых фич на сайт? Производительность тоже учесть нужно, думаю ты не проводил сравнительную характеристику с jquery?!

Не лучше ли добавить ссылку на всех разрабатываемых сайтах на http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js расположенном на googlecode.com + кеширование на клиенте спасет от ненужных растрат.
Vitaliy Bogdanets
Серёга, ну ты любитель зачесать %)))
Ну дальше как всегда по пунктам:
  • getElementsByTagName работает везде одинаково, и в jquery он тоже используется ;)
  • огород что бы избавится от лишних 54к кода
  • расширение функционала очень редко происходит, и в дальнейших версиях, добавление новых фич в minijQuery будет происходить легко ;)
  • о googlecode.com, это скорее выход для больших проектов, и сам гугл не везде так быстро будет отдаваться как ты думаешь ;) + бывают ограничения на количество доменов, во время оптимизации ;) такое
SMiGL
tag_s.length — вынеси отдельно из цикла.
о googlecode.com, это скорее выход для больших проектов, и сам гугл не везде так быстро будет отдаваться как ты думаешь ;) + бывают ограничения на количество доменов, во время оптимизации ;) такое
Можно воспользоваться решением Microsoft AJAX CDN Описание, будет отдавать быстрее :)
Vitaliy Bogdanets
Да, уже вынес ;)
альфа версия, всё такое ;) Пытаюсь сделать методы, по принципу оригинала (джиКвери), никак не выходит. 4й день борьбы. Где-то как-то через замыкание работает ;)

По поводу CDN, почему обязательно микрасофт? Есть другие быстрые CDN. И наверное их веб-продукты начну использовать, тогда когда их сайт начнёт быстро загружатся ;)))
SMiGL
Microsoft AJAX CDN как пример :)

Ваш комментарий

адрес не будет опубликован

ХТМЛ не работает


Ctrl + Enter