TheShock Dec 10 2010 at 12:05

Nano — миниатюрный JavaScript фреймворк

3 min

6.1K

Привет, читатель. Есть много прекрасных и мощных JavaScript-фреймворков. JQuery, MooTools, ExtJS, и множество других. Они кроссбраузерны и громадны. И пользоваться ими — одно удовольствие.

Но иногда, бывает, хочется написать какой-нибудь небольшой скриптик на 5 килобайт и как-то совесть мучает подключать JQuery, который весит в сжатом виде 75 килобайт. И каждый раз начинаешь писать свой мини-фреймворк:

var dom = {
	id  : function (id)  { return document.getElementById(id); },
	tag : function (tag) { return document.getElementsByTagName(tag); },
};

Вроде бы, больше для начала и не надо. А потом вспоминаешь про createElement, легкий способ присвоить CSS, наследование, расширение прототип. И в общем каждый раз пишешь свой велосипед.
В этот раз я решил написать миниатюрный фреймворк, который можно было бы без зазрений совести подключать даже к самым маленьким проектам. В сжатом виде он весит всего 4 килобайта (в 20 раз меньше JQuery).
И в нём есть еще одно преимущество по сравнению со всеми современными фреймворками — полный отказ от устаревших браузеров, за счёт чего в эти 4 килобайта вместилася половина JQuery.

Итак, приветствуйте, JavaScript-фреймворк Nano

Читайте актуальную вторую часть!

Идея

На самом деле, у меня уже есть даже один проект на этом фреймворке, но я его покажу чуть позже)
Nano врядли пригодится для разработки на обычных сайтах в обычном режиме, но иногда этот фреймворк — выбор лучше, чем один из монстров JavaScript.

Он на полную силу пользуется возможностями JavaScript 1.8, которые поддерживаются только современными браузерами, например Firefox 3.5+. Да, даже в третьем Фоксе часть не заработает. Я надеюсь, что такой шаг принесет в фреймворк изюминку и расширит круг возможностей.

Где его можно использовать? Когда вы пишете какой-то тестовый скрипт, когда вы разрабатываете что-то для последних версий браузеров, например плагины или user-scripts и на серверсайде. Более того, текущая версия не сломает ничего даже если вы подключите её к существующему проекту.

Работа с DOM

При работе с DOM чувствует влияние JQuery):

nano();
nano('tag .class');
nano({ tag   : 'tag' });
nano({ id    : 'id' });
nano({ Class : 'class' });
nano(document.getElementsByTagName('tag'));
nano(selector, context);

nano(function () {
    // DOMContentLoaded
});
nano().ready(true, function () {
    // document.onload
});

Можно делать цепочки вызовов:

nano('tag .class')
	.css({
		'background' : 'red',
		'color' : 'blue'
	})
	.appendTo('body')
	.find('code')
	.destroy();
	
$('table').delegate('td', 'click', function (e) {
	nano(e.target).css({ background : 'green' });
});

Для css-селекторов я использую querySelectorAll, потому работать будет предельно быстро.

Создание класса

ООП из Мутулза оказало на меня незначительное влияние, но я постарался максимально его упростить и не уходить далеко от оригинального подхода в JavaScript. Никаких «кошерных» Class. Для расширения объекта используется два статичных метода: node.extend для расширения самого объекта и node.implement для расширения его прототипа. Фактически, это короткая запись достаточно привычного

ClassName.prototype.methodName = function () {}

var Color = nano.implements(function (r,g,b) {
	this.r = r;
	this.g = g;
	this.b = b;
}, {
	getLuminance : function () {
		return Math.round((this.r * 3 + this.g * 6 + this.b * 1) * 0.1);
	},
	isDark : function () {
		return this.getLuminance() < 128;
	}
});

JavaScript 1.8.5 Compatiblity

Реализованы три метода, которые еще не поддерживаются большинством браузеров — Function.prototype.bind, Object.keys, Array.isArray. Жаль, что всякие freeze и defineProperty реализовать не получится)

Расширение прототипов

Если вызвать nano.rich(), то будут расширены прототипы некоторых встроенных объектов, например появится Number.prototype.between или Array.prototype.contains.

Где взять?

Под лицензией LGPL последнюю версию можно скачать с репозитория на ГитХабе. Там же — документация.
С радостью принимаю предложения и патчи.

Tags:

Hubs:

JavaScript