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

Java-Skripte verwenden

JavaScript ist eine Prototyp-orientierte Szenario-Programmiersprache. Es ist ein Dialekt der ECMAScript-Sprache.

JavaScript wird häufig als eingebettete Sprache für den programmatischen Zugriff auf Anwendungsobjekte verwendet. Die breiteste Anwendung wird in Browsern als Skriptsprache gefunden, um Webseiten Interaktivität zu verleihen. Die Hauptmerkmale der Architektur: dynamisches Tippen, schwaches Tippen, automatische Speicherverwaltung, Prototyping-Programmierung, Funktionen als erstklassige Objekte. JavaScript wurde von vielen Sprachen beeinflusst, mit der Zielsetzung, die Sprache Java ähnlich zu machen, aber auch für Nicht-Programmierer. Die Sprache von JavaScript gehört keiner Firma oder Organisation, die sie 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

Moderne Javascript-Frameworks kennen natürlich alle diese Funktionen. Aber manchmal müssen Sie etwas ohne das Framework tun. Aus verschiedenen Gründen. Zu diesem Zweck ist diese Sammlung nützlicher Funktionen vorgesehen.

10) addEvent ()

Zweifellos das wichtigste Werkzeug beim Verwalten von Events! Unabhängig davon, welche Version Sie verwenden und wer es geschrieben hat, es tut, was es im Namen sagt: Fügt dem Element einen Event-Handler hinzu.

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

Dieser Code hat zwei Vorteile: Er ist einfach und browserübergreifend.

Der Hauptnachteil ist, dass dies nicht an den Handler für IE weitergegeben wird. Genauer gesagt, es AttachEvent nicht.

Eine einfache Arbeit um diese

Um das zu korrigieren, können Sie die entsprechende addEvent-Zeile durch ersetzen:

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

Dies löst das Problem mit der Übergabe, aber der Handler kann in keiner Weise entfernt werden. detachEvent sollte genau die Funktion aufrufen, die an attachEvent übergeben wurde.

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

1) Geben Sie die Funktion zurück, mit der der Handler zugeordnet wurde:

  Funktion addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false)
  zurückf
	 }

  ienn = function () {fn.call (elem)} 
  elem.attachEvent ('on' + evType, ifn)
	 zurückgeben
 }

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

Es wird so benutzt:

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

2) Sie können dies im Event-Handler überhaupt nicht verwenden, aber übergeben Sie das Element durch die Schließung:

  Funktion addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false)
  zurückf
	 }

  ienn = function () {fn.call (elem)} 
  elem.attachEvent ('on' + evType, ifn)
	 zurückgeben
 }

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

Es wird so benutzt:

  Funktionshandler () { 
  // benutze das nicht, sondern die Variable, die auf das Element verweist
  Alarm (Elem) 
 }
 ...

9) onReady ()

Um die Seite historisch zu initialisieren, wurde das Ereignis window.onload verwendet , das funktioniert, nachdem die Seite vollständig geladen wurde und alle darauf befindlichen Objekte: Zähler, Bilder usw.

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

Das ist sehr praktisch, weil Die Bilder können für eine lange Zeit geladen werden und der onDOMContentLoaded- Handler kann die notwendigen Änderungen auf der Seite vornehmen und die Schnittstellen direkt dort initialisieren, ohne auf den Download von allem zu warten.

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

  Funktion bindReady (Handler) {

	 var genannt = falsch

	 Funktion bereit () {// (1)
		 wenn (genannt) zurückkommen
		 genannt = wahr
		 Handler ()
	 }

	 if (document.addEventListener) {// (2)
		 document.addEventListener ("DOMContentLoaded", Funktion () {
			 bereit ()
		 }, falsch)
	 } sonst if (document.attachEvent) {// (3)

		 // (3.1)
		 if (Dokument.documentElement.doScroll && window == window.top) {
			 Funktion tryScroll () {
				 wenn (genannt) zurückkommen
				 if (! document.body) zurückgeben
				 versuche {
					 document.documentElement.doScroll ("links")
					 bereit ()
				 } fangen (e) {
					 setTimeout (tryScroll, 0)
				 }
			 }
			 tryScroll ()
		 }

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

			 if (document.readyState === "abgeschlossen") {
				 bereit ()
			 }
		 })
	 }

	 // (4)
  if (window.addEventListener)
  window.addEventListener ('load', bereit, falsch)
  sonst if (window.attachEvent)
  window.attachEvent ('onload', bereit)
  / * sonst // (4.1)
  window.onload = bereit
	 * /
 } 
 readyList = []
 Funktion onReady (Handler) {
	 if (! readyList.length) {
		 bindReady (Funktion () {
			 für (var i = 0; i <readyList.length; i ++) {
				 readyList [i] ()
			 }
		 })
	 }
	 readyList.push (Handler)
 }

Verwendung:

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

8) getElementsByClass ()

Anfangs wird es von niemandem speziell geschrieben. Viele Entwickler haben ihre eigenen Versionen geschrieben und die Auslosung erwies sich als nicht besser als der Rest.

