Der Einsatz von Java-Skripten

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

JavaScript ist allgemein als eingebettete Sprache für programmatischen Zugriff auf Anwendungsobjekte verwendet. Die am weitesten verbreitete Browser wie Skriptsprache, um interaktive Web-Seiten zu machen. Die wichtigsten architektonischen Besonderheiten: dynamische Typisierung schwache Typisierung, automatische Speicherverwaltung, Prototyp-basierte Programmierung, Funktion als First-Class-Objekte. Auf JavaScript von vielen Sprachen beeinflusst wurde, war das Design Ziel , eine Sprache ähnlich wie Java, aber zugleich einfach zu bedienen nonprogrammer zu machen. JavaScript - Sprache besitzen keine Unternehmen oder eine Organisation , die es von einer Reihe von Programmiersprachen verwendet in Web - Entwicklung unterscheidet. Der Name «JavaScript» ist ein eingetragenes Warenzeichen der Oracle Corporation.

10 besten Eigenschaften in JavaScript

Moderne JavaScript-Frameworks, natürlich, sie wissen , wie all diese Funktionen. Aber manchmal braucht man etwas , ohne den Rahmen zu tun. Aus einer Vielzahl von Gründen. Um dies zu tun, und dies ist eine Sammlung von nützlichen Funktionen.

10) addEvent ()

Zweifellos das wichtigste Werkzeug bei der Verwaltung der Ereignisse! Unabhängig davon, welche Version Sie verwenden, und von wem wurde es geschrieben, es tut genau das, was sie sagt im Titel, den sie auf das Element legt die Event-Handler.

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

Dieser Code hat zwei Vorteile - es ist einfach und Cross-Browser kompatibel.

Sein Hauptnachteil - in der Tat ist es nicht die Prozedur für IE passieren. Genauer gesagt, das tut attachEvent.

Eine einfache Abhilfe für dieses

Um dieses Recht übertragen kann durch eine entsprechende addEvent Linie ersetzt werden, um:

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

Dadurch wird das Problem mit der Übertragung der dieses Problem zu lösen, aber der Prozessor nicht entfernt werden kann, weil detachEvent sollte dazu führen, genau die Funktion, die attachEvent übertragen wurde.

Es gibt zwei Möglichkeiten, um dieses Problem:

1) gibt eine Funktion, die für den Zweck Handler verwendet:

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

  iefn = function () {fn.call (ELEM)} 
  elem.attachEvent ( 'auf' + evType, iefn)
	 Rückkehr iefn
 }

 Funktion removeEvent (Elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evType, fn, false)
  Rückkehr
	 }
 
  elem.detachEvent ( 'auf' + evType, fn)
 } 

Es wird wie folgt verwendet:

  Funktion Handler () { 
  Alarm (this) 
 }
 var fn = addEvent (Elem, "Klick", Handler)
 ...
 removeEvent (Elem, "Klick", fn) 

2) Sie können diese Ereignishandler verwenden überhaupt, und durch ein Schaltungselement:

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

  iefn = function () {fn.call (ELEM)} 
  elem.attachEvent ( 'auf' + evType, iefn)
	 Rückkehr iefn
 }

 Funktion removeEvent (Elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evType, fn, false)
  Rückkehr
	 }
 
  elem.detachEvent ( 'auf' + evType, fn)
 } 

Es wird wie folgt verwendet:

  Funktion Handler () { 
  // Verwenden Sie das nicht, eine Variable, die auf das Element verweist
  alert (ELEM) 
 }
 ...

9) onReady ()

So initialisieren wurde die Seite historisch window.onload Ereignis verwendet, der ausgelöst wird , nachdem die Seite vollständig geladen ist und alle Objekte auf sie: Zähler, Bilder, etc.

OnDOMContentLoaded Ereignis - eine viel bessere Wahl in 99% der Fälle. Dieses Ereignis wird ausgelöst, sobald das DOM-Dokument ist bereit, um Bilder hochzuladen und andere nicht die Struktur des Dokumentobjekts zu beeinflussen.

