В Javascript вы можете расширить существующие классы, используя свой объект-прототип:
String.prototype.getFirstLetter = function() {
return this[0];
};
Можно ли использовать этот метод для расширения элементов DOM?
В Javascript вы можете расширить существующие классы, используя свой объект-прототип:
String.prototype.getFirstLetter = function() {
return this[0];
};
Можно ли использовать этот метод для расширения элементов DOM?
вы можете расширить DOM с помощью прототипа элемента. Однако это не работает в IE7 и ранее. Вам нужно будет расширить конкретный элемент, по одному за раз. Библиотека Prototype делает это. Я рекомендую просмотреть , чтобы увидеть, как именно это делается.
Я нашел ответ так же, как я писал вопрос, но подумал, что я бы опубликовал сообщение, чтобы поделиться информацией.
Объект, который вам нужно расширить, Element.prototype
.
Element.prototype.getMyId = function() {
return this.id;
};
Вы не должны напрямую расширять что-либо ( "что-нибудь", я имею в виду локальные объекты DOM), что приведет только к плохим вещам. Плюс повторное расширение каждого нового элемента (что-то, что вам нужно сделать для поддержки IE) добавляет дополнительные накладные расходы.
Почему бы не воспользоваться подходом jQuery и не создать оболочку/конструктор, а вместо этого расширить это:
var myDOM = (function(){
var myDOM = function(elems){
return new MyDOMConstruct(elems);
},
MyDOMConstruct = function(elems) {
this.collection = elems[1] ? Array.prototype.slice.call(elems) : [elems];
return this;
};
myDOM.fn = MyDOMConstruct.prototype = {
forEach : function(fn) {
var elems = this.collection;
for (var i = 0, l = elems.length; i < l; i++) {
fn( elems[i], i );
}
return this;
},
addStyles : function(styles) {
var elems = this.collection;
for (var i = 0, l = elems.length; i < l; i++) {
for (var prop in styles) {
elems[i].style[prop] = styles[prop];
}
}
return this;
}
};
return myDOM;
})();
Затем вы можете добавить свои собственные методы с помощью myDOM.fn
... И вы можете использовать его следующим образом:
myDOM(document.getElementsByTagName('*')).forEach(function(elem){
myDOM(elem).addStyles({
color: 'red',
backgroundColor : 'blue'
});
});
Да, вы можете, но настоятельно не рекомендуется.
Если вы переопределяете что-то, что другая библиотека ожидает, что оригинал или другая библиотека перезаписывали то, что вы ожидали.. хаос!
Лучше всего хранить свой код в собственном пространстве имен/области.