Utilisation de scripts Java

10 meilleures caractéristiques en JavaScript

JavaScript-cadres modernes, bien sûr, ils savent comment toutes ces fonctions. Mais parfois , vous avez besoin de faire quelque chose sans le cadre. Pour une variété de raisons. Pour ce faire, ce qui est une collection de fonctions utiles.

10) addEvent ()

Sans aucun doute, l'outil le plus important dans la gestion des événements! Quelle que soit la version que vous utilisez, et par qui il a été écrit, il fait exactement ce qu'il dit dans le titre qu'elle attache à l'élément le gestionnaire d'événements.

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

Ce code a deux avantages - il est simple et cross-browser compatible.

Son principal inconvénient - en fait, il ne passe pas ce gestionnaire pour IE. Plus précisément, cela ne attachEvent.

Une solution de contournement simple pour cette

Pour transférer ce droit peut être remplacé par une ligne de addEvent correspondant à:

Cela permettra de résoudre le problème avec la transmission de la, mais le processeur ne peut pas être être supprimée car detachEvent devrait provoquer exactement la fonction qui a été transféré attachEvent.

Il y a deux façons de contourner ce problème:

1) retourne une fonction qui a été utilisé pour le gestionnaire d'objet:

  fonction addEvent (elem, evtype, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evtype, fn, false)
  retour fn
	 }

  IEFN = function () {fn.call (elem)} 
  elem.attachEvent ( 'on' + evtype, IEFN)
	 retour IEFN
 }

 fonction removeEvent (elem, evtype, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evtype, fn, false)
  retour
	 }
 
  elem.detachEvent ( 'on' + evtype, fn)
 } 

Il est utilisé de la manière suivante:

  gestionnaire function () { 
  alert (ce) 
 }
 var fn = addEvent (elem, "clic", gestionnaire)
 ...
 removeEvent (elem, "clic", fn) 

2) Vous ne pouvez pas utiliser ce gestionnaire d'événements du tout, et passer à travers un élément de circuit:

  fonction addEvent (elem, evtype, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evtype, fn, false)
  retour fn
	 }

  IEFN = function () {fn.call (elem)} 
  elem.attachEvent ( 'on' + evtype, IEFN)
	 retour IEFN
 }

 fonction removeEvent (elem, evtype, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evtype, fn, false)
  retour
	 }
 
  elem.detachEvent ( 'on' + evtype, fn)
 } 

Il est utilisé de la manière suivante:

  gestionnaire function () { 
  // Ne pas utiliser le présent, une variable qui fait référence à l'élément
  alert (elem) 
 }
 ...

9) onReady ()

Pour initialiser la page a été utilisé historiquement événement window.onload, qui est déclenché après que la page est complètement chargée et tous les objets sur elle: compteurs, images, etc.

Event OnDOMContentLoaded - un bien meilleur choix dans 99% des cas. Cet événement est déclenché dès que le document DOM est prêt, de télécharger des photos et d'autres ne modifient pas la structure de l'objet de document.

Ceci est très pratique car images peuvent être chargées pendant une longue période, et onDOMContentLoaded gestionnaire peut apporter les modifications nécessaires sur la page et l' initialisation des interfaces immédiatement, sans attendre le téléchargement complet.

le code suivant cross-browser peut être utilisé pour ajouter un gestionnaire:

  fonction bindReady (gestionnaire) {

	 var appelé = false

	 fonction prêt () {// (1)
		 si (appelé) retour
		 appelé = true
		 gestionnaire ()
	 }

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

		 // (3.1)
		 if (document.documentElement.doScroll && fenêtre == window.top) {
			 fonctionner tryScroll () {
				 si (appelé) retour
				 if (! document.body) retour
				 try {
					 document.documentElement.doScroll ( «gauche»)
					 prêt ()
				 } Catch (e) {
					 setTimeout (tryScroll, 0)
				 }
			 }
			 tryScroll ()
		 }

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

			 if (document.readyState === "complète") {
				 prêt ()
			 }
		 })
	 }

	 // (4)
  if (window.addEventListener)
  window.addEventListener ( «charge», prêt, false)
  else if (window.attachEvent)
  window.attachEvent ( 'onload', prêt)
  / * // Else (4.1)
  window.onload = prêt
	 * /
 } 

 readyList = []
 fonction onReady (gestionnaire) {
	 if (! readyList.length) {
		 bindReady (function () {
			 for (var i = 0; i <readyList.length; i ++) {
				 readyList [i] ()
			 }
		 })
	 }
	 readyList.push (gestionnaire)
 }

