minlib.mjs - eine minimalistische JavaScript-Bibliothek

Das Modul ist eine Neuimplementierung. Die Vorlage stammt aus dem Jahre 2011 und ist unter /minlib-old/ noch verfügbar. Den Weg zu ihrer neuen Form habe ich in einem Blogpost zum Thema beschrieben.

• Kurzdokumentation
  • Allgemeines
  • HTTP-Zugriffe und Navigation
  • DOM-Zugriffsfunktionen
• Unit Testseite (Quelltext des Unit Testcodes)
• Quelltext von minlib.mjs
• Download von minlib.mjs (Verwendung unter der BSD-Lizenz)

Kurzdokumentation

Allgemeines

• deepCopy(data)
  Erzeugt eine vollständige Kopie des Datenobjekts data - im Ergebnis sind sämtliche Arrays und Objekte durch neue Instanzen ersetzt.

HTTP-Zugriffe und Navigation

• navigateTo(url="", fields={})
  Navigiert zu einer URL mit Hilfe eines POST-Requests. Die im Argument fields angegebenen Werte werden dabei als Parameter übergeben. Der Trick ist die "on the fly"-Konstruktion eines mittels POST zu versendenden Formulars, das die angegebenen Felder als versteckte Formularfelder enthält.

DOM-Zugriffsfunktionen

Diese Funktionen können als Abkürzungen sinnvoll sein, um den Code lesbar zu machen. Wo es sinnvoll ist, kann auch immer ein Kontext-Element angegeben werden, ab dem der Zugriff im DOM-Baum erfolgen soll. Außerdem wird eine Array-Instanz zurückgeliefert, wo potentiell mehr als ein Element geliefert werden kann - somit können auf das Ergebnis direkt die Array-Funktionen wie filter, map, reduce usw. angewandt werden.

• byId(id)
  Shortcut für document.getElementById(id).
• byName(name,context=document)
  Liefert das erste Element des Namens name. Während getElementsByName(name) nur auf das gesamte document angewendet werden kann, kann in byName auch ein Vaterknoten angegeben werden, von dem ab die Suche ausgeführt werden soll. Dies ist sinnvoll, wenn eine HTML-Seite mehrere Formulare enthält und ein Element des gegebenen Namens in einem bestimmten Formular gesucht wird.
• select(selector,context=document)
  Liefert das erste Element, das den CSS-Selektorausdruck selector erfüllt. Abkürzung für element.querySelector(selector)
• selectAll(selector,context=document)
  Liefert einen Array aller Elemente, die den CSS-Selektorausdruck selector erfüllen. Wie element.querySelectorAll(selector), aber das Ergebnis ist ein Array, so dass Funktionen wie filter usw. angewendet werden können.
• byTagName(tagname,context=document)
  Liefert einen Array aller Elemente mit dem angegebenen Elementnamen. Die Suche nach dem Elementname erfolgt case-insensitiv.
• byClass(className,context=document)
  Liefert einen Array aller Elemente mit dem angegebenen CSS-Klassennamen.
• byCondition(condition,context=document)
  Liefert einen Array aller Elemente, für welche die angegebene Bedingungsfunktion true liefert.
• selectParent(elem,selector)
  Liefert das erste Vaterelement, auf das der angegebene Selektor passt. Fast überflüssig, da es in der DOM-API die Elementfunktion closest() gibt. Diese beginnt jedoch die Prüfung auf den Selektorausdruck beim Element selbst, während selectParent beim Vaterelement beginnt.
• getParentByCondition(elem,condition)
  Liefert das erste Vorfahrenelement, für das die angegebene Bedingungsfunktion true liefert. Beginn der Suche beim Vaterelement.
• setClass(element,theClass)
  Fügt die CSS-Klasse theClass in den String element.className ein. Abkürzung für element.classList.add(theClass).
• resetClass(element,theClass)
  Entfernt die CSS-Klasse theClass aus dem String element.className. Abkürzung für element.classList.remove(theClass).
• toggleClass(element,theClass,force)
  Setzt oder entfernt die CSS-Klasse theClass aus dem String element.className. Das dritte Argument force ist optional. Wird es übergeben, so bestimmt sein Boolescher Wert, ob die Klasse gesetzt oder entfernt werden soll. Wird es nicht übergeben, so wird die Klasse abhängig vom aktuellen Zustand gesetzt oder entfernt.- Abkürzung für element.classList.toggle(theClass,force).
• hasClass(element,theClass)
  Prüft, ob das Element element die CSS-Klasse theClass hat. Abkürzung für element.classList.contains(theClass)
• setText(idOrNameOrNode,text)
  Setzt einen Text in ein input-Feld oder auch in ein beliebiges anderes Element (etwa einen div oder span).
• getText(idOrNameOrNode)
  Liest einen Text aus einem input-Feld oder einem beliebigen anderen Element (etwa einen div oder span).
• getElement(idOrNode)
  Wenn ein HTML-Element übergeben wird, wird dieses zurückgeliefert. Wenn ein String übergeben wird, wird das Element mit dieser ID zurückgeliefert. Gibt es kein solches, so wird schliesslich ein Element des angegebenen Namens gesucht. Nützlich, um Funktionen mit allgemeiner Schnittstelle anzubieten - also mit Parametern, die wahlweise ein Element oder eine Element-ID entgegennehmen. Nützlich für die Entwicklung eigener API-Funktionen, bei denen dem Aufrufer freigegeben wird, eine ID oder gleich das Element selbst zu übergeben.