Dies ist sehr praktisch, weil Bilder können für eine lange Zeit geladen werden, und onDOMContentLoaded Handler die notwendigen Änderungen auf der Seite zu machen und Schnittstellen sofort initialisieren, ohne für die gesamte Download warten.

folgende Cross-Browser-Code kann verwendet werden, um einen Handler hinzuzufügen:

  Funktion bindReady (Handler) {

	 var genannt = false

	 Funktion bereit () {// (1)
		 if (genannt) Rückkehr
		 genannt = true
		 Handler ()
	 }

	 if (document.addEventListener) {// (2)
		 document.addEventListener ( "DOMContentLoaded", function () {
			 bereit ()
		 }, False)
	 } Else if (document.attachEvent) {// (3)

		 // (3.1)
		 if (document.documentElement.doScroll && Fenster == window.top) {
			 funktionieren tryScroll () {
				 if (genannt) Rückkehr
				 if (! document.body) Rückkehr
				 try {
					 document.documentElement.doScroll ( "links")
					 bereit ()
				 } Catch (e) {
					 setTimeout (tryScroll, 0)
				 }
			 }
			 tryScroll ()
		 }

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

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

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

Verwendung:

 onReady (function () {
  // ...
 })

8) getElementsByClass ()

Ursprünglich insbesondere nicht von jedermann geschrieben. Viele Entwickler schrieb ihre eigene Version und ein Unentschieden ist nicht bewiesen, besser als andere.

Die folgende Funktion verwendet eine integrierte Methode getElementsByClass, falls vorhanden, und der Suche nach Elementen in ihrem eigenen Browser, wobei dieses Verfahren nicht der Fall ist.

  if (document.getElementsByClassName) {
 getElementsByClass = function (classlist, node) { 
 return (Knoten || Dokument) .getElementsByClassName (classlist)
 }
 } Else {
 getElementsByClass = function (classlist, node) {
 var node = Knoten ||  Dokument,
 list = node.getElementsByTagName ( '*'), 
 length = List.length, 
 classArray = classList.split (/ \ s + /), 
 Klassen = classArray.length, 
 result = [], i, j
 for (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])
					 Pause
				 }
			 }
		 }
	
		 Rückgabeergebnis
	 }
 }

classlist - Liste der Klassen durch Leerzeichen getrennt, die Elemente , aus denen gesucht werden muss.

Knoten - Suchkontext, Suche innerhalb einer Website

Zum Beispiel:

  var div = document.getElementById ( "mydiv")
 Elemente = getElementsByClass ( 'klasse1 klasse2', div) 

7) addClass () / removeClass ()

Die nächsten beiden Funktionen hinzufügen und DOM-Element-Klasse entfernen.

  Funktion addClass (o, c) {
  var re = new RegExp ( "(^ | \\ s)" + c + "(\\ s | $)", "g")
  if (re.test (o.className)) return
  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") ersetzen (/ \ s + / g, "") (. .replace / (^ | $) / g, "")
 } 

6) Toggle ()

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

Diese Option ist nicht so, wie er nicht behauptet hat die universelle Features- "Schalter" zu sein, aber er hat die meisten der Funktionalität zeigt und spryatyvaniya.


Funktion Toggle (), die Worte der Menschen

  Funktion Knebel (el) {
  el.style.display = (el.style.display == 'none')?  '': 'Keine'
 }

Beachten Sie, dass in der Funktion kein Wort über das Display = "Block", stattdessen ein leeres Display = ''. Ein leerer Wert bedeutet, dass die Entladungseigenschaften, das heißt, die Eigenschaft gibt den Wert in dem CSS angegeben.

Wenn also der Anzeigewert für das Element, genommen von CSS - keine (das Element ist standardmäßig ausgeblendet), schalten Sie dann wird diese Funktion nicht.

Diese Version bietet wechseln schön und einfach, aber dass einige andere Mängel machen es vielseitig genug.

5) insert ()

