Привет, читатель. Есть много прекрасных и мощных JavaScript-фреймворков. JQuery, MooTools, ExtJS, и множество других. Они кроссбраузерны и громадны. И пользоваться ими — одно удовольствие.
Но иногда, бывает, хочется написать какой-нибудь небольшой скриптик на 5 килобайт и как-то совесть мучает подключать JQuery, который весит в сжатом виде 75 килобайт. И каждый раз начинаешь писать свой мини-фреймворк:
Вроде бы, больше для начала и не надо. А потом вспоминаешь про createElement, легкий способ присвоить CSS, наследование, расширение прототип. И в общем каждый раз пишешь свой велосипед.
В этот раз я решил написать миниатюрный фреймворк, который можно было бы без зазрений совести подключать даже к самым маленьким проектам. В сжатом виде он весит всего 4 килобайта (в 20 раз меньше JQuery).
И в нём есть еще одно преимущество по сравнению со всеми современными фреймворками — полный отказ от устаревших браузеров, за счёт чего в эти 4 килобайта вместилася половина JQuery.
Итак, приветствуйте, JavaScript-фреймворк Nano
На самом деле, у меня уже есть даже один проект на этом фреймворке, но я его покажу чуть позже)
Nano врядли пригодится для разработки на обычных сайтах в обычном режиме, но иногда этот фреймворк — выбор лучше, чем один из монстров JavaScript.
Он на полную силу пользуется возможностями JavaScript 1.8, которые поддерживаются только современными браузерами, например Firefox 3.5+. Да, даже в третьем Фоксе часть не заработает. Я надеюсь, что такой шаг принесет в фреймворк изюминку и расширит круг возможностей.
Где его можно использовать? Когда вы пишете какой-то тестовый скрипт, когда вы разрабатываете что-то для последних версий браузеров, например плагины или user-scripts и на серверсайде. Более того, текущая версия не сломает ничего даже если вы подключите её к существующему проекту.
При работе с DOM чувствует влияние JQuery):
Можно делать цепочки вызовов:
Для css-селекторов я использую
ООП из Мутулза оказало на меня незначительное влияние, но я постарался максимально его упростить и не уходить далеко от оригинального подхода в JavaScript. Никаких «кошерных» Class. Для расширения объекта используется два статичных метода: node.extend для расширения самого объекта и node.implement для расширения его прототипа. Фактически, это короткая запись достаточно привычного
Реализованы три метода, которые еще не поддерживаются большинством браузеров — Function.prototype.bind, Object.keys, Array.isArray. Жаль, что всякие freeze и defineProperty реализовать не получится)
Если вызвать
Под лицензией LGPL последнюю версию можно скачать с репозитория на ГитХабе. Там же — документация.
С радостью принимаю предложения и патчи.
Но иногда, бывает, хочется написать какой-нибудь небольшой скриптик на 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 последнюю версию можно скачать с репозитория на ГитХабе. Там же — документация.
С радостью принимаю предложения и патчи.