This page has been robot translated, sorry for typos if any. Original content here.

Java-Skripts verwenden

JavaScript ist eine prototypenorientierte Skriptprogrammiersprache. Es ist ein Dialekt von ECMAScript.

JavaScript wird normalerweise als eingebettete Sprache für den programmgesteuerten Zugriff auf Anwendungsobjekte verwendet. Wird in Browsern am häufigsten als Skriptsprache verwendet, um Interaktivität mit Webseiten zu erzielen. Die wichtigsten architektonischen Merkmale: dynamische Typisierung, schwache Typisierung, automatische Speicherverwaltung, prototypische Programmierung, Funktionen als erstklassige Objekte. JavaScript wurde von vielen Sprachen beeinflusst. Ziel der Entwicklung war es, die Sprache wie Java aussehen zu lassen, aber für Nicht-Programmierer einfach zu verwenden. JavaScript besitzt keine Firma oder Organisation, was es von einer Reihe von Programmiersprachen unterscheidet, die in der Webentwicklung verwendet werden. Der Name "JavaScript" ist eine eingetragene Marke der Oracle Corporation .

Top 10 JavaScript-Funktionen

Natürlich können moderne JavaScript-Frameworks all diese Funktionen ausführen. Aber manchmal müssen Sie etwas ohne Rahmen tun. Aus verschiedenen gründen. Zu diesem Zweck ist diese Sammlung nützlicher Funktionen vorgesehen.

10) addEvent ()

Zweifellos das wichtigste Werkzeug zur Verwaltung von Ereignissen! Unabhängig davon, welche Version Sie verwenden und von wem sie geschrieben wird, tut sie, was in ihrem Namen heißt: Sie fügt dem Element einen Event-Handler hinzu.

  Funktion addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false);
	 }
	 else if (elem.attachEvent) {
		 elem.attachEvent ('on' + evType, fn)
	 }
	 sonstiges
		 elem ['on' + evType] = fn
	 }
 }

Dieser Code hat zwei Vorteile - er ist einfach und browserübergreifend.

Sein Hauptnachteil ist, dass es dies nicht an den Handler für IE weiterleitet. Genauer gesagt, dies bindet kein Ereignis.

Einfache Abhilfe dafür

Um dies zu übergeben, können Sie die entsprechende Zeichenfolge addEvent durch Folgendes ersetzen:

elem.attachEvent("on"+evType, function() { fn.apply(elem) })

Dadurch wird das Problem mit der Übertragung gelöst, der Handler kann jedoch in keiner Weise entfernt werden, da detachEvent muss genau die Funktion aufrufen, die an attachEvent übergeben wurde.

Es gibt zwei Möglichkeiten, dieses Problem zu umgehen:

1) Die Funktion zurückgeben, mit der der Handler zugewiesen wurde:

  Funktion addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, Fn, False)
  Rückkehr Fn
	 }

  iefn = function () {fn.call (elem)} 
  elem.attachEvent ('on' + evType, iefn)
	 kehren zurück
 }

 function removeEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evType, fn, false)
  zurückkehren
	 }
 
  elem.detachEvent ('on' + evType, fn)
 } 

Verwendet wie folgt:

  Funktionshandler () { 
  Alarm (dies) 
 }
 var fn = addEvent (elem, "click", handler)
 ...
 removeEvent (elem, "click", fn) 

2) Sie können dies im Event-Handler überhaupt nicht verwenden, sondern das Element durch einen Abschluss führen:

  Funktion addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, Fn, False)
  Rückkehr Fn
	 }

  iefn = function () {fn.call (elem)} 
  elem.attachEvent ('on' + evType, iefn)
	 kehren zurück
 }

 function removeEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evType, fn, false)
  zurückkehren
	 }
 
  elem.detachEvent ('on' + evType, fn)
 } 

Verwendet wie folgt:

  Funktionshandler () { 
  // Verwenden Sie nicht das, sondern eine Variable, die sich auf das Element bezieht
  Alarm (elem) 
 }
 ...

9) onReady ()

Zur Initialisierung der Seite wurde das window.onload- Ereignis historisch verwendet, das ausgelöst wird, nachdem die Seite und alle darauf befindlichen Objekte vollständig geladen wurden: Zähler, Bilder usw.

Das onDOMContentLoaded- Ereignis ist in 99% der Fälle eine viel bessere Wahl. Dieses Ereignis wird ausgelöst, sobald das DOM-Dokument bereit ist, bevor Bilder und andere Objekte hochgeladen werden, die sich nicht auf die Dokumentstruktur auswirken.

Das ist sehr praktisch, weil Bilder können lange geladen werden, und der onDOMContentLoaded- Handler kann die erforderlichen Änderungen auf der Seite vornehmen und die Schnittstellen direkt dort initialisieren, ohne auf den Abschluss des Downloads zu warten.

