Différences

Ci-dessous, les différences entre deux révisions de la page.

--- slam4:richclient:angularjs:prerequis [2015/01/21 01:05] – [Portée et fonctions] jcheron
+++ slam4:richclient:angularjs:prerequis [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 93: / Ligne 93: @@
 </sxh>
-Exemple :
+**Exemple :**
+La variable locale nom (Mozilla) est stockée dans la variable maFonction, correspondant à créerFonction()
 <sxh javascript>
 function créerFonction() {
@@ Ligne 105: / Ligne 107: @@
 var maFonction = créerFonction();
 maFonction();
+</sxh>
+==== Classe et encapsulation ====
+Il est possible de définir une fonction publique accédant à des fonctions et des variables privées en utilisant des closures. Cette façon de procéder est également connue comme le patron de conception module, et permet de créer des classes :
+<sxh javascript;title:Une classe pour créer des compteurs>
+var creerCompteur = function() {
+  var compteurPrivate = 0;
+  function changeValeur(val) {
+    compteurPrivate += val;
+  }
+  return {
+    increment: function() {
+      changeValeur(1);
+    },
+    decrement: function() {
+      changeValeur(-1);
+    },
+    valeur: function() {
+      return compteurPrivate;
+    }
+  };
+};
+</sxh>
+**Utilisation de la classe creerCompteur :**
+<sxh javascript;title:Instanciations de compteurs>
+var compteur1 = creerCompteur();
+var compteur2 = creerCompteur();
+alert(compteur1.valeur()); /* Affiche 0 */
+compteur1.increment();
+compteur1.increment();
+alert(compteur1.valeur()); /* Affiche 2 */
+compteur1.decrement();
+alert(compteur1.valeur()); /* Affiche 1 */
+alert(compteur2.valeur()); /* Affiche 0 */
+</sxh>
+==== Prototype ====
+Mais les closures sont coûteuse (en mémoire et temps d'exécution), il est donc préférable d'implémenter l'équivalent en utilisant le prototype :\\
+Par contre, dans ce cas, la variable compteur est redevenue publique.
+<sxh javascript>
+function creerCompteur() {
+  this.compteur= 0;
+}
+creerCompteur.prototype = {
+  decrement: function() {
+    this.compteur--;
+  },
+  increment: function() {
+    this.compteur++;
+  },
+  valeur: function() {
+    return this.compteur;
+  }
+};
+</sxh>
+Utilisation de la classe et instanciation d'un objet avec l'opérateur **new** :
+<sxh javascript>
+	var compteur=new creerCompteur();
+	compteur.increment();
+	alert(compteur.compteur);//Affiche 1 -> accès direct à compteur possible car il est public
 </sxh>
 ===== JSON =====
@@ Ligne 155: / Ligne 220: @@
     }
 ]
+</sxh>
+===== Tableaux =====
+<sxh javascript>
+var values=[{"code":"AA"},{"code":"BB"}];
+</sxh>
+==== Parcours classique ====
+<sxh javascript>
+for(var i=0;i<values.length;i++){
+   console.log( values[i].code);
+}
+</sxh>
+==== foreach ====
+<sxh javascript>
+values.forEach(function(element) {
+  console.log(element.code);
+});
 </sxh>