- Some things ain't funny
"dmp" sur #xulfr ou #developers
LinkedIn: Olivier Gambier (le seul qui fait du dev) http://www.linkedin.com/pub/5/744/a42
© xulfr - XUL Workshop Septembre 2008
Pourquoi pour adultes?
Pour qui?
Pour quoi?
Au menu: première partie (grands débutants):
Rappels de base concernant l'environnement de travail du développeur javascript mozilla
Rappels concernant les bonnes pratiques
Nouveautés de la version 1.6 / 1.7 / 1.8
futur de javascript
Closures
Développement d'un gestionnaire de packages
© xulfr - XUL Workshop Septembre 2008
Démarrer sur un profil clean. Configurer pour le développement.
user_pref("nglayout.debug.disable_xul_cache", true);
user_pref("nglayout.debug.disable_xul_fastload", true);
user_pref("javascript.options.strict", true);
user_pref("javascript.options.showInConsole", true);
user_pref("browser.dom.window.dump.enabled", true);
user_pref("extensions.logging.enabled", "true");
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
Ur choice...
... mais... coloration javascript dans XBL... complétion sur les composants XPCOM mozilla... validation de syntaxe...
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
/** Super drop in replacement for observers
* @name coreKit.coreMessager.observe
* @static
* @function
* @param {String} component
* @param {Int} level
* @param {String} errorCode
* @param {String} message
* @returns {void}
*/
service.observe = function(component, level, errorCode, message) {
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
// YUI
<script type='text/javascript' src='coincoin.js'>
// Résultat
stuff.thing.coincoin.doSomething();
// DOJO
dojo.require('stuff.thing.coin');
// Résultat
stuff.thing.coincoin.doSomething();
// Subscript
var subscriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
subscriptLoader.loadSubScript(url, scope);
// Résultat
scope.something();
// Code modules
var EXPORTED_SYMBOLS = ["foo", "bar"]
var bar = "stuff";
var hidden = "dummy";
function foo() {
return dummy;
}
// Puis...
Components.utils.import("resource://app/modules/my_module.jsm");
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
var monArray = [1, 2, 0, 4, 1];
function doSomething(){};
// Index
monArray.indexOf(2);
monArray.lastIndexOf(2);
// doSomething pour chaque élément du tableau
monArray.forEach(doSomething);
// comme forEach et renvoie true si tous les appels renvoient true
var result = monArray.every(doSomething);
// comme every mais renvoie true si l'un au moins des appels renvoie true
var result = monArray.some(doSomething);
// Réduit le tableau aux éléments pour lesquels l'appel de la fonction renvoie true
monArray.filter(doSomething);
// transforme un tableau en appliquant à chaque élément la fonction doSomething
monArray.map(doSomething);
// array et strings generics: plutôt que
Array.prototype.every.call(someString, someMethod);
// ... utiliser un generic
Array.every(someString, someMethod);
© xulfr - XUL Workshop Septembre 2008
//// Expression closures, ou lambda notation
function(x) x * x
// Est strictement équivalent à
function(x) { return x * x; }
//// reduce et reduceRight sur les array
var sum = function(a, b) a+b;;
monArray.reduce(sum);
monArray.reduceRight(sum);
//// Array comprehension
// Ancienne mode
for(var i = 0; i < 10; i++){
someArray.push(i);
}
// Nouvelle mode
someArray = [i for (i = 0; i < 10; i++)]
someArray = [key for (key in obj)]
© xulfr - XUL Workshop Septembre 2008
function returnArrayOfStuff() [1, 2, 3, 4];
var [a, b, c, d] = returnArrayOfStuff();
// Marche aussi sur les objets bien sûr...
// Et aussi dans une boucle, pour un exemple élaboré
var superSecret = [
{girl: 'alex', phone: '0101010101'},
{girl: 'audrey', phone: '0202020202'},
]
for(let [girl: girl, phone: phone] in superSecret){
if(dump(phone))
throw(girl);
}
© xulfr - XUL Workshop Septembre 2008
// I. Let statement
var stuff = 0;
let (stuff = 1){
// Stuff vaut 1 à l'intérieur de ce bloc
}
// Stuff vaut à nouveau 0
// II. Let expression
var stuff = 0;
someMethod(let (stuff = 1) stuff)
// III. Let definition
if(true){
let maSuperNewVar = 5;
// Blabla do something with maSuperNewVar
}
// maSuperNewVar n'est plus définie
// IV. Let dans les for:
for(let x = 0; x < 10; x++){
}
// x n'est plus défini
© xulfr - XUL Workshop Septembre 2008
Un itérateur est un objet permettant de "traverser" tous les éléments d'une collection. Plus précisément, un itérateur est un type de pointeur doté de deux opérations principales: référencer un élément spécifique dans une collection (accès), et se modifier lui-même pour pointer sur l'élément suivant (traversal).
var stuff = ['one', 'two', 'three'];
iter = Iterator(stuff);
try{
while(true){
dump('La valeur suivante de ce tableau est ' + iter.next());
}
}catch(e if e instanceof StopIteration){
dump('Fini!\n');
}catch(e){
throw('Aya Caramba! Something is rotten! ' + e + '\n');
}
© xulfr - XUL Workshop Septembre 2008
//Iterator generator
function multiply(obj) {
for ( let i in obj ){
yield i * 5;
}
}
let it = multiply(someObj);
try {
while (true) {
dump(it.next() + "\n");
}
} catch (err if err instanceof StopIteration) {
}
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
It was decided at the Oslo meeting that the project formerly known as ES4 is no more. Instead, there will be a new project, Harmony, which will be the work of a unified working group.(Douglas Crockford)
© xulfr - XUL Workshop Septembre 2008
// Par l'exemple
function createClosure(){
var something = 'coincoin';
return function(){
alert('Haha je peux faire ' + something);
};
}
var canard = createClosure();
canard();
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
var clickyManagerClass = function(){
};
clickyManagerClass.prototype.nbClicks = 0;
clickyManagerClass.prototype.handleClicky = function(event){
alert(typeof this.nbClicks);
};
clickyManagerClass.prototype.registerClicky = function(node){
// Traditionnel, renverra document en guise de this
node.addEventListener('click', this.handleClicky, true);
// Avec une closure bien sympathique... (par le haut), this renverra bien l'instance de notre objet
var scope = this;
node.addEventListener('click', function(event){return scope.handleClicky(event);}, true);
};
var someClickyManager = new clickyManagerClass();
someClickyManager.registerClicky(document);
© xulfr - XUL Workshop Septembre 2008
// Constructeur
var maClass = function(something){
// private static
var privateThing = function(){};
// publique instance, privilégiée au niveau de l'instance
this.publicPriviledged = function(){};
};
// publique instance
maClass.prototype.publicThing = function(){};
// statique publique
maClass.staticThing = function(){};
© xulfr - XUL Workshop Septembre 2008
var maClass = (function() {
// Private static property
var privateStaticProperty = 'something';
// Class constructor
function realConstructor(stuff) {
// Private instance property
var privateInstanceProperty = function(){};
// (Doubly) privileged instance method
// Can access both static and instance private data
this.priviledgedInstanceMethod = function() {
};
};
// Privileged static method (can access private static members)
realConstructor.priviledgedStaticMethod = function() {
};
// Public instance method, with class level privileges
realConstructor.prototype.publicInstanceMethod = function() {
};
return realConstructor;
})();
// Public static property sans aucun privilège
maClass.publicStaticProperty = function(){};
// Public instance property sans aucun privilège
maClass.prototype.publicInstanceProperty = function(){};
© xulfr - XUL Workshop Septembre 2008
(function() {
var protectedStatic = 0;
this.maClass = function() {
};
this.maClass.prototype.increment = function(){
protectedStatic++;
alert(protectedStatic);
};
this.descendantClass = function() {
};
this.descendantClass.prototype = new maClass();
})();
© xulfr - XUL Workshop Septembre 2008
© xulfr - XUL Workshop Septembre 2008
PackMan, un gestionnaire de modules plus ou moins raffiné en soixante lignes.
- Be an artist
http://fortunes.xulfr.org/#f169
<paul> Python, c'est pour les bucherons, Perl, pour les bouchers, Ruby, pour le batiment...
<paul> et JS pour les artistes ;)
© xulfr - XUL Workshop Septembre 2008