Um einen Handler hinzuzufügen, können Sie den folgenden browserübergreifenden Code verwenden:

  Funktion bindReady (Handler) {

	 var aufgerufen = false

	 Funktion bereit () {// (1)
		 wenn (angerufen) zurückkehren
		 Genannt = wahr
		 Handler ()
	 }

	 if (document.addEventListener) {// (2)
		 document.addEventListener ("DOMContentLoaded", function () {
			 fertig ()
		 }, falsch)
	 } else if (document.attachEvent) {// (3)

		 // (3.1)
		 if (document.documentElement.doScroll && window == window.top) {
			 Funktion tryScroll () {
				 wenn (angerufen) zurückkehren
				 wenn (! document.body) zurückkehren
				 versuche es
					 document.documentElement.doScroll ("left")
					 fertig ()
				 } catch (e) {
					 setTimeout (tryScroll, 0)
				 }
			 }
			 tryScroll ()
		 }

		 // (3.2)
		 document.attachEvent ("onreadystatechange", function () {

			 if (document.readyState === "vollständig") {
				 fertig ()
			 }
		 })
	 }

	 // (4)
  if (window.addEventListener)
  window.addEventListener ('load', ready, false)
  else if (window.attachEvent)
  window.attachEvent ('onload', bereit)
  / * else // (4.1)
  window.onload = fertig
	 * /
 } 
 readyList = []
 Funktion onReady (Handler) {
	 if (! readyList.length) {
		 bindReady (function () {
			 for (var i = 0; i <readyList.length; i ++) {
				 readyList [i] ()
			 }
		 })
	 }
	 readyList.push (Handler)
 }

Verwenden:

 onReady (Funktion () {
  // ...
 })

8) getElementsByClass ()

Ursprünglich von niemandem speziell geschrieben. Viele Entwickler haben ihre eigenen Versionen geschrieben und die Auslosung lief nicht besser als der Rest.

Die folgende Funktion verwendet die integrierte Methode getElementsByClass (sofern vorhanden) und sucht unabhängig in den Browsern nach Elementen, in denen diese Methode nicht vorhanden ist.

  if (document.getElementsByClassName) {
 getElementsByClass = Funktion (Klassenliste, Knoten) { 
 return (node ​​|| document) .getElementsByClassName (classList)
 }
 } else {
 getElementsByClass = Funktion (Klassenliste, Knoten) {
 var Knoten = Knoten ||  Dokument,
 list = node.getElementsByTagName ('*'), 
 length = list.length, 
 classArray = classList.split (/ \ s + /), 
 classes = classArray.length, 
 Ergebnis = [], i, j
 für (i = 0; i <Länge; i ++) {
 for (j = 0; j <Klassen; j ++) {
				 if (liste [i] .className.search ('\\ b' + classArray [j] + '\\ b')! = -1) {
					 result.push (liste [i])
					 brechen
				 }
			 }
		 }
	
		 Ergebnis zurückgeben
	 }
 }

classList - Eine durch Leerzeichen getrennte Liste von Klassen, mit der nach Elementen gesucht werden soll.

Node - Suchkontext, in dem der Knoten gesucht werden soll

Zum Beispiel:

  var div = document.getElementById ("mydiv")
 elements = getElementsByClass ('class1 class2', div) 

7) addClass () / removeClass ()

Die folgenden zwei Funktionen fügen der DOM-Klasse eines Elements hinzu und entfernen sie.

  Funktion addClass (o, c) {
  var re = new RegExp ("(^ | \\ s)" + c + "(\\ s | $)", "g")
  if (re.test (o.className)) zurückgeben
  o.className = (o.className + "" + c) .replace (/ \ s + / g, "") .replace (/ (^ | $) / g, "")
 }
 
 Funktion removeClass (o, c) {
  var re = new RegExp ("(^ | \\ s)" + c + "(\\ s | $)", "g")
  o.className = o.className.replace (zu "$ 1"). Ersetzen Sie (/ \ s + / g, "") .replace (/ (^ | $) / g, "")
 } 

6) Toggle ()

Um ehrlich zu sein, gibt es wahrscheinlich mehr verschiedene Optionen als nötig.

Diese Option beansprucht er keinesfalls als universelle Funktion "Schalter", er führt jedoch die grundlegende Funktionalität des Anzeigens und Verbergens aus.


Funktion Toggle (), Volkswörter

  Funktionsumschaltung (el) {
  el.style.display = (el.style.display == 'none')?  '': 'none'
 }

Bitte beachten Sie, dass es in der Funktion kein Wort über display = 'block' gibt , stattdessen ist der leere Wert display = '' . Ein leerer Wert bedeutet das Zurücksetzen der Eigenschaft, d. H. Die Eigenschaft kehrt zu dem im CSS angegebenen Wert zurück.

