JS: цепочка функций, как в jQuery

Во всеми любимом jQuery имеется возможность использования цепочек вызовов функций, можно ,например, написать такую цепочку:

$('#id').add('p').addClass('class').html('text');

А как сделать цепочку для собственноручно написанных функций? Можно, конечно, подключить jQuery и добавить в него свои функции, но вместо слепого использования громоздкого фреймворка, я решил поподробней разобраться с цепочками.

Долгий поиск по сети все-таки привел к результату. На Yeti Factory есть объяснение принципа работы цепочек в jQuery. Но смысл этой статьи дошел до меня не сразу, а только после препарирования самого jQuery. Кстати, можно не втупую кромсать цельный фреймворк, а отдельно взять нужную часть исходника на github.

Нужный код находатся в core.js. Вот общая схема:

var jQuery = function(selector, context){
	return new jQuery.fn.init(selector, context);
}

jQuery.fn = jQuery.prototype = {
	init : function(selector, context){
		/*
		   Получение и проверка элементов
		*/
	return this;
	},
    /*
		Здесь располагается код функций,
		которые станут прототипом 
    */

};

jQuery.fn.init.prototype = jQuery.fn;

В терминологии я не силен, поэтому покажу простейший пример использования этой схемы:

(function(){

var jQuery = window.jQuery = window.$ = function( selector, context ) {
		return new jQuery.fn.init( selector, context );
	};

jQuery.fn = jQuery.prototype = {
	init: function( selector, context ) {

		// Если selector - объект, возвращаем его
		if ( selector.nodeType ) {
			this[0] = selector;
			return this;
		}

		// В противном случае берем элемент по id
		var elem = document.getElementById( selector );
		var ret = jQuery( elem );

		return ret;
		
	},

	// Наши функции
	raz: function() {
		this[0].innerHTML += 'первая пошла, ';
	return this;
	},
	
	dva: function() {
		this[0].innerHTML += 'вторая пошла, ';
	return this;
	},
	
	tri: function() {
		this[0].innerHTML += 'третья пошла ';
	return this;
	}
};

jQuery.fn.init.prototype = jQuery.fn;

})();

Для запуска скрипта потребуется такой код:

<div id='sampleid'></div>
	<script type="text/javascript">
	
		$('sampleid').raz().dva().tri();

	</script>

UPD. Я тут мучался, столько сайтов просмотрел, jQuery кромсал, а оказалось-то, надо всего лишь зайти на javascript.ru и попросить помочь.

Можно сделать скрипт немного проще:

function $(e) {
    return new $.wrapper(e);
}
 
$.wrapper = function (e) {
    if ( e.nodeType ) {
            this[0] = e;
            return this;
    }
 

    var elem = document.getElementById( e );
    var ret = jQuery( elem );
 
    return ret;
};

$.wrapper.prototype = $.prototype = {

    constructor: $,

    raz: function() {
        this[0].innerHTML += 'первая пошла, ';
    return this;
    },
 
    dva: function() {
        this[0].innerHTML += 'вторая пошла, ';
    return this;
    },
 
    tri: function() {
        this[0].innerHTML += 'третья пошла ';
    return this;
    }
};

Комментарии (RSS)

Оставить комментарий:

Подписаться на новые комментарии