Не могу к созданному объекту добавить методы!

[celkabelka]

Добрый вечер всем!

Решил попробовать сделать что-то наподобие своего JS фреймворка.

Значит сейчас приведу часть кода, в котором примитивно выполняется одно из действий фреймворка jQuery.

Сначала пример использования:

$('#block').style.border = '1px solid red';
Выделенную часть выполняет мой код)

Теперь что надо. Надо, чтобы работали свойства, то есть я хочу, чтобы можно было выполнять такое:
$('#block').css('border', '1px solid red'); , то есть должен быть метод css.

Небольшое придесловие - я много ковырялся сегодня и сейчас будет последний вариант, я не знаю, может я с самого начала не правильно делал реализацию, но я пробовал и с объектами что-то делать и все-равно не получалось..

В ОБЩЕМ ВОТ:

(function( global ) {

    var Main = function() {

        var public = this;

        public.getEl = function( selector ) {

            if( selector.indexOf( '#' ) + 1 ) {

                selector = selector.replace( /#/g, '' );
                return document.getElementById( selector );

            } else if ( selector.indexOf( '.' ) + 1 ) {

                selector = selector.replace( /\./g, '' );
                return document.getElementsByClassName( selector );

            } else {

                return document.getElementsByTagName( selector );

            }

        }

    }

    $ = function( selector ) {

        var el = new Main();
        return el.getEl( selector );

    };

})(  );

Вот реализация метода css:

var css = function(nameProperty, newValue) {
        this.style.nameProperty = newValue;
    }

Как видно, то там класс main с методом getEl, что позволяет найти элеметы.

Не знаю понятно ли я объяснил, если - нет спросите) Я с удовольствием отвечу!

ps
если удобно, то можете привести пример конструкции реализации примитивного фремворка.

[melky]

мм.. для этого и существуют прототипы. и обёртки.

и, простите, у вас инициализация странная. зачем функция Main ?

по теме : определите прототип для getEl,и туда вносите функции типа css.

и ещё, чуть не забыл

var css = function(nameProperty, newValue) {
        this.style.nameProperty = newValue;
    }

будет устанавливать объекту style свойство nameProperty вне зависимости от значения в этой переменной. для этого есть другой способ обращения к свойствам

this.style[nameProperty] = newValue;

[celkabelka]

Спасибо большое, теперь знаю в какую сторону копать - прототипы!

На счет ф-ции, то это был один из последних вариантов реализации того, чего хотелось и что не получилось)

ps
И за исправление спасибо!

Даже не знаю, как я пропустил эту информацию
http://javascript.ru/tutorial/object...herez-prototip

[celkabelka]

Что-то не то у меня получается, пример по моему коду можно пожалуйста? И если не трудно - пример инициализации..

[melky]

у вас врядли получится посмотрите на этот код, он проще, чем у вас.

<div>ABC</div>
<div>АБВ</div>

<script>
(function(window){

	var Main = function(selector){
		return new init(selector);
	};
	
	Main.prototype = {
		utils: {
			iterate: forEach
		}
	};

	var forEach = function(target, callback){
		for(var i = 0; i in target; i += 1){
			callback(target[i], i, target);
		}
	};
	
	var init = function(selector){
		var _this = this;
		_this.selector = selector;
		_this.length = 0;
		forEach(document.querySelectorAll(selector), function(element, index){
			_this[index] = element;
			_this.length += 1;
		});
		return _this;
	};
	
	init.prototype = {
		css: function(name, value){
			var _this = this;
			
			if(value){
				forEach(_this, function(element){
					element.style[name] = value;
				});
				return _this;
			} else {
				return _this[i].style[name];
			}
		}
	};

	window.$ = Main;
})(window);

$("div").css("border", "1px red solid").css("borderWidth", "20px");
</script>

[celkabelka]

Что сказать.. спасибо! )

ps
ох уж эти прототипы!

[celkabelka]

Не могу понять, ошибки не вывовид, но интуитивно я вроде бы понимаю. Решил заменить функцию """" на getEl(свою) и получается так, что все работает, кроме поиска элемента по ID.

Вот моя ф-ция по поиску элемента:

var getEl = function( selector ) {

        if( selector.indexOf( '#' ) + 1 ) {

            selector = selector.replace( /#/g, '' );
            return document.getElementById( selector );

        } else if ( selector.indexOf( '.' ) + 1 ) {

            selector = selector.replace( /\./g, '' );
            return document.getElementsByClassName( selector );

        } else {

            return document.getElementsByTagName( selector );

        }

    }

У Вас было реализовано вот так:

...

forEach(document.querySelectorAll(selector), function(element, index){

...

Я это document.querySelectorAll(selector) заменил на это getEl(selector) и после этого перестал работать поиск по id, хотя ошибки не выводит. По идеи, то у Вас там идет поиск сразу по массиву, но id возвращает один элемент и массива нет, но это предположение..

ps
а причина замены из-за того, что поддержка этого метода идет от ie8, прочитал у Вас на форуме.

[melky]

Я это document.querySelectorAll(selector) заменил на это getEl(selector) и после этого перестал работать поиск по id, хотя ошибки не выводит. По идеи, то у Вас там идет поиск сразу по массиву, но id возвращает один элемент и массива нет, но это предположение..

там в текущий объект добавляются элементы, возвращенные querySelectorAll. она возвращает что-то типа массива (NodeList), а ваша функция возвращает просто элемент. либо поправьте возвращаемые значения getEl, либо правьте много моего кода

там должно быть что-то вроде

return document.getElementById...
// переделать в 
return [ document.getElementById... ]

ps
а причина замены из-за того, что поддержка этого метода идет от ie8, прочитал у Вас на форуме.

в IE7 getElementsByClassName не поддерживается. что делать будете ?)

[Раед]

в IE7 getElementsByClassName не поддерживается. что делать будете ?)

Ну getElementsByClassName уж попроще реализовать, чем querySelector .
Кстати, в вашем коде возвращается не сам элемент, а в элемент объектной обёртке. Какой в этом смысл?

[melky]

Ну getElementsByClassName уж попроще реализовать, чем querySelector .
Кстати, в вашем коде возвращается не сам элемент, а в элемент объектной обёртке. Какой в этом смысл?

в jQuery так же делается.

и querySelector[,All] там намного легче реализовать, чем getElementsByClassName. когда я гуглил matchesSelector для IE, увидел там эту фишку (я он ней не слыхал даже).

всё увидите, когда я выложу свою функцию анимирования