Comment hériter de la classe d'élément DOM

ancienne q mais il y a une meilleure réponse que "faire" ou "ne" pas "maintenant que IE6 est principalement défunt. Tout d'abord, les constructeurs de noyau du prototypage de l'ECMA de l'ECMA, tels que «Array», sont assez inoffensifs et utiles si vous le faites correctement et que vous testez pour éviter de casser les méthodes existantes. Restez certainement à l'écart de l'objet et réfléchissez bien avant de jouer avec la fonction, cependant.

Si vous partagez du code entre beaucoup de personnes / auteurs ou que vous traitez avec des incertitudes DOM, il est généralement préférable de créer des objets de l'adaptateur / wrapper avec une nouvelle méthode d'usine à utiliser dans un schéma d'héritage. P>

Dans ce cas, j'ai écrit document.CreateExtel pour créer des éléments DOM enveloppés dont les propriétés accessibles sont toutes disponibles via prototype. p>

Utilisation des éléments suivants, votre "Superclass" pour DIVS serait HTMLEXTTelement ( Dans ce cas mondialement disponible - EW, mais c'est juste un exemple). Toutes les références aux propriétés disponibles de l'instance HTMLElement d'origine vivent dans le prototype du wrapper. Remarque: certaines vieilles propriétés à savoir ne peuvent pas être transmises sous forme de références ni même accessibles sans jeter des erreurs (génial), ce qui est ce que l'essai / attrape est pour. P>

Vous pouvez normaliser les propriétés courantes en ajoutant une logique à mettre propriétés manquantes ou normalisées correctement après que la boucle enveloppe les propriétés disponibles, mais je vous quitterai cela. P>

Maintenant pour l'amour de Pete, n'utilisez jamais mon code pour écrire un certain cascade 16- fois la sottise héritage et ensuite mettre en œuvre dans certaines bibliothèques ironiquement populaires, nous sommes tous obligés de traiter ou je vais vous chasser et citera fort "des motifs de conception" à vous tout en jetant des fruits pourris. P>

//Implementation just like document.createElement()
//document.createExtEl('div').tagName === 'DIV'

document.createExtEl = ( function(){  //returns a function below

            var htmlTags = ['div','a'], //... add all the element tags you care to make extendable here
            constructorMap = {},
            i = htmlTags.length;

            while(i--){
                thisTag = htmlTags[i].toLowerCase();
                constructorMap[ thisTag ] = function(){
                    var elObj = document.createElement(thisTag),
                    thisProto = this.constructor.prototype,
                    constructorName = 'HTMLExt' + thisTag.charAt(0).toUpperCase() + thisTag.slice(1) + 'Element';

                    alert(constructorName);

                    window[constructorName] = this.constructor; //adds a global reference you can access the new constructor from.

                    for(var x in elObj){ try{ thisProto[x] = elObj[x]; } catch(e){} }
                }
            }

            //all of the above  executes once and returned function accesses via closure
            return function(tagName){
                return new constructorMap[tagName.toLowerCase()]();
            }



    } )()

    //Now in the case of a superclass/constructor for div, you could use HTMLExtDivElement globally

en 2020, vous pouvez facilement créer un élément personnalisé en étendant des éléments HTML.

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

// Or use an anonymous class if you don't want a named constructor in current scope.
window.customElements.define('app-drawer', class extends HTMLElement {...});