Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.05.2012, 21:08
Интересующийся
Отправить личное сообщение для celkabelka Посмотреть профиль Найти все сообщения от celkabelka
 
Регистрация: 16.05.2012
Сообщений: 10

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

Решил попробовать сделать что-то наподобие своего 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
если удобно, то можете привести пример конструкции реализации примитивного фремворка.

Последний раз редактировалось celkabelka, 16.05.2012 в 21:12.
Ответить с цитированием
  #2 (permalink)  
Старый 16.05.2012, 22:22
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

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

и ещё, чуть не забыл
var css = function(nameProperty, newValue) {
        this.style.nameProperty = newValue;
    }

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

Последний раз редактировалось melky, 16.05.2012 в 22:25.
Ответить с цитированием
  #3 (permalink)  
Старый 16.05.2012, 23:25
Интересующийся
Отправить личное сообщение для celkabelka Посмотреть профиль Найти все сообщения от celkabelka
 
Регистрация: 16.05.2012
Сообщений: 10

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

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

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

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

Последний раз редактировалось celkabelka, 16.05.2012 в 23:50.
Ответить с цитированием
  #4 (permalink)  
Старый 17.05.2012, 02:12
Интересующийся
Отправить личное сообщение для celkabelka Посмотреть профиль Найти все сообщения от celkabelka
 
Регистрация: 16.05.2012
Сообщений: 10

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

Последний раз редактировалось celkabelka, 17.05.2012 в 03:37.
Ответить с цитированием
  #5 (permalink)  
Старый 17.05.2012, 10:21
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

<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>
Ответить с цитированием
  #6 (permalink)  
Старый 17.05.2012, 13:27
Интересующийся
Отправить личное сообщение для celkabelka Посмотреть профиль Найти все сообщения от celkabelka
 
Регистрация: 16.05.2012
Сообщений: 10

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

ps
ох уж эти прототипы!
Ответить с цитированием
  #7 (permalink)  
Старый 17.05.2012, 18:12
Интересующийся
Отправить личное сообщение для celkabelka Посмотреть профиль Найти все сообщения от celkabelka
 
Регистрация: 16.05.2012
Сообщений: 10

Не могу понять, ошибки не вывовид, но интуитивно я вроде бы понимаю. Решил заменить функцию """" на 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, прочитал у Вас на форуме.
Ответить с цитированием
  #8 (permalink)  
Старый 17.05.2012, 19:19
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от celkabelka
Я это document.querySelectorAll(selector) заменил на это getEl(selector) и после этого перестал работать поиск по id, хотя ошибки не выводит. По идеи, то у Вас там идет поиск сразу по массиву, но id возвращает один элемент и массива нет, но это предположение..
там в текущий объект добавляются элементы, возвращенные querySelectorAll. она возвращает что-то типа массива (NodeList), а ваша функция возвращает просто элемент. либо поправьте возвращаемые значения getEl, либо правьте много моего кода

там должно быть что-то вроде
return document.getElementById...
// переделать в 
return [ document.getElementById... ]

Сообщение от celkabelka
ps
а причина замены из-за того, что поддержка этого метода идет от ie8, прочитал у Вас на форуме.
в IE7 getElementsByClassName не поддерживается. что делать будете ?)
Ответить с цитированием
  #9 (permalink)  
Старый 17.05.2012, 19:31
Аватар для Раед
''
Отправить личное сообщение для Раед Посмотреть профиль Найти все сообщения от Раед
 
Регистрация: 11.12.2011
Сообщений: 636

Сообщение от melky
в IE7 getElementsByClassName не поддерживается. что делать будете ?)
Ну getElementsByClassName уж попроще реализовать, чем querySelector .
Кстати, в вашем коде возвращается не сам элемент, а в элемент объектной обёртке. Какой в этом смысл?
Ответить с цитированием
  #10 (permalink)  
Старый 17.05.2012, 19:33
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавить свои методы к массиву Lexi Общие вопросы Javascript 1 08.10.2010 18:05
Скрипт калькулятора (не могу добавить еще одно значение) Jee_Day Я не знаю javascript 2 22.05.2009 13:19