Más contenido relacionado La actualidad más candente (20) Similar a Javascript : fondamentaux et OOP (20) Más de Jean-Pierre Vincent (17) Javascript : fondamentaux et OOP2. Qui ça ?
Jean-pierre VINCENT
braincracking.org (veille techno)
@theystolemynick
10 ans de Web
Consultant, formateur, expertise
5. Présent partout
● Navigateur
● Jeux Web (remplace Flash)
● Mobile (Phonegap ...)
● Télévisions
● Serveur (Node.js, ...)
● Software (Chromeless, ...)
● OS (JoliCloud, WebOS...)
● Windows 8 !
10. APIs
● DOM
● Node
● WinRT
...
●
13. Historique court
● Né pendant la guerre (95)
● En quelques semaines
● Influence Java, Erlang, Lisp, Python
IE et Netscape d'accord pour
EcmaScript 3
16. Objectif de cette heure
● Savoir deboguer avec 3
fondamentaux
● Développer Orienté Objet
17. Notions de base
● Portée des variables (var + function)
● Function()
● Contexte (this)
19. Portée des variables
test1 = function() {
var x = 1;
test2 = function() {
var x = 2;
test3 = function() {
var x = 3;
console.log(x); // 3
}();
}();
console.log(x); // 1
}();
console.log(x); // undefined
20. Boucle infinie !
function genericFunctionName() {
for(i = 0; i < myArray.length; i++) {
....
}
}
for(i = 0; i < 10; i++) {
genericFunctionName();
}
22. Application pratique
(function() {
var privateVariable = true;
function init() {
console.log( privateVariable );
}
}())
init(); // true
console.log(privateVariable);//undefined
23. Créer un scope
1
function() {
var privateVariable = true;
console.log( privateVariable );
}
=> parse error
24. Créer un scope
2
( function() {
var privateVariable = true;
console.log( privateVariable );
})
=> rien
25. Créer un scope
3
( function() {
var privateVariable = true;
console.log( privateVariable );
})()
=> true
26. Notions de base
✓ Portée des variables (var + function)
● Function()
● Contexte (this)
27. Function()
● function action() {}
● action = function() {}
● action();
32. return function()
var onDOMEvent =
function( el, ev, callback) {
if(document.body.attachEvent){
el.attachEvent('on'+ev, callback);
} else {
el.addEventListener( ev, callback);
}
};
33. return function()
var onDOMEvent =
function( el, ev, callback) {
if(document.body.attachEvent
return function(el, ev, callback) {
element.attachEvent('on'+event, callback);
};
else
return function(el, ev, callback) {
el.addEventListener( ev, callback);
};
}();
34. Function.prototype
var myClass = function () {
this.publicVariable = 0;
};
myClass.prototype = {
decrement:function() {
console.log( --this.publicVariable );
},
increment:function() {
console.log( ++this.publicVariable );
}
};
35. Function.prototype
var myClass = function () {};
myClass.prototype = {
decrement:function() {},
increment:function() {}
};
myObject = new myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2
myObject2 = new myClass();
myObject2.increment(); // 1
myObject2.increment(); // 2
36. Héritage
mySubClass = function() {
this.publicVariable = 10;
};
mySubClass.prototype = myClass.prototype;
mySubClass.prototype.constructor =
mySubClass;
myObject2 = new mySubClass();
myObject2.increment(); // 11
myObject2.increment(); // 12
37. Renvoi d'objets
myClass = function () {
var privateVariable = 0;
// public methods
return {
decrement:function() {
console.log( --privateVariable );
},
increment:function() {
console.log( ++privateVariable );
}
}
};
38. Renvoi d'objets
myClass = function () {
return {
decrement:function() { },
increment:function() { }
}
};
myObject = myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2
myObject2 = myClass();
myObject2.increment(); // 1
myObject2.increment(); // 2
39. Function === Object
myClass = function () {
return {
publicMethod:function() {}
}
};
myClass.staticMethod = function() {};
myObject = myClass();
myObject.staticMethod(); // Error
myClass.publicMethod(); // Error
40. Portée + déclaration
var queries = [ new XHR('url1'), new
XHR('url2'), new XHR('url3')];
for(var i = 0; i < queries.length; i++) {
queries[i].onload = function() {
console.log( i ); // référence
};
}
queries[ 0 ].onload(); // 3!
queries[ 1 ].onload(); // 3!
queries[ 2 ].onload(); // 3!
41. Portée + déclaration
for(var i = 0; i < queries.length; i++) {
queries[i].onload = function(i) {
return function() {
console.log( i ); // valeur
};
}(i); // exécution immédiate
}
// plus tard ...
queries[ 0 ].onload(); // 0
queries[ 1 ].onload(); // 1
queries[ 2 ].onload(); // 2
42. Notions de base
✓ Portée des variables (var + function)
✓ Function()
● Contexte (this)
44. Contexte - facile
myClass = function() {
this.id = 'myClass';
}
myClass.prototype = {
action:function() {
console.log(this.id);
}
};
myObject = new myClass();
myObject.action(); // 'myclass'
45. Contexte - DOM
myClass = function() {
this.id = 'myClass';
}
myClass.prototype = {
action:function() {
console.log(this.id);
}
};
myObject = new myClass();
document.body.onclick = myObject.action;
// document.body.id
46. Contexte – tous objets
myClass = function() {
this.id = 'myClass';
}
myClass.prototype = {
action:function() {
console.log(this.id);
}
};
myObject = new myClass();
myEvent = {
id:'myObj2'
}
myEvent.onfire = myObj.action;
myEvent.onfire(); // myObj2
47. Contexte – fix natif
myClass = function() {
this.id = 'myClass';
}
myClass.prototype = {
action:function() {
console.log(this.id);
}
};
myObject = new myClass();
myEvent = {
id:'myObj2'
}
myEvent.onfire = myObj.action;
myEvent.onfire.call( myObject ); // myClass
48. Contexte: sans prototype
myClass = function() {
this.id = 'myClass';
var me = this;
return {
action:function() {
console.log(me.id);
}
}
};
myObject = myClass();
document.body.onclick = myObject.action;
// 'myClass'
49. Notions de base
✓ Portée des variables (var + function)
✓ Function()
✓ Contexte (this)
52. Pollution globale
2 exemples complètement au hasard
●Gmail : 33 variables globales (450K lignes
de code)
● Lemonde.fr : 480 variables globales
59. POO Classique
new, class, static,
public, private,
__construct, $this, const,
self::, extends, protected,
parent::, abstract, final,
interface, implements,
instanceof
61. Interface publique
(function(){ // début de scope local
// accès global au constructeur
MY.utils.XHR = function( url ) {
this.url = url;
};
// méthodes ou variable statiques
MY.utils.XHR.staticVariable = true;
})(); // fin de scope local
62. Raccourci
(function(){ // début de scope local
// raccourci vers le namespace
utilisé
var self = MY.utils.XHR;
self.staticVariable = true;
})(); // fin de scope local
63. privées communes
(function(){ // début de scope local
// accès global au constructeur
MY.utils.XHR = function( url ) {
this.url = url;
currentInstances.push( this );
};
var currentInstances = [];
})(); // fin de scope local
64. privées par instance
(function(){ // début de scope local
// accès global au constructeur
MY.utils.XHR = function( url ) {
var isConnecting = true;
return {
query:function() {
if( isConnecting)
return false;
}
}
};
})(); // fin de scope local
65. Combo : factory pattern
(function(){
MY.utils.XHR = function( ) {
throw new Error( 'please use .getInstance()' );
};
// constructeur privé
var XHR = function(url) { console.log(url); };
// liste privée
var currentInstances = {};
// factory
MY.utils.XHR.getInstance = function( url ) {
if(currentInstances[url])
return currentInstances[url];
else
return currentInstances[url] = new XHR( url);
}
})();
66. Tout est émulable
● programmation événementielle
● tests unitaires et fonctionnels
● patterns classiques : MVC, observer,
facade, proxy, singleton, factory ...
67. Conclusion
● Javascript est différent, apprenez le
● OOP réutilisable