Benjamin Baudouin

Bon, nous allons voir comment appliquer un « Observer Pattern » (patron Observateur) en javascript.

Tout d’abord, nous avons besoin de 2 types d’objets :

• Un Objet qui observe possédant une méthode update :


Observer = function(name) {
this.name = name;
this.update = function(observable) {
if (observable.nav == this.name) {
this.className = 'nav_selected';
show.call($(this.name+'s'));
} else {
this.className = 'nav';
hide.call($(this.name+'s'));
}
}
};


• Un Objet observé possédant un attribut qui référence les objets qui observent et 2 méthodes


Observable = function() {
this.observers = new Array();
this.notifyObservers = function() {
for (var i=0; i < this.observers.length; i++) {
this.observers[i].update(this);
}
}
this.addObserver = function(observer) {
this.observers.push(observer);
observer.update(this);
}
};


Et voilà (ou presque), on crée un objet mod Nav qui héritera par la suite d’Observable :


var modNav = {
nav:'client',
all:['client','product','group','schedule']
};
modNav.setNav = function(o) {
this.nav = (typeof(o) == 'string') ? o : o.id ;
this.notifyObservers();
}
modNav.getNav = function() {
return this.nav
}
modNav.init = function() {
for (var j=0; j
var m = this.all[j];
Observer.call($(m),m);
this.addObserver($(m));
}
}


Il ne reste plus qu’à faire hériter les objets div modifiable (un onglet <=> une div) :


Observable.call(modNav);
modNav.init();

Avec, pour notre exemple :

Et voilà (enfin) les onglets sont observables et nos moutons sont bien g…

Courte introduction. La genèse de Google Chrome. (4min)

Quelques explications sur V8 le nouveau moteur javascript. (5min)

Comment le moteur javascript v8 fonctionne ainsi que sa roadmap. (50min)

Télécharger les sources
svn checkout http://v8.googlecode.com/svn/trunk/ v8

Accéder au site officiel de V8.

Comment rendre plus rapide et plus accessible une page web contenant du flash ?
Une première réponse serait de ne pas intégrer de flash dans les pages web.

Mais si nous avons réellement besoin de flash et que nous souhaitons partager une vidéo intéressante avec la communauté ?
Nous allons charger l’objet flash à la demande de l’utilisateur.

Voici un hack du plugin wordpress video plugin inspiré de ce qui se fait sur Facebook.

Télécharger l’archive wordpress-video-plugin-hack.tar

hack-minify.js


function LoadContent(page,usediv){try{xmlhttp=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");}catch(e){alert("Error: Could not load page.");}
document.getElementById(usediv).innerHTML='<img src="http://www.benjaminbaudouin.com/wp-content/plugins/wordpress-video-plugin-hack/loading.gif">';xmlhttp.onreadystatechange=function(){if((xmlhttp.readyState==4)&&(xmlhttp.status==200)){document.getElementById(usediv).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET",page);xmlhttp.send(null);return false;}
function toggle_visibility(id){var e=document.getElementById(id);if(e.style.display=='block')
e.style.display='none';else
e.style.display='block';}
function is_visible(id){var e=document.getElementById(id);if(e.style.display=='block')
return 1;else
return 0;}


inclusion dans wordpress header.php

hack de video.php

les images fbvbs43b.png et loading.gif

style.css (thème thematic)

.videothumb {
cursor: pointer;
}
.videothumbplay {
cursor: pointer;
margin-left: -115px;
}

Voila à quoi ressemble le hack une fois implémenté (cliquez sur l’image pour lancer la vidéo):

1&1 Internet: 55 000 serveurs
OVH: 55 000 serveurs
Rackspace: 50 038 serveurs
The Planet: 48 500 serveurs
Akamai Technologies: 48 000 serveurs
SBC Communications: 29 193 serveurs
Verizon: 25 788 serveurs
Time Warner Cable: 24 817 serveurs
SoftLayer: 21 000 serveurs
AT&T: 20 268 serveurs
Peer1/ServerBeach: 10 277 serveurs
iWeb: 10 000 serveurs

En savoir plus

utilise le logiciel Open Source laconi

La dernière version permet de s’identifier via OpenID, Facebook Connect.