Wenn der Anzeigewert für dieses Element jedoch aus CSS entnommen ist (das Element ist standardmäßig ausgeblendet), funktioniert diese Umschaltfunktion nicht.

Diese Version der Toggle-Funktion ist schön und einfach, aber dies und einige andere Mängel machen sie nicht universell genug.

5) insertAfter ()

Wie bei getElementsByClass gehört diese Funktion aus irgendeinem Grund nicht zum DOM-Standard. Es ist möglich, eine doppelte Funktionalität zu vermeiden, da insertAfter wird in nur einer Zeile implementiert.

  Funktion insertAfter (Parent, Node, ReferenceNode) {
  parent.insertBefore (node, referenceNode.nextSibling);
 }

4) inArray ()

Leider ist dies nicht Teil der integrierten DOM-Funktionalität. Aber jetzt haben wir die Möglichkeit, solche Kommentare immer einzufügen!

Für die Suche verwendet diese Funktion die Prüfung === , die durch exakten Vergleich ohne Typumwandlung sucht.

Die Array.prototype.indexOf- Methode wird nicht in allen Browsern unterstützt. Sie wird daher verwendet, wenn sie vorhanden ist.

  inArray = Array.prototype.indexOf?
  Funktion (arr, val) {
  return arr.indexOf (val)! = -1
  }:
  Funktion (arr, val) {
  var i = Arretlänge
  während (i--) {
  if (arr [i] === val) gibt true zurück
  }
  false zurückgeben
  }

3, 2 und 1) getCookie (), setCookie (), deleteCookie ()

In Javascript gibt es keine Möglichkeit, mit Cookies ohne zusätzliche Funktionen zu arbeiten. Ich weiß nicht, wer die document.cookie entworfen hat , aber es wurde extrem schlecht gemacht.

Daher sind die folgenden Funktionen oder deren Analoga einfach erforderlich.

  // gibt ein Cookie zurück, wenn es oder nicht definiert ist
 Funktion getCookie (Name) {
	 var matches = document.cookie.match (neues RegExp (
	  "(?: ^ |;)" + name.replace (/(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\; ) + "= ([^;] *)"
	 ))
	 Rückkehrspiele?  decodeURIComponent (entspricht [1]): undefiniert 
 }

 // setzt den Cookie
 Funktion setCookie (Name, Wert, Requisiten) {
	 Requisiten = Requisiten ||  {}
	 var exp = props.expires
	 if (typeof exp == "number" && exp) {
		 var d = neues Datum ()
		 d.setTime (d.getTime () + exp * 1000)
		 exp = props.expires = d
	 }
	 if (exp && exp.toUTCString) {props.expires = exp.toUTCString ()}

	 value = encodeURIComponent (value)
	 var updatedCookie = name + "=" + value
	 für (var propName in Requisiten) {
		 updatedCookie + = ";" + propName
		 var propValue = Requisiten [propName]
		 if (propValue! == true) {updatedCookie + = "=" + propValue}
	 }
	 document.cookie = updatedCookie

 }

 // Cookie löschen
 Funktion deleteCookie (Name) {
	 setCookie (name, null, {verfällt: -1})
 }

Argumente:

  • Name Cookie Name
  • Wert Wert Cookie (String)
  • Objekt mit zusätzlichen Eigenschaften zum Setzen von Cookies:
    • Läuft die Cookie-Ablaufzeit ab. Es wird je nach Typ unterschiedlich interpretiert:
      • Wenn die Anzahl die Anzahl der Sekunden vor dem Ablauf ist.
      • Wenn das Date-Objekt das genaue Ablaufdatum ist.
      • Wenn abgelaufen ist, wird der Cookie gelöscht.
      • Wenn Ablaufen fehlen oder gleich 0 sind, wird der Cookie als Sitzung festgelegt und beim Schließen des Browsers ausgeblendet.
    • path Der Pfad für den Cookie.
    • Domain Domain für Cookie.
    • sicher Senden Sie Cookies nur über eine sichere Verbindung.

Zuletzt aber oft nützlich: byId-Funktion

Dadurch kann die Funktion beim Übertragen eines DOM-Knotens oder seiner ID auf dieselbe Weise arbeiten.

  Funktion byId (Knoten) {
  Rückgabetyp des Knotens == 'Zeichenfolge'?  document.getElementById (Knoten): Knoten
 }

Einfach verwendet:

  Funktion ausblenden (Knoten) {
  node = byId (node)
  node.style.display = 'none'
 }

 Funktion animateHide (Knoten)
  node = byId (node)
  etwas (Knoten)
  verstecken (Knoten)
 }

Hier sind beide Funktionen polymorph, sie erlauben sowohl den Knoten als auch seine id, was durchaus bequem ist, da ermöglicht es Ihnen, keine unnötigen Transformationsknoten <-> id vorzunehmen.