Utilisation:

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

8) getElementsByClass ()

À l'origine écrit non pas par personne en particulier. Beaucoup de développeurs ont écrit leur propre version et un tirage au sort est pas prouvé mieux que d'autres.

La fonction suivante utilise une méthode intégrée getElementsByClass, le cas échéant, à la recherche d'éléments dans leurs propres navigateurs, où cette méthode ne fonctionne pas.

  if (document.getElementsByClassName) {
 getElementsByClass = function (classList, noeud) { 
 retour (document noeud) .getElementsByClassName (classList)
 }
 } Else {
 getElementsByClass = function (classList, noeud) {
 noeud var = noeud ||  le document,
 list = node.getElementsByTagName ( '*'), 
 longueur = List.length, 
 classArray = classList.split (/ \ s + /), 
 les classes = classArray.length, 
 résultat = [], i, j
 for (i = 0; i <longueur; i ++) {
 pour (j = 0; j <classes; j ++) {
				 if (liste [i] .className.search ( '\\ b' + classArray [j] + '\\ b')! = -1) {
					 result.push (liste [i])
					 pause
				 }
			 }
		 }
	
		 return result
	 }
 }

classList - Liste des classes séparées par des espaces, les éléments dont doit être recherchée.

noeud - cadre de recherche, la recherche dans un site

Par exemple:

  var div = document.getElementById ( "mydiv")
 éléments = getElementsByClass ( 'classe2 de classe1', div) 

7) addClass () / removeClass ()

Les deux fonctions suivantes ajouter et supprimer des DOM classe d'éléments.

  addClass de fonction (o, c) {
  var re = new RegExp ( "(^ | \\ s)" + c + "(\\ s | $)", "g")
  if (re.test (o.className)) retour
  o.className = (o.className + "" + c) .replace (/ \ s + / g, "") .replace (/ (^ | $) / g, "")
 }
 
 removeClass de fonction (o, c) {
  var re = new RegExp ( "(^ | \\ s)" + c + "(\\ s | $)", "g")
  o.className = o.className.replace (re, "$ 1") remplacer (/ \ s + / g, "") (. .replace / (^ | de $) / g, "")
 } 

6) genouillère ()

Pour être honnête, probablement pour cette fonction il y a plus différentes options que serait autrement nécessaire.

Cette option est aucune façon il n'a pas la prétention d'être le Caractéristiques- "switch" universel, mais il le fait la plupart des fonctionnalités de montrer et de spryatyvaniya.

fonction toggle (), les paroles du peuple

  poste Basculer (el) {
  el.style.display = (el.style.display == 'none')?  '': 'None'
 }

Notez que dans la fonction est pas un mot sur l'affichage = 'block', au lieu d' un affichage vierge = ''. Une valeur vide signifie que les propriétés de décharge, à savoir, la propriété revient à la valeur spécifiée dans le CSS.

Ainsi, si la valeur d'affichage pour l'élément, tiré de CSS - none (l'élément est masqué par défaut), puis activez cette fonction ne fonctionnera pas.

Cette version propose toggle belle et simple, mais que d'autres lacunes rendent assez polyvalent.

5) insertAfter ()

