Comment insérer un objet littéral aléatoire dans le DOM en JavaScript ?

Question

Je crée des enveloppes de classes personnalisées pour les champs de saisie de formulaires qui contiennent en interne un nœud DOM et sont complétés par une méthode de fonctionnalité supplémentaire.

Ma question est de savoir s'il existe une méthode similaire à .toString() pour l'ajout au DOM, car je voudrais insérer directement mes objets dans le DOM au lieu d'appeler des méthodes supplémentaires.

Dans d'autres domaines, voici un exemple de ce que j'ai :

function A () {
  this.element = documenet.createElement('input');
  // blah blah logic
  this.toString = function () {
    return '<input type="'+this.element.type+'" value="'+this.element.value+'" />';
  }
  // a similar method to this i'ld like
  this.toString = function () {
    return this.element;
  }
}

afin que je puisse l'utiliser comme suit :

var a = new A();

// this works as it calls .toString(), but it is a hack and it is not pretty
document.body.innerHTML += a;

// this is what i'd want to be able to do:
document.body.appendChild(a);

// this is what **I AM REALLY TRYING TO AVOID:**
document.body.appendCHild(a.toElement());

Vous ne pouvez pas simplement hériter du DOM Node car ce n'est pas une classe publique.

J'ai essayé de regarder les autres questions mais aucune ne semble avoir la réponse... toute idée serait la bienvenue.

Answer 1

Vous ne pouvez pas hériter des constructeurs natifs de DOM, mais vous pouvez hériter votre classe de wrapper de jQuery !

function A () {
    if (!(this instanceof A)) return new A(); // fix wrong constructor invocations
    if (this.length) { // shouldn't be set yet, so another odd invocation:
        var empty = Object.create(A.prototype); // a new, but *empty* instance
        empty.length = 0; // explicitly set length
        return empty;
    }

    this[0] = document.createElement('input');
    …
    // or you might want to call $.fn.init
    this.context = undefined; // not sure whether
    this.selector = ""; // we need those two lines
    this.length = 1; // but the length is obligatory
}
A.prototype = Object.create($.fn, {constructor:{value:A,configurable:true}});
A.prototype.toString = function () {
    return '<input type="'+this[0].type+'" value="'+this[0].value+'" />';
}

Avec ça, vous pourriez juste $(document.body).append(new A) o new A().appendTo(document.body) etc.

Answer 2

Au lieu de penser à A comme un objet, vous pouvez le considérer comme une méthode d'usine : http://jsfiddle.net/fnK56/2/

// We can modify ele however we like, even overriding the toString method.
function CustomElement() {
    var ele = document.createElement("input");
    ele.type = "button";
    ele.value = "Testing";
    // do stuff to ele
    ele.CustomProperty = {one:"two", three:"four"}; // we can even add custom properties that will persist with that DOM node. 

    ele.toString = function(){
        return '<input type="'+this.type+'" value="'+this.value+'" />';
    };

    return ele;
}

var tmp = CustomElement(); // get us a new CustomElement

document.body.innerHTML += tmp; // this works because of the overridden toString
tmp.id = "Test";
document.body.appendChild(tmp); // this works because tmp is still a DOM input node.

console.log(tmp.CustomProperty); // Object {one: "two", three: "four"} 
console.log(document.getElementById("Test").CustomProperty); // Object {one: "two", three: "four"}

Answer 3

Cela ne fonctionnera pas sur tous les navigateurs (voir http://www.meekostuff.net/blog/Overriding-DOM-Methods/ ) pour une bonne discussion des options, mais.. :

HTMLElement.prototype._appendChild = HTMLElement.prototype.appendChild;
HTMLElement.prototype.appendChild = function(target)
{
    if(target.toElement)
    {
        this._appendChild(target.toElement());
    }
    else
    {  
        //attempt to do it the old fashioned way
        this._appendChild(target);
    }

}

Cela permet d'activer votre syntaxe :

// this is what i'd want to be able to do:
document.body.appendChild(a);

et cache le fait que "toElement()" est appelé en interne.

Je tiens à souligner que, lorsque vous atteignez ce niveau de complexité, l'utilisation d'un framework comme jQuery commence à avoir du sens.