Die folgende Funktion verwendet ggf. die integrierte Methode getElementsByClass und sucht in Browsern, in denen diese Methode nicht vorhanden ist, selbst nach den Elementen.

  if (document.getElementsByClassName) {
 getElementsByClass = function (classList, node) { 
 return (Knoten || Dokument) .getElementsByClassName (classList)
 }
 } sonst {
 getElementsByClass = function (classList, node) {
 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 ++) {
 für (j = 0; j <klassen; j ++) {
				 if (liste [i] .className.search ('\\ b' + klasseArray [j] + '\\ b')! = -1) {
					 result.push (Liste [i])
					 Pause
				 }
			 }
		 }
	
		 Ergebnis zurückgeben
	 }
 }

classList - Eine Liste von durch Leerzeichen getrennten Klassen, die Elemente, nach denen gesucht werden soll.

Knoten - Der Kontext der Suche, innerhalb dessen der Knoten suchen soll

Zum Beispiel:

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

7) addClass () / removeClass ()

Die folgenden zwei Funktionen fügen die DOM-Klasse des 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 (re, "$ 1"). replace (/ \ s + / g, "") .replace (/ (^ | $) / g, "")
 } 

6) toggle ()

Um ehrlich zu sein, gibt es wahrscheinlich mehr Möglichkeiten für diese Funktion, als es notwendig wäre.

Diese Option stellt in keiner Weise eine universelle "Switch" -Funktion dar, aber sie führt die grundlegende Funktionalität des Ein- und Ausblendens aus.


Funktion toggle (), Volkswörter

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

Beachten Sie, dass in der Funktion kein Wort über display = 'block' angezeigt wird , stattdessen wird die leere Wertanzeige = '' verwendet . Ein leerer Wert bedeutet ein Zurücksetzen der Eigenschaft, d.h. Die Eigenschaft kehrt zu dem in CSS angegebenen Wert zurück.

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

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

5) insertAfter ()

Wie getElementsByClass existiert diese Funktion aus irgendeinem Grund nicht im DOM-Standard. Vielleicht um Doppelarbeit zu vermeiden, weil insertAfter ist nur eine Zeile implementiert.

  Funktion insertAfter (parent, node, referenceNode) {
  parent.insertBefore (Knoten, referenceNode.nextSibling);
 }

4) inArray ()

Es ist bedauerlich, dass dies nicht Teil der integrierten Funktionalität des DOM ist. Aber jetzt haben wir die Möglichkeit, solche Bemerkungen immer einzufügen!

Für die Suche verwendet diese Funktion die Überprüfung === , die nach einem genauen Vergleich sucht, ohne die Typen zu übergeben.

Die Methode Array.prototype.indexOf wird nicht in allen Browsern unterstützt, daher wird sie verwendet, sofern sie existiert.

  inArray = Array.prototype.IndexOf?
  Funktion (arr, val) {
  Rückgabe arr.IndexOf (val)! = -1
  }:
  Funktion (arr, val) {
  var i = arr.length
  während (i--) {
  if (arr [i] === val) gibt wahr 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 ordnungsgemäß zu arbeiten. Ich weiß nicht, wer das document.cookie entworfen hat , aber es ist extrem schlecht.

Daher sind die folgenden Funktionen oder ihre Analoga einfach notwendig.

  // gibt Cookie zurück, wenn oder nicht definiert ist
 Funktion getCookie (Name) {
	 var matches = document.cookie.match (neue RegExp (
	  "(?: ^ |;)" + name.replace (/([\.$?* | {} \ (\) \ [\] \ / \ + ^]) / g, '\\ $ 1' ) + "= ([^;] *)"
	 ))
	 Treffer zurückgeben?  decodeURIComponent (stimmt mit [1] überein): undefiniert 
 }

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

	 Wert = encodeURIComponent (Wert)
	 var updatedCookie = Name + "=" + Wert
	 für (var propName in Requisiten) {
		 updatedCookie + = ";" + propName
		 var propValue = Stützen [propName]
		 if (propValue! == true) {aktualisierterCookie + = "=" + propValue}
	 }
	 document.cookie = aktualisiertCookie

 }

 // lösche den Cookie
 Funktion deleteCookie (Name) {
	 setCookie (Name, null, {läuft ab: -1})
 }

Argumente:

  • Name des Cookies
  • Wert- Cookie-Wert (Zeichenfolge)
  • props Objekt mit zusätzlichen Eigenschaften zum Setzen eines Cookies:
    • läuft die Cookie- Ablaufzeit ab. Je nach Typ unterschiedlich interpretiert:
      • Wenn die Anzahl die Anzahl der Sekunden vor dem Ablauf ist.
      • Wenn das Objekt vom Typ Date das genaue Ablaufdatum ist.
      • Wenn es in der Vergangenheit abläuft, wird der Cookie gelöscht.
      • Wenn expires nicht vorhanden oder gleich 0 ist, wird der Cookie als Sitzung festgelegt und verschwindet, wenn der Browser geschlossen wird.
    • Pfad Pfad für Cookie.
    • Domäne Domäne für Cookie.
    • Sicher Senden Sie nur Cookies über eine sichere Verbindung.

Zuletzt aber oft nützlich: byId

Es ermöglicht, dass die Funktion beim Übergeben eines DOM-Knotens oder dessen ID gleich funktioniert.

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

Es wird einfach verwendet:

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

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

Hier sind beide Funktionen polymorph, sie erlauben sowohl den Knoten als auch seine ID, was sehr bequem ist, weil ermöglicht Ihnen, keine unnötigen Conversions zu machen Knoten <-> ID.