Anbringen von Funktionen auf eine Instanz eines Elements

Können wir ändern ein DOM-element und fügen Sie zu Ihrem Prototyp. Zum Beispiel, wenn wir hinzufügen möchten, etwas, das nur auf die Leinwand, wir würden etwas wie das hier tun:

HTMLCanvasElement.prototype.doSomething = function(arg) { ... };

Können wir dann führen Sie diese Aktion auf ein canvas-element:

var canvas = document.getElementById('canvasId');
canvas.doSomething(...);

Ist es möglich, hinzufügen/anfügen Funktion in dieser Instanz des canvas ohne Veränderung der Prototyp HTMLCanvasElement. Ich will nur eine Leinwand, wo doSomething(...) aufgerufen wurde, um Zugang zu den zusätzlichen Methoden, nicht alle canvas-Elemente in den DOM. Wie kann ich dies tun?

Ich habe versucht, die folgenden in meinem doSomething-Funktion:

this.prototype.foobar = function() {...}

Allerdings Prototyp ist nicht definiert hier.

InformationsquelleAutor Sai | 2012-09-29

9

Shusl hat mir geholfen, kommen mit der richtigen Antwort. Es war einfacher als ich dachte. In meinem doSomething(args) - Funktion, anstatt zu versuchen, ändern Sie die Objekt-Prototyp, den ich einfach direkt an die Funktion. Hier ist der vollständige code:
```
HTMLCanvasElement.prototype.doSomething = function(args) {
    this.foobar = function(args) { ... };
}

var canvas = document.getElementById('canvasId');
canvas.doSomething(...);
canvas.foobar(...);
```
Nun, foobar ist nur zugänglich, zum Beispiel der Leinwand, wo doSomething aufgerufen wurde. Zur gleichen Zeit, ich don ' T haben keine Informationen über die Instanz.
- Auf diese Weise werden alle Instanz kann foobar, wenn Sie rufen doSomething.
- Vielleicht möchten fügen Sie einen Scheck, um zu sehen, wenn this.foobar bereits vorhanden ist, bevor Sie es. So, jedes mal, wenn Sie rufen doSomething es nicht re-set this.foobar.
- Ah ja, danke!
- Was Sie wirklich wollen, ist ein .extend Methode: Prototyp Element.extend, jQuery.extend (John Resig Artikel), YUI, Backbone.js, etc.
InformationsquelleAutor Sai
5

In diesem Fall können Sie direkt attache eine method zu Ihrer canvas-Objekt
```
var canvas = document.getElementById('canvasId');
canvas.doSomething= function() {...}; ///doSomething will only be available to this particular canvas.
canvas.doSomething(...);
```
- doSomething arbeitet just fine. Ich möchte in der Lage sein zu befestigen, eine andere Methode/Funktion. Allerdings habe ich nicht unbedingt wissen, welches Objekt ich bin Befestigung zu. Ich nicht haben Zugang zu der "canvas" - Objekt.
- Obwohl, Ihre Antwort war nicht korrekt, aber deine Antwort hat mir geholfen, bekommen Sie zur Antwort. Stimmten up!
- Sie können anfügen einer Kennung für das canvas-Objekt, oder Sie können halten Sie die Referenz der bestimmten Leinwand. Und der Zugriff auf das canvas-Wann immer Sie wollen. Sie können, bringen Sie eine beliebige Anzahl von Methode, zu einem Objekt.
InformationsquelleAutor Anoop

Mit jQuery, können Sie die data Eigenschaft.

//setting the function
$('element').data('doSomething', function(arg) { ... });
//calling the function
$('element').data('doSomething')(arg);

JSFiddle

InformationsquelleAutor Austin Brunkhorst

0

Object.defineProperty(element, 'doSomething', {value:function(arg){ ... }} );

Wo 'element' ist das element, das Sie möchten, fügen Sie die Eigenschaft zu,
'doSomething' ist der name und die
Dritte argument ist ein Objekt mit der Eigenschaft seiner selbst. In deinem Fall eine Funktion.

Beispiel:

JS:
```
var mycanvas = document.createElement("canvas");

Object.defineProperty(mycanvas, 'doSomething', {
  value: function(x){console.log(x); },
  configurable: true 
});

mycanvas.doSomething('my message');
//prints 'my message' to the console.
```
Den 'configurable' - Eigenschaft gibt an, ob Sie möchte, dass die 'doSomething' - Eigenschaft, um in der Lage sein, wieder zu ändern, nachdem es erstellt wurde. Überprüfen Sie heraus die MDN Details für weitere Informationen und Beispiele.

InformationsquelleAutor Josh Haughton

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.