Как настроить приемник

Question

Как я могу переписать функцию в форме:

 foo = function(arg1,arg2){....};

в такую ​​форму, чтобы arg1 стал получателем, для использования следующим образом?

arg1.foo(arg2);

---

Редактировать Я обнаружил, что с помощью jQuery я могу это сделать.

jQuery.fn.foo = function(arg){
  ...
}

Как это сделать с помощью Javascript, не использующим jQuery?

Answer 1

Объекты, которые возвращает jQuery, являются объектами jQuery, а не объектами DOM. Они содержат коллекций объектов DOM, но jQuery вообще не добавляет никаких методов к объектам DOM. jQuery.fn - это просто ссылка на прототип объектов, возвращаемых jQuery, что позволяет вам напрямую добавлять методы к этому прототипу.

Поскольку вы заинтересованы в воспроизведении поведения jQuery, вы можете сделать то же самое: обернуть нативные объекты DOM в собственный класс, добавив любые методы, которые вы хотите, в этот класс-обертку. Обратите внимание, что вы не можете вызывать какой-либо метод объекта DOM для экземпляра jQuery; jQuery определяет некоторые служебные методы для вызова реальных методов DOM, но для вызова многих других методов DOM вам необходимо получить доступ к реальным объектам DOM, заключенным в экземпляр jQuery. У вас будет такое же ограничение с вашим пользовательским классом-оберткой - вам нужно будет реализовать методы в вашей обертке, которые перенаправляют вызов базовому объекту DOM.

Пример:

function DOMWrapper(domObject) {
    this.domObject = domObject;
}

DOMWrapper.prototype = {

    constructor: DOMWrapper,

    foo: function(arg1, arg2, arg3) {
        // this.domObject refers to the wrapped object here
        this.domObject.nativeMethod();
        // you could do things like this here:
        return this.bar.call(this.domObject, arg1, arg2, arg3);
    },

    bar: function(arg1, arg2, arg3) {
        // now, even though "bar" is defined as a method of
        // the DOMWrapper prototype, it has been invoked by "foo"
        // in the context of the wrapped DOM object, so
        // "this" refers directly to the DOM object in this method

        // this goes to the actual DOM nativeMethod:
        return this.nativeMethod();
    },

    domMethodWrapper: function() {
        return this.domObject.nativeMethod();
    }

}

Answer 2

Решение 1

Непосредственное присоединение функции к каждому элементу.(более совместимо)

Демонстрация: http://jsfiddle.net/SO_AMK/tE6gf/

jsFiddle's медленно сегодня, так что вот JS Bin mirror

JavaScript:

var elm = document.getElementById("elm");

elm.foo = function(arg) {
    alert(arg.arg1); // What I thought you might've meant :D
};

elm.foo({
    arg1: "Arg 1 Value",
    arg2: "Arg 2 Value",
    arg3: "Arg 3 Value",
    arg4: "Arg 5 Value"
});

var arg1 = document.getElementById("div2");

// To match your example
arg1.foo = function(arg1, arg2){ alert(arg1); };

var arg2 = "This is a random string";

arg1.foo(arg2);

Решение 2

Расширение Element.prototype.(только обратная совместимость с IE 7)

Демо: http://jsfiddle.net/SO_AMK/8W2Nx/

JavaScript:

Element.prototype.foo = function(arg1, arg2) {
    alert(arg1);
};

document.getElementById("test").foo("String 1");​

Answer 3

Как то так?

var arg1 = { 
    foo: function(arg2) { } 
};

arg1.foo(arg2)

Обновление

Вы должны просто иметь возможность добавить функцию на объект:

var test = document.getElementById('test');

test.foo = function(arg) {
    alert(this.innerHTML + " : " + arg);
};

test.foo("Hello");

http://jsfiddle.net/sJSDS/

Answer 4

определяет функцию, которую вы хотите использовать:

function original_foo(color) {
    this.style.backgroundColor = color;
}

затем пройдитесь по всем узлам dom и прикрепите функцию как метод:

var all_nodes = document.querySelectorAll("*");
for (var i in all_nodes) {
    var node = all_nodes[i];
    node.foo = original_foo;
}

Теперь вызовите метод:

var d = document.getElementById("d2");
d.foo("red");

document.getElementById("d1").foo("green");

Смотрите это jsfiddle: http://jsfiddle.net/bjelline/G9e9C/

Answer 5

Вы можете решить это следующим образом:

function foo(arg1, arg2) {
   if (typeof arg1 == 'function')
      arg1(arg2); // or 'return arg1(arg2)' if necessary
   else
      return false;
}

Вы можете легко проверить это с помощью:

foo(alert,'hello world');