Не могу к созданному объекту добавить методы!
Добрый вечер всем!
Решил попробовать сделать что-то наподобие своего 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 если удобно, то можете привести пример конструкции реализации примитивного фремворка. |
мм.. для этого и существуют прототипы. и обёртки.
и, простите, у вас инициализация странная. зачем функция Main ? по теме : определите прототип для getEl,и туда вносите функции типа css. и ещё, чуть не забыл
var css = function(nameProperty, newValue) {
this.style.nameProperty = newValue;
}
будет устанавливать объекту style свойство nameProperty вне зависимости от значения в этой переменной. для этого есть другой способ обращения к свойствам this.style[nameProperty] = newValue; |
Спасибо большое, теперь знаю в какую сторону копать - прототипы!
На счет ф-ции, то это был один из последних вариантов реализации того, чего хотелось и что не получилось) ps И за исправление спасибо! Даже не знаю, как я пропустил эту информацию :) http://javascript.ru/tutorial/object...herez-prototip |
Что-то не то у меня получается, пример по моему коду можно пожалуйста? И если не трудно - пример инициализации..
|
у вас врядли получится :) посмотрите на этот код, он проще, чем у вас.
<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>
|
Что сказать.. спасибо! )
ps ох уж эти прототипы! |
Не могу понять, ошибки не вывовид, но интуитивно я вроде бы понимаю. Решил заменить функцию """" на 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, прочитал у Вас на форуме. |
Цитата:
там должно быть что-то вроде return document.getElementById... // переделать в return [ document.getElementById... ] Цитата:
|
Цитата:
Кстати, в вашем коде возвращается не сам элемент, а в элемент объектной обёртке. Какой в этом смысл? |
Цитата:
и querySelector[,All] там намного легче реализовать, чем getElementsByClassName. когда я гуглил matchesSelector для IE, увидел там эту фишку (я он ней не слыхал даже). всё увидите, когда я выложу свою функцию анимирования :) |
| Часовой пояс GMT +3, время: 12:54. |