Hat JavaScript im Browser einen Reflektionsmechanismus?

Question

Ich möchte eine Liste aller Eigenschaften, Stile, Ereignisse und Methoden eines HTML-Elements erhalten. Gibt es in den Browsern eine Reflektions-API?

Ich bin auf der Suche nach so etwas wie folgt aus:

var button = new HTMLButtonElement(); 
var className = document.getQualifiedClassName(button); // "HTMLButtonElement" 
var definition = document.getDefinition(className); // HTMLButtonElement reference 
var instance = document.getInstance(definition); // instance of HTMLButtonElement 
var properties = document.getProperties(button); // properties of HTMLButtonElement 
var methods = document.getMethods(button); // methods of HTMLButtonElement 
var styles = document.getStyles(button); // styles applicable to HTMLButtonElement 
var events = document.getEvents(button); // events on HTMLButtonElement 
var inheritance = document.getInheritance(button); // HTMLButtonElement > HTMLElement 

EDIT:
Dies ist der Aufruf in ActionScript3 das, was kommt ich suche:

var objectInformation = document.describeType(button) // metadata 

Dies kann Machen Sie es klarer, was ich in JavaScript zu tun versuche.

Hintergrund
Sagen wir, ich bin versucht, Code vollständig an einen HTML-Code-Editor hinzuzufügen. Wenn der Benutzer den Cursor neben ein div-Element platziert und den Code vollständig startet, möchte ich ihnen alle Ereignisse und Attribute und Stile im Code Complete-Popup anzeigen. Wenn Sie JavaScript eingeben, möchte ich alle verfügbaren Methoden automatisch abschließen. Wenn sie das Styles-Objekt eingeben, möchte ich eine Liste von Styles bereitstellen.

Wenn ich ein Objekt oder einen Tag-Namen bekomme, muss ich in der Lage sein, alle Metadaten für die Code-Vervollständigung anzuzeigen. In vielen Sprachen gibt es dafür APIs.

Answer 1

Es gibt nichts wie AS3's describeType in JS. Sie fragen nach einer Menge von Dingen auf einmal, von denen Sie einige in JS bekommen können und einige nicht (und einige davon können in JS nicht einmal Sinn machen, weil es so dynamisch ist.)

Sie können sicherlich die Eigenschaften und Methoden eines Objekts und seiner Hierarchie mit Object.getOwnPropertyDescriptors() und erhalten.

function describeType(object) { 
    const prototype = Object.getPrototypeOf(object); 
    console.log("Hello, I am a", prototype.constructor.name); 
    console.log("My properties are", Object.getOwnPropertyDescriptors(object)); 
    console.log("My prototype proterties are", Object.getOwnPropertyDescriptors(prototype)); 
    const superPrototype = Object.getPrototypeOf(prototype); 
    if (superPrototype) { 
     console.log("My super class is", superPrototype.constructor.name); 
     // etc 
    } 
} 

Example on jsfiddle.

Answer 2

var button = document.createElement('button') 

for(key in button){ 
//do anything here 
} 

Sie können dies tun, denke ich.

Answer 3

Sie müssen definieren, was jedes der Dinge bedeutet.

var className = document.getQualifiedClassName (Schaltfläche);

Was bedeutet das? Sie können classList verwenden.

var definition = document.getDefinition (Klassenname);

Was bedeutet das? Meinst du CSS Regeln? Sie müssen das CSS-Objektmodell durchlaufen, um dies zu finden.

var instance = document.getInstance (Definition);

Was bedeutet das? Sie können möglicherweise querySelectorAll verwenden.

var Eigenschaften = document.getProperties (Schaltfläche);

Wenn Sie wirklich Eigenschaften meinen, können Sie einfach die Eigenschaften der Schaltfläche als Objekt durchlaufen.

var methoden = document.getMethods (button);

Die meisten interessanten Methoden werden auf Prototypen wie HTMLElement sein, und Sie müssen dort nach ihnen suchen.Viele oder die meisten werden nicht aufgezählt und können schwer zu finden sein.

var styles = document.getStyles (Schaltfläche);

Was meinst du? button.style?

var events = document.getEvents (Schaltfläche);

Es gibt keine Möglichkeit, diese zu bekommen.

var vererbung = document.getInheritance (button);

Was bedeutet das?

Sie können auch Attribute erhalten, die von Eigenschaften unterscheiden:

var = button.attributes Attribute;

Answer 4

Die Vorgehensweise in JavaScript erfolgt über die statischen Methoden Object's constructor und Reflect.

Ein Beispiel verwendet Object.keys(myObj), um ein Array der Objekteigenschaftsnamen zurückzugeben.