diff --git a/javascript/base/img/chaine_prototypale.png b/javascript/base/img/chaine_prototypale.png new file mode 100644 index 0000000..40c7b3d Binary files /dev/null and b/javascript/base/img/chaine_prototypale.png differ diff --git a/javascript/base/index.html b/javascript/base/index.html index eb071de..303b61a 100644 --- a/javascript/base/index.html +++ b/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({ diff --git a/javascript/base/heritage-1.md b/javascript/base/modele-objet-1.md similarity index 52% rename from javascript/base/heritage-1.md rename to javascript/base/modele-objet-1.md index 65f33e4..f674ba4 100644 --- a/javascript/base/heritage-1.md +++ b/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). - -] diff --git a/javascript/base/modele-objet-2.md b/javascript/base/modele-objet-2.md new file mode 100644 index 0000000..ed84968 --- /dev/null +++ b/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' +``` diff --git a/javascript/base/modele-objet-3.md b/javascript/base/modele-objet-3.md new file mode 100644 index 0000000..f79c251 --- /dev/null +++ b/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(); + +``` diff --git a/javascript/base/modele-objet-4.md b/javascript/base/modele-objet-4.md new file mode 100644 index 0000000..d2fc3e9 --- /dev/null +++ b/javascript/base/modele-objet-4.md @@ -0,0 +1,5 @@ +# .cadoles-slide-title[Modèle objet (4/4)] + +**Chaîne prototypale** + + diff --git a/javascript/base/modularisation-1.md b/javascript/base/modularisation-1.md new file mode 100644 index 0000000..83b4a90 --- /dev/null +++ b/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 +] diff --git a/javascript/base/modularisation-2.md b/javascript/base/modularisation-2.md new file mode 100644 index 0000000..c97f0e7 --- /dev/null +++ b/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. +] diff --git a/javascript/base/modularisation-3.md b/javascript/base/modularisation-3.md new file mode 100644 index 0000000..b9b8889 --- /dev/null +++ b/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' + +``` diff --git a/javascript/base/modularisation-4.md b/javascript/base/modularisation-4.md new file mode 100644 index 0000000..dec2887 --- /dev/null +++ b/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 diff --git a/javascript/base/modularisation-5.md b/javascript/base/modularisation-5.md new file mode 100644 index 0000000..4d912d5 --- /dev/null +++ b/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(); + +}); + +``` diff --git a/javascript/base/modularisation-6.md b/javascript/base/modularisation-6.md new file mode 100644 index 0000000..59b6dc7 --- /dev/null +++ b/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" diff --git a/javascript/base/modularisation-7.md b/javascript/base/modularisation-7.md new file mode 100644 index 0000000..3854029 --- /dev/null +++ b/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(); + +``` diff --git a/javascript/base/plan.md b/javascript/base/plan.md index 205d21e..a7db613 100644 --- a/javascript/base/plan.md +++ b/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 diff --git a/javascript/ressources/chaine_prototypale.ep b/javascript/ressources/chaine_prototypale.ep new file mode 100644 index 0000000..6a1690b --- /dev/null +++ b/javascript/ressources/chaine_prototypale.ep @@ -0,0 +1,193 @@ + +Untitled Page1427708853703_90751264812#ffffff + + + + + + + + + age: 2
]]>
+ + +
nom: 'Beethoven'
age: 2
+
+
+ + + + + + + + + + + + + + + + + + ]]> + + +
aboyer()
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
donnerNom()
+
+
+ + + + + + + + + + + + + + + + + + + + +
toString()
+
+
+ + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
\ No newline at end of file