Bibliothek mit Objekt erstellen

Natürlich können wir unsere Bibliothek auch mit einem oder mehreren Objekten ausstatten. Für diesen Fall habe ich eine neue, externe Datei angelegt namens: bib_oop.js Wo genau der Vorteil ist, weiß ich im Moment noch nicht aber ich werde parallel beide Dateien erweitern.

Nachteil: Wenn wir mit einem Objekt arbeiten, wird die Syntax ein kleinbisschen länger.
Ansonsten bleibt alles genauso wie unter: Bibliothek erstellen.

Aber sehen wir uns doch mal den Code genauer an.
Was uns jetzt noch fehlt ist die Initialisierung des Objektes getObj(): Das war es dann auch schon gewesen. Mit bib sprechen wir unser Objekt an und mit elem() rufen wir die Methode von bib auf.
Natürlich ändert sich die Syntax auf:
onclick="bib.elem( '#ausgabe' ).innerText = bib.elem( '#buttonid' ).name"

Zum Vergleich unter Bibliothek erstellen:
onclick="getObj( '#ausgabe' ).innerText = getObj( '#buttonid' ).name"

Wenn Ihr Anregungen oder Kommentare habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code

HTML:

<div id="target">
	<span>Der Name des Buttons ist:</span><br>
	<div id="ausgabe" class="fett commentar"></div>
</div>
...
<button id="buttonid" class="ancor_button" name="buttonname"
onclick=" bib.elem('#ausgabe').innerText = bib.elem('#buttonid').name; ">
Gib mir meinen Namen</button>





CSS:

.commentar {
    color: rgba(112, 175, 4, 1);
}

.fett {
    font-weight: 600;
}



JavaScript: bib_oop.js:

function getObj(){
	// die Methode elem übernimmt an dieser Stelle die Arbeit
	this.elem =  function( identifier ) {
		// Element speichern
		const myElem = document.querySelectorAll( identifier );
		
		// Rückgabe des Elementes
		if ( myElem.length === 1 ) { 
			// Element ist eindeutig => ID oder 
			// es wurde nur ein Element gefunden
			return myElem[0];
		} else { 
			// Mehrere Elemente vorhanden => Rückgabe Array
			return myElem;
		}
	};
}

// Initialisierung des Objektes getObj()
const bib = new getObj();