Как создавать свои методы для элементов на JavaScript?

Question

[Максим Иванов]

Допустим, есть элемент
id = document.getElementById('max').MyMethod(value); и мы применяем свой созданный метод, также может быть
div = document.getElementsByTagName('div')[0].MyMethod(value);

Как для Dom-узлов создавать свои методы - MyMethod(value)?

Answer 1

[Mikhail Osher]

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

// Как хотите Вы
HTMLElement.prototype.MyMethod = function(value) {
    this.innerHTML += value;
};

// Вариант с параметром
function MyMethodA(elem, value) {
    elem.innerHTML += value;
}

// Вариант с подменой контекста
function MyMethodB(value) {
    this.innerHTML += value;
}

// not good
var a = document.getElementsByTagName('div')[0].MyMethod(value);
// better
var b = MyMethodA(document.getElementsByTagName('div')[0], value);
// probably what you need
var c = MyMethodB.call(document.getElementsByTagName('div')[0], value);

Comments

[Максим Иванов]

По факту я так и сделал, написал свою функцию, но, а если такая функция уже создана или может быть переопределена, ведь не понятно как себя будет вести скрипт?

[Mikhail Osher]

Если уже надо железную конструкцию - используйте Object.defineProperty и запретите в нем изменять свойства.

Answer 2

[Сергей Мельников]

var MyAPI = {
    css: function(key, val){
        if (val === undefined)
            return this[0].style[key];
        for (var i = 0; i < this.length; i++) {
            this[i].style[key] = val;
        }
        return this;
    },
    hide: function() {
        return this.css("display", "none");
    },
    show: function() {
        if (this.css("display") == "none")
            return this.css("display", "block");
        return this.css("display", "");
    }
}

function _el(selector) {
    var collection = document.querySelectorAll(selector),
        wrapped = [].slice.call(collection);
    for (var method in MyAPI) {
        wrapped[method] = MyAPI[method];
    }
    return wrapped;
}

_el("#mydiv").css("border", "1px solid black");

Comments

[Mikhail Osher]

_el возвращает массив, когда же в методах Вы делаете обращение к объекту. ;)

[Максим Иванов]

Красиво, практично без jQuery, но в IE не будет работать старых версий

[Сергей Мельников]

@Miraage потому что this в методах и есть тот самый массив wrapped ([object NodeList])

Answer 3

[Eugene Obrezkov]

Смотря для каких узлов вы это хотите. Можно расширять прототип у HTMLCollection, NodeList, NodeElement и т.д. Вариант @JIakki не совсем корректен.

Comments

[Максим Иванов]

HTMLElement - для всех элементов которые имеют свойство .style {но кроссбраузерно я так и не нашел в интернете, пример}

[Eugene Obrezkov]

@omaxphp вот давайте будем откровенными. Вряд ли у вас сделана кроссплатформенность на должном уровне, как и у других разработчиков. Поэтому сначала просто можете расширить HTMLElement.prototype. Этого должно хватить для большинства браузеров.
И конечно же не забывайте, что вы делаете. Такие игры опасны, если не знать и не понимать что вы расширили и т.д.

Answer 4

[JIakki]

Object.prototype.nameMetod = function () {.....};

Comments

[Максим Иванов]

это кроссбраузерно?

[goodknight]

@omaxphp Нет конечно. Только в IE6 работает. А вообще вот линк ;) https://developer.mozilla.org/en-US/docs/Web/JavaS...

[Денис Пушкарев]

За такие предложения руки отрубать нужно.