More Javascript

javascript/base/index.html

@@ -37,7 +37,17 @@
         'fonctions-4',
         'tableaux-1',
         'tableaux-2',
-        'heritage-1'
+        'modele-objet-1',
+        'modele-objet-2',
+        'modele-objet-3',
+        'modele-objet-4',
+        'modularisation-1',
+        'modularisation-2',
+        'modularisation-3',
+        'modularisation-4',
+        'modularisation-5',
+        'modularisation-6',
+        'modularisation-7'
       ];
 
       var slideshow = remark.create({

javascript/base/modele-objet-1.md

@@ -1,29 +1,30 @@
-# .cadoles-slide-title[Héritage et chaîne prototypale]
+# .cadoles-slide-title[Modèle objet (1/4)]
 
 Javascript est un langage objet orienté **prototype**.
 
 **Constructeur et opérateur `new`**
 ```js
+// Le constructeur est une simple fonction
 function Person(name) {
   this.name = name;
 }
 
+// "Méthode" statique
+Person.methodeStatique = function() {
+  console.log('Methode statique');
+};
+
+Person.methodeStatique();
+
 // "Méthode" d'instance
 Person.prototype.sayHello = function() {
   return 'Hello, my name is ' + this.name;
 };
 
-// On créait une instance de Person
+// L'instanciation est réalisée avec l'ajout de l'opérateur 'new'
 var p = new Person('John Doe');
 
 console.log(p.name);
 console.log(p.sayHello());   // -> 'Hello, my name is John Doe'
 
 ```
-**Ce qui peut déstabiliser:**
-.cadoles-list.cadoles-small[
-
-- Les méthodes et propriétées privées n'existent pas.
-- Le prototype d'un objet peut être modifié/remplacé en cours d'exécution (les objets **déjà** seront également impactés).
-
-]

javascript/base/modele-objet-2.md

@@ -0,0 +1,22 @@
+# .cadoles-slide-title[Modèle objet (2/4)]
+
+**Ce qui peut déstabiliser:**
+
+.cadoles-list.cadoles-small[
+- Les méthodes et propriétées privées n'existent pas.
+- Le prototype d'un objet peut être modifié/remplacé en cours d'exécution (les objets **déjà** instanciés seront également impactés).
+]
+**Exemple**
+```js
+var Foo = function() {};
+
+var f = new Foo();
+
+f.bar();          // Erreur
+
+Foo.prototype.bar = function() {
+  console.log('bar');
+};
+
+f.bar();          // -> 'bar'
+```

javascript/base/modele-objet-3.md

@@ -0,0 +1,35 @@
+# .cadoles-slide-title[Modèle objet (3/4)]
+
+**Héritage**
+
+```js
+function Animal() {
+  this.nom = '';
+}
+
+Animal.prototype.donnerNom = function(nom) {
+  this.nom = nom;
+};
+
+var a = new Animal();
+a.donnerNom('...');
+
+function Chien() {
+  // On applique le constructeur d'Animal sur l'instance
+  Animal.call(this);
+}
+
+// On créait un nouvel objet prototype à partir de celui d'Animal
+Chien.prototype = Object.create(Animal.prototype);
+
+Chien.prototype.aboyer = function() {
+  console.log('Wouf !');
+};
+
+var c = new Chien();
+
+c.donnerNom('Beethoven');
+console.log(c.nom);
+c.aboyer();
+
+```

javascript/base/modele-objet-4.md

@@ -0,0 +1,5 @@
+# .cadoles-slide-title[Modèle objet (4/4)]
+
+**Chaîne prototypale**
+
+<img src="img/chaine_prototypale.png" style="max-width:100%" />

javascript/base/modularisation-1.md

@@ -0,0 +1,9 @@
+# .cadoles-slide-title[Modularisation (1/6)]
+
+.cadoles-list[
+- État des lieux
+- Variable globale et S.E.A.F.
+- Format "AMD"
+- CommonJS
+- Modules ES6
+]

javascript/base/modularisation-2.md

@@ -0,0 +1,7 @@
+# .cadoles-slide-title[Modularisation (2/6)]
+
+.cadoles-list[
+- Javascript (jusqu'à ES6) n'intègre pas de mécanisme particulier afin de modulariser le code.
+- L'envergure des projets Javascript devenant de plus en plus importante, différentes méthodes ont vu le jour dans les projets portées par la communauté.
+- Certaines sont accompagnées de spécification facilitant l'inter-opérabilité des projets, d'autres tiennent plus de la convention.
+]

javascript/base/modularisation-3.md

@@ -0,0 +1,33 @@
+# .cadoles-slide-title[Modularisation (3/6)]
+
+**Variable global et S.E.A.F.**
+
+> **S.E.A.F.:** _Self Executable Anonymous Function_
+
+```js
+(function(MyModule) {
+
+  // Cette variable n'est pas visible en dehors du contexte de définition
+  // du module
+  var localVar = 'Hello World !';
+
+  // Fonction privée, utilisable à l'intérieur du module
+  function myPrivateFunc() {
+    console.log('Fonction privée !')
+  }
+
+  // Fonction publique, utilisable via l'exposition publique de myModule
+  MyModule.myPublicFunc = function() {
+    console.log('Fonction publique !')
+  };
+
+  // Propriété publique
+  MyModule.foo = 'bar';
+
+// Dans un navigateur, 'this' pointe vers Window (le contexte général)
+}(MyModule = this.MyModule || {}));
+
+MyModule.myPublicFunc();    // -> 'Fonction publique !'
+console.log(MyModule.foo);  // -> 'bar'
+
+```

javascript/base/modularisation-4.md

@@ -0,0 +1,10 @@
+# .cadoles-slide-title[Modularisation (4/6)]
+
+**Avantages**
+- Simple à mettre en place, méthode très répandue (ex: jQuery)
+- Peu de surcoût d'exécution
+- Pas de transformation à apporter au code pour le rendre exécutable dans le navigateur
+
+**Désavantages**
+- Beaucoup de variantes, avec parfois des comportements légèrement différents
+- Ne gère par les dépendances

javascript/base/modularisation-5.md

@@ -0,0 +1,34 @@
+# .cadoles-slide-title[Modularisation (5/6)]
+
+**Format AMD**
+
+> **AMD:** _Asynchronous Module Definition_
+
+```js
+
+require('myModuleA', function() {
+
+  var myModuleA = {};
+
+  var localVar = 'Hello World !';
+
+  function myPrivateFunc() {
+    console.log('Fonction privée !')
+  }
+
+  // Fonction publique, utilisable via l'exposition publique de myModule
+  myModuleA.myPublicFunc = function() {
+    console.log('Fonction publique !')
+  };
+
+  return myModuleA;
+
+});
+
+require('myModuleB', ['myModuleA'], function(myModuleA) {
+
+  myModuleA.myPublicFunc();
+
+});
+
+```

javascript/base/modularisation-6.md

@@ -0,0 +1,11 @@
+# .cadoles-slide-title[Modularisation (6/6)]
+
+**Avantages**
+- Gestion et injection des dépendances
+- Inter-opérable avec les autres méthodes de modularisation via configuration
+- Véritable [spécification](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), de nombreux "loaders" compatibles existent
+- "Lazy-loading" possible de certaines parties du code
+- Possibilité de charger des ressources autres que du Javascript via un mécanisme de plugin (ressources type texte, templates, etc...)
+
+**Désavantages**
+- Nécessite l'utilisation d'un "loader"

javascript/base/modularisation-7.md

@@ -0,0 +1,27 @@
+# .cadoles-slide-title[Modularisation (7/6)]
+
+**CommonJS**
+```js
+// **********************
+// * Fichier myModuleA.js
+// **********************
+
+var localVar = 'Hello World !';
+
+function myPrivateFunc() {
+  console.log('Fonction privée !')
+}
+
+// Fonction publique, utilisable via l'exposition publique de myModule
+exports.myPublicFunc = function() {
+  console.log('Fonction publique !')
+};
+
+// **********************
+// * Fichier myModuleB.js
+// **********************
+
+var myModuleA = require('./myModuleA');
+myModuleA.myPublicFunc();
+
+```

javascript/base/plan.md

@@ -4,7 +4,7 @@
 
 - Historique
 - Le langage
-- L'héritage prototypal
+- Le modèle objet
 - Modularisation
 - L'écosystème Javascript
 - Les alternatives
@@ -22,7 +22,7 @@
   - Objets
   - Fonctions
   - Tableaux
-- L'héritage prototypal
+- Le modèle objet
 - Modularisation
   - État des lieux
   - Variable globale