Не могу к созданному объекту добавить методы!
Добрый вечер всем!
Решил попробовать сделать что-то наподобие своего 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, время: 07:34. |