Почувствуй себя свободным с технологией ajax!

Как-то прочно входят в нашу жизнь всякие JavaScript библиотеки, которые сильно помогают разрабатывать нам большие приложения, использовать огромное количество функций, писать мультипоточные системы, расширять интерфейс UI компонентами. У нас в руках комплексная модель событий и т.п. Это все зашибись.
Но что если нам всего этого не надо! Ведь часто мы ограничиваемся использованием всего нескольких функций. А это уже мешает общему стилю кода и все становится негламурным.

Раз уж вы тут, то представье как бы мы могли написать этот код без библиотек:

$('foo', 'bar').on('click', function(e) {
$(this).css({
color: 'green',
fontSize: '2em'
}).addClass('active');
});

С чего начать ?
Мы все любим функцию $ которую подарили нам prototype, сами проэмулируем ее так:

function $() {
var elements = [];
for (var i = 0; i < arguments.length; i++) {
var element = arguments;
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

Однако мы лучше превратим эту функцию в конструктор, к которому прикрутим методы (или не методы), в итоге возвращая только ссылки на них.
Ну вот возьмем и прикрутим так:

(function() {
// private constructor
function _$(els) {
this.elements = [];
for (var i=0; i
var element = els;
if (typeof element == 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
return this;
}

_$.prototype = {
each: function(fn) {
for ( var i = 0, len = this.elements.length; i
fn.call(this, this.elements);
}
return this;
},
setStyle: function(prop, val) {
this.each(function(el) {
el.style[prop] = val;
});
return this;
},
addClass: function(className) {
this.each(function(el) {
el.className += ‘ ‘+className;
});
return this;
},
on: function(type, fn) {
var listen = function(el) {
if (window.addEventListener) {
el.addEventListener(type, fn, false);
} else if (window.attachEvent) {
el.attachEvent(’on’+type, function() {
fn.call(el, window.event);
});
}
};
this.each(function(el) {
listen(el);
});
return this;
},
css: function(o) {
var that = this;
this.each(function(el) {
for (var prop in o) {
console.log(prop);
that.setStyle(prop, o[prop]);
}
});
return this;
}
};
window.$ = function() {
return new _$(arguments);
}
})();