logo

Vytvořte znovu použitelnou komponentu s jednoduchým Javascriptem - bez Angular/React/Vue!

Ahoj všichni 👋,

V tomto článku se podíváme na to, jak vytvořit znovu použitelný HTML prvek/komponentu pouze s prostým JavaScriptem.

Ano, slyšeli jste dobře.

V tomto světě vývoje webu se každý mohl setkat s vytvořením alespoň jedné vlastní komponenty pomocí Angular/React/Vue. Ale přemýšleli jste někdy, jak toho dosáhnout? Pojďme se ponořit!

Webové komponenty

Web Components je základní stavební logikou vytváření vlastních komponent.

Zde je definice:

Většina z nich si je vědoma toho, že důvodem k vytvoření vlastní komponenty je skutečnost, že požadovaná funkce není dostupná ve stávajícím světě HTML. Předpokládejme, že můžeme použít <button> tag pro vykreslení tlačítka a na jeho vrch můžeme přidat styl podle potřeby. Ale co když potřebujeme přizpůsobenou funkci, jako je běžný app header který by měl být znovu použit ve všech aplikacích.

Jedním z řešení je, že můžeme zkopírovat a vložit kód do všech projektů. To však vede k následujícímu problému

  1. Jakékoli nové změny by měly být přidány do všech projektů.
  2. Opakování kódu.
  3. Neudržitelné.

To je místo, kde Web Components přichází do tohoto obrázku.

Webové komponenty jsou založeny na čtyřech hlavních specifikacích:

V tomto tutoriálu se podíváme na 1. specifikaci – Vlastní prvky.

Vlastní prvky pokládají základ pro navrhování a používání nových typů prvků DOM.

Začněme vytvořením znovu použitelného prvku AppHeader Custom.

Nejprve vytvořte novou třídu, řekněme AppHeader &rozšířit HTMLElement . Poté zavolejte super() vnitřní konstruktor. Níže uvedené 2 metody jsou jako háček životního cyklu.

connectedCallback je voláno, když je prvek přidán do DOM.

disconnectedCallback je voláno, když je prvek odstraněn z DOM

Nakonec přiřaďte selektor HTML třídě AppHeader by 

// first parameter is the tag name and second parameter is the class for the new HTML element.
// tag name should always have hyphen(-). In this case, it is app-header. 
customElements.define("app-header", AppHeader);

Zde je kompletní app.js obsah:

class AppHeader extends HTMLElement { 
    constructor() {
        super();
        console.log("constructor called");
    }

    connectedCallback() {
        console.log("connectedCallback called");
       // creating a content to user to user
        this.innerHTML =
            "This is the header content rendered from app-header custom element";
    }

    disconnectedCallback() {
        console.log("disconnectedCallback called");
    }
}

// first parameter is the tag name & second parameter is the class for the new HTML element.
customElements.define("app-header", AppHeader); 

// this function is to demonstrate the disconnectedCallback lifecycle
function removeCustomElement() {
    document.querySelector("app-header").remove();
}

Zde je index.html kód:

<html>
    <head>
        <title>Custom Component</title>
    </head>

    <body>
        <h1>Custom Components</h1>
        <p>Lets learn how to create custom component.</p>

       <!-- Newly created HTML element with Plain JS -->
        <app-header></app-header> 

        <div style="margin-top:20px">
        <button onclick="removeCustomElement()">Remove Custom Element</button>
        </div>
        <script src="app.js"></script>
    </body>
</html>

Zde je výstup z prohlížeče:

Můžete vidět This is the header content rendered from app-header custom element je vykreslen z <app-header> součást/prvek. WOW, s Plain JS je vytvořena vlastní komponenta 🤯 🙌.

Pokud si všimnete záložky konzoly, můžete vidět, že jsou tam pouze 2 protokoly. První je constructor se zavolá a poté connectCallback . Ale kde je disconnectedCallback přihlásit?

Pokud si vzpomínáte, disconnectedCallback bude voláno, pouze když bude odstraněno z DOM.

Odebereme z DOM kliknutím na tlačítko Remove Custom Element .
Nyní můžete vidět disconnectedCallback v konzole a <app-header> obsah je z obsahu odstraněn.

Děkuji za přečtení článku. Další 3 specifikace prozkoumáme více v nadcházejícím článku.