Add highlight

Author: Filirom1

_posts/2012-01-04-requirejs.markdown

@@ -17,14 +17,15 @@ Module Pattern
 <http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth>
 Il nous permet de ne pas pourrir notre scope globale. En Javascript un scope est défini au niveau des fonctions. Pour éviter que nos variables arrivent dans le scope globale, il suffit de wrapper notre code autour d'une fonction et de l'exécuter tout de suite après.
 
+{% highlight javascript %}
     (function(){
       var private = 'I am private, the global scope is free of me !';
 
       function iAmPrivateToo(){
         return 'This function is private and will not be avalaible via the global scope !'
       }
     })()
-
+{% endhighlight %}
 
 Object Litteral Pattern
 -----------------------
@@ -33,6 +34,7 @@ Maintenant que nous savons isoler notre code, nous devons le découper pour évi
 
 A partir du moment où l'on découpe notre code, nous allons avoir besoin d'exporter des fonctions et des attributs publiquement dans une variable globale (ça va une seule, on ne crie pas au scandale tout de suite).
 
+{% highlight javascript %}
     // script1.js
     (function(){
       var myApp = window.myApp = window.myApp || {};
@@ -60,11 +62,14 @@ A partir du moment où l'on découpe notre code, nous allons avoir besoin d'expo
       
       console.log(myApp.aPublicFunction());
     })();
+{% endhighlight %}
 
 Attention script2 dépend de script1. Il y a un ordre à respecter au niveau de la déclaration des dépendances.
 
+{% highlight html %}
     <script src="script1.js"></script>
     <script src="script2.js"></script>
+{% endhighlight %}
 
 Grouper les fichiers JS pour la prod
 ------------------------------------
@@ -104,6 +109,7 @@ RequireJS est actuellement la solution mise en avant par :
 
 Voici un exemple de code de RequireJS, suivez les commentaires pour les explications.
 
+{% highlight javascript %}
     /* js/script1.js */
     define(
       id, /* (optionnel) */
@@ -133,6 +139,7 @@ Voici un exemple de code de RequireJS, suivez les commentaires pour les explicat
     },['js/script1'], function(script1){
         console.log(script.publicFunction());
     })
+{% endhighlight %}
 
 Reprenons l'exemple précédent tout doucement.
 
@@ -145,6 +152,7 @@ RequireJs définie deux notions : `define` et `require`. Simple non :D
 
 Si nous prenons l'exemple d'un module simple.
 
+{% highlight javascript %}
     define([
         'jquery',
         'underscore',
@@ -156,17 +164,20 @@ Si nous prenons l'exemple d'un module simple.
 
       return { /* your public variables and functions here */ }
     });
+{% endhighlight %}
 
 Je n'ai pas spécifier l'ID, RequireJs va s'en occuper pour moi et je vous conseil de faire de même. Votre code sera réutilisable plus facilement.
 
 Dans mon module, j'ai spécifié une liste de dépendances.
 
+{% highlight javascript %}
     [
       'jquery',
       'underscore',
       'js/myScript',
       ...
     ]
+{% endhighlight %}
 
 Nous remarquons que pour myScript, le nom de la dépendance correspond à son chemin sans l'extension. Nous verrons par la suite comment configurer RequireJS afin de donner des chemins raccourcis (comme pour jQuery et underscore).
 
@@ -184,6 +195,7 @@ RequireJs va s'occuper de charger les dépendances des dépendances, ... et au f
 
 Maintenant c'est sympa nous avons défini des modules, mais il nous manque un point d'entrée à notre application. C'est le rôle de `require` de faire ça. `require` va charger dynamiquement un module, puis ses dépendances, puis appeler la fonction passée en dernier paramètre.
 
+{% highlight javascript %}
     require({
       paths: {
         jquery: 'js/libs/jquery-1.7.1.min',
@@ -194,16 +206,19 @@ Maintenant c'est sympa nous avons défini des modules, mais il nous manque un po
         $('#myID').text('Loaded ' + script1.publicFunction());
       });
     })
+{% endhighlight %}
 
 
 ### Configurer RequireJS
 
 Comme vous l'avez remarqué le premier paramètre de requireJS est un objet de configuration :
 
+{% highlight javascript %}
     paths: {
       jquery: 'js/libs/jquery-1.7.1.min',
       underscore: 'js/libs/underscore-min'
     }
+{% endhighlight %}
 
 Le paramètre `paths` nous permet de définir l'emplacement des librairies utilisées
 
@@ -221,6 +236,7 @@ C'est le rôle de la configuration `paths: { jquery: 'js/libs/jquery-1.7.1.min',
 
 Il faut rajouter dans le HTML les balises `script` pour RequireJS et notre bootstrap.js (celui faisant appel à toute nos dépendances) afin que le navigateur charge notre application.
 
+{% highlight html %}
     <html>
         <head>...</head>
         <body>
@@ -229,6 +245,7 @@ Il faut rajouter dans le HTML les balises `script` pour RequireJS et notre boots
           <script src="bootstrap.js"></script>
         </body>
     </html>
+{% endhighlight %}
 
 RequireJS rajoutera les dépendances chargées via des balises script dans
 le head et le navigateur les chargera automatiquement. Si la dépendance
@@ -248,6 +265,7 @@ RequireJS arrive avec un [script de build](https://github.com/jrburke/r.js/) qui
 
 Si on appelle r.js avec le paramètre -o et en lui spécifiant un fichier de configuration : `r.js -o build.js`. r.js va parcourir l'ensemble des scripts et les minifier, puis va parcourir nos dépendances afin de les grouper. Les fichiers résultant seront placés dans un nouveau répertoire afin de ne pas écraser les sources.
 
+{% highlight javascript %}
     ({
         appDir: './src',    /* Repertoire des sources */
         baseUrl: ".",       /* Le repertoire racine */
@@ -258,6 +276,7 @@ Si on appelle r.js avec le paramètre -o et en lui spécifiant un fichier de con
         optimizeCss: "standard.keepLines", /* On va même optimiser les CSS */
         dirExclusionRegExp: /node_modules|test|build/ /* on va exclure du processus de build certain repertoires. */
     })
+{% endhighlight %}
 
 Le fichier bootstrap.js du réperoire build contiendra l'ensemble de notre code js minifié.
 
@@ -293,9 +312,11 @@ Et voici une comparaisons des implémentations en terme de taille
 
 Si vous utilisez Almond qui ne fait pas de chargement dynamique, vous aurez besoin en prod de remplacer 'RequireJS + votre code' par un seul fichier minifié contenant tout.
 
+{% highlight html %}
     - <script src="require.js"></script>
     - <script src="boostrap.js"></script>
     + <script src="almond-and-bootstrap.js"></script>
+{% endhighlight %}
 
 Pour cela vous pouvez :
 
@@ -309,6 +330,7 @@ Avec RequireJS et son plugin text vous avez la chance, de ne plus jamais écrire
 Voici un exemple de module RequireJS avec une dépendance texte (regardez
 le préfixe text!) :
 
+{% highlight javascript %}
     /* bootstrap.js */
     require([
       'jquery',
@@ -327,13 +349,16 @@ le préfixe text!) :
         });
       });
     })
+{% endhighlight %}
 
 Et voici le template en HTML utilisant le [micro templating underscore](http://documentcloud.github.com/underscore/#template)
 
-    /* views/template.html */
+{% highlight javascript %}
+    <!-- views/template.html -->
     <div class="personn">
         <p>My name is <%= firstName %> <%= lastName %></p>
     </div>
+{% endhighlight %}
 
 Si on faisait tourner le script de build r.js on obtiendrait dans le même fichier :