Comme getElementsByClass, cette fonction est pour une raison pas dans la norme DOM. Peut-être, afin d'éviter la duplication des fonctionnalités, parce insertAfter mis en œuvre une seule ligne.

  fonction insertAfter (parent, noeud, referenceNode) {
  parent.insertBefore (noeud, referenceNode.nextSibling);
 }

4) InArray ()

Il est dommage qu'il ne soit pas intégré dans les fonctionnalités du DOM. Mais maintenant, nous avons la possibilité à tout moment d'insérer ces notes ici!

Pour trouver cette fonction utilise le === vérifié, qui recherche la comparaison exacte, sans plâtre.

Array.prototype.indexOf méthode est pas prise en charge dans tous les navigateurs, ainsi utilisé, si elle existe.

  InArray = Array.prototype.indexOf?
  fonction (arr, val) {
  retour arr.indexOf (val)! = -1
  }:
  fonction (arr, val) {
  var i = arr.length
  tandis que (i--) {
  if (arr [i] === val) return true
  }
  return false
  }

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

En javascript il n'y a aucun moyen de fonctionner normalement avec un cookie sans fonctionnalités supplémentaires. Je ne sais pas qui a conçu le document.cookie, mais fait très mal.

Par conséquent, les fonctions suivantes ou leurs analogues sont essentiels.

  // Retourne le cookie s'il y a ou non définie
 fonction getCookie (nom) {
	 var correspond = document.cookie.match (new RegExp (
	  "(?: ^ |;)" + Name.replace (/([\.$?* | {} \ (\) \ [\] \\\ / \ + ^]) / g, '\\ $ 1' ) + "= ([^] *)"
	 ))
	 retour des allumettes?  decodeURIComponent (matches [1]): undefined 
 }

 // Cookie uctanavlivaet
 fonction setCookie (nom, valeur, accessoires) {
	 props = accessoires ||  {}
	 var exp = props.expires
	 if (typeof exp == "nombre" && exp) {
		 var d = new Date ()
		 d.setTime (d.getTime () + exp * 1000)
		 exp = props.expires = d
	 }
	 if (exp && exp.toUTCString) {props.expires = exp.toUTCString ()}

	 value = encodeURIComponent (valeur)
	 var updatedCookie = name + "=" + valeur
	 for (var propName en accessoires) {
		 updatedCookie + = ";" + propName
		 var propValue = accessoires [propName]
		 if (propValue! == true) {updatedCookie + = "=" + propValue}
	 }
	 document.cookie = updatedCookie

 }

 // Supprime le cookie
 fonction deleteCookie (nom) {
	 setCookie (nom, null, {expire: -1})
 }

Arguments:

• Nom du cookie
• valeur valeur du cookie (chaîne)
• accessoires objet avec des propriétés supplémentaires pour définir le cookie:
  • biscuits délai d'expiration expire. Il est interprété différemment selon le type de:
    • Si le nombre de - le nombre de secondes avant.
    • Si l'objet est de type Date - la date d'expiration exacte.
    • Si expire dernier, le cookie sera supprimé.
    • Si expire est absent ou égal à 0, alors le cookie sera défini comme une session et disparaissent lorsque le navigateur est fermé.
  • path Chemin pour le cookie.
  • domaine de domaine pour cookie.
  • Transférez cookie sécurisé uniquement sur une connexion sécurisée.

Dernière, mais souvent utile: la fonction BYID

Il vous permet de travailler les mêmes fonctions dans la transmission DOM-nœud ou id.

  fonction BYID (noeud) {
  retour typeof noeud == 'string'?  document.getElementById (noeud): noeud
 }

Il utilise simple:

  fonction hide (node) {
  node = BYID (noeud)
  node.style.display = 'none'
 }

 fonction animateHide (noeud)
  node = BYID (noeud)
  quelque chose (noeud)
  hide (noeud)
 }

Ici, à la fois la fonction polymorphique, et permettre à noeud et son id, et a tout à fait commode, parce que permet de ne pas faire des changements inutiles noeud <-> id.