Als getElementsByClass ist diese Funktion aus irgendeinem Grund nicht in der DOM - Standard. Vielleicht, um Doppelfunktionen zu vermeiden, weil insert implementiert nur eine Zeile.

  Funktion insert (Eltern, Knoten, referenceNode) {
  parent.insertBefore (Knoten, referenceNode.nextSibling);
 }

4) InArray ()

Es ist schade, dass es nicht eine integrierte Funktionalität des DOM ist. Aber jetzt haben wir die Möglichkeit, jederzeit diese Hinweise hier einfügen!

Für diese Funktion die geprüft === verwendet, die für den exakten Vergleich sucht, ohne Gips.

Array.prototype.indexOf Methode in allen Browsern nicht unterstützt wird, so verwendet, wenn es vorhanden ist .

  InArray = Array.prototype.indexOf?
  Funktion (arr, val) {
  Rückkehr arr.indexOf (val)! = -1
  }:
  Funktion (arr, val) {
  var i = arr.length
  während (i--) {
  if (arr [i] === val) return true
  }
  return false
  }

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

In JavaScript gibt es keine Möglichkeit mit einem Cookie zu arbeiten normalerweise ohne zusätzliche Funktionen. Ich weiß nicht , wer die document.cookie entworfen, aber extrem schlecht gemacht.

Daher sind die folgenden Funktionen oder deren Analoga wesentlich.

  // Gibt das Cookie, wenn es oder nicht definiert
 Funktion getCookie (name) {
	 var entspricht = document.cookie.match (new RegExp (
	  "(?: ^ |;)" + Name.replace (/([\.$?* | {} \ (\) \ [\] \\\ / \ + ^]) / g, '\\ $ 1' ) + "= ([^] *)"
	 ))
	 Rückspiele?  decodeURIComponent (treffer [1]): undefined 
 }

 // Plätzchen uctanavlivaet
 Funktion setCookie (name, value, Requisiten) {
	 Requisiten = Requisiten ||  {}
	 var exp = props.expires
	 if (typeof exp == "number" && exp) {
		 var d = new Date ()
		 d.setTime (d.getTime () + exp * 1000)
		 exp = props.expires = d
	 }
	 if (exp && exp.toUTCString) {props.expires = exp.toUTCString ()}

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

 }

 // Löscht das Cookie
 Funktion deleteCookie (name) {
	 setCookie (Name, null, {gültig bis: -1})
 }

Argumente:

  • Name Cookie - Namen
  • Wert Cookie - Wert (string)
  • Requisiten Objekt mit zusätzlichen Eigenschaften des Cookie zu setzen:
    • Cookie Ablaufzeit abgelaufen ist . Es wird unterschiedlich interpretiert, abhängig von der Art der:
      • Wenn die Zahl der - die Anzahl der Sekunden vor.
      • Ist das Objekt vom Typ Datum - der genaue Ablaufdatum.
      • Wenn im letzten abgelaufen, wird das Cookie gelöscht.
      • Wenn abgelaufen ist abwesend oder gleich 0 ist, dann wird das Cookie als Session gesetzt werden und verschwinden, wenn der Browser geschlossen wird.
    • Pfad Pfad für das Cookie.
    • Domain - Domain für Cookie.
    • Leiten Sie sicheres Cookie nur auf eine sichere Verbindung.

Letzte, aber oft nützlich: function byId

Es ermöglicht Ihnen die gleichen Funktionen bei der Übertragung DOM-Knoten oder die ID zu arbeiten.

  Funktion byId (Knoten) {
  Rückkehr typeof Knoten == 'string'?  document.getElementById (Knoten): Knoten
 }

Es verwendet einfach:

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

 Funktion animateHide (Knoten)
  Knoten = byId (Knoten)
  etwas (Knoten)
  hide (Knoten)
 }

Hier sind sowohl polymorphe Funktion und erlauben Knoten und seine ID und hat sehr bequem, weil machen lässt keine unnötigen Änderungen Knoten <-> id.