Skip to content

Commit 967d4f1

Browse files
committed
Merge remote-tracking branch 'filirom1/master'
2 parents 2c23ba2 + 66ed86d commit 967d4f1

File tree

1 file changed

+14
-13
lines changed

1 file changed

+14
-13
lines changed

_posts/2012-01-04-requirejs.markdown

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ Gestion des dépendances avec RequireJS
9999
C'est à ce moment que je commence à vous parler de RequireJS.
100100

101101
RequireJS a été créé par [James Burke](https://github.com/jrburke), pour
102-
DOJO. Mais finalement, cette librairie à été séparé du projet initial pour
102+
DOJO. Mais finalement, cette librairie a été séparé du projet initial pour
103103
devenir framework agnostique. Merci James ;)
104104

105105
RequireJs va vous permettre de faire :
@@ -108,13 +108,14 @@ RequireJs va vous permettre de faire :
108108
* de la modularité
109109
* de la gestion de dépendances
110110
* de ne plus écrire d'HTML dans des fichiers JS
111-
* de l'optimisation d'assests (grouper et minifier les JS et les CSS)
111+
* de l'optimisation d'assets (grouper et minifier les JS et les CSS)
112112

113113
RequireJS est actuellement la solution mise en avant par :
114114

115115
* [Rebecca Murphey pour utiliser RequireJS avec jQuery](http://jqfundamentals.com/)
116116
* [Addy Osmani pour utiliser RequireJS avec Backbone](https://github.com/addyosmani/backbone-fundamentals)
117117
* [Alex Sexton le père de YepNope, qui explique pourquoi il préfère RequireJS](http://www.quora.com/What-are-the-use-cases-for-RequireJS-vs-Yepnope-vs-LABjs)
118+
* [Resthub-JS dans sa solution pour construire des Single Page Web Apps](http://resthub.org/javascript/)
118119

119120

120121
Voici un exemple de code de RequireJS, suivez les commentaires pour les explications.
@@ -140,7 +141,7 @@ define(
140141
}
141142
)
142143

143-
/* bootstrap.js qui utilise la dépendance definie ci dessus. */
144+
/* bootstrap.js qui utilise la dépendance définie ci dessus. */
144145
require({
145146
paths: {
146147
jquery: 'js/libs/jquery-1.7.1.min',
@@ -153,7 +154,7 @@ require({
153154

154155
Reprenons l'exemple précédent tout doucement.
155156

156-
RequireJs définie deux notions : `define` et `require`. Simple non :D
157+
RequireJS définit deux notions : `define` et `require`. Simple non :D
157158

158159
* `define` permet de définir un module avec des dépendances et des choses (fonction ou variable) à exporter.
159160
* `require` permet de charger dynamiquement des modules.
@@ -176,7 +177,7 @@ define([
176177
});
177178
{% endhighlight %}
178179

179-
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.
180+
Je n'ai pas spécifié 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.
180181

181182
Dans mon module, j'ai spécifié une liste de dépendances.
182183

@@ -198,12 +199,12 @@ Mon module peut exporter des choses (fonction ou variable) à l'aide du return:
198199

199200
Et comme vous l'aurez supposé, tout ce qui est exporté par un module est disponible par les autres modules via les arguments de la fonction : `$, _, myScript, ...`
200201

201-
RequireJs va s'occuper de charger les dépendances des dépendances, ... et au final je n'aurai plus qu'à définir qu'un seul module : myApplication et de ne charger que ce module pour que toutes les dépendances de mon application soit chargées automatiquement (ce n'est plus à nous de gérer l'ordre c'est cool ;) ).
202+
RequireJs va s'occuper de charger les dépendances des dépendances, ... et au final je n'aurai plus qu'à définir qu'un seul module : myApplication et de ne charger que ce module pour que toutes les dépendances de mon application soient chargées automatiquement (ce n'est plus à nous de gérer l'ordre c'est cool ;) ).
202203

203204

204205
### Charger des modules avec `require`
205206

206-
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.
207+
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. L'appel à `require` va charger dynamiquement un module, puis ses dépendances, puis appeler la fonction passée en dernier paramètre.
207208

208209
{% highlight javascript %}
209210
require({
@@ -221,7 +222,7 @@ require({
221222

222223
### Configurer RequireJS
223224

224-
Comme vous l'avez remarqué le premier paramètre de requireJS est un objet de configuration :
225+
Comme vous l'avez remarqué, le premier paramètre de RequireJS est un objet de configuration :
225226

226227
{% highlight javascript %}
227228
paths: {
@@ -251,10 +252,10 @@ intègre jQuery : <https://github.com/jrburke/require-jquery>
251252
#### RequireJS et Backbone
252253

253254
Si vous voulez utiliser RequireJS avec Backbone, James Burke le créateur
254-
de RequireJS a créé un repo avec un version de Backbone compatible AMD :
255+
de RequireJS a créé un repo avec une version de Backbone compatible AMD :
255256
<https://github.com/jrburke/backbone/blob/optamd3/backbone.js>
256257

257-
Une [issue](https://github.com/documentcloud/backbone/pull/710) est un cours sur github pour que ce fork soir mergé avec
258+
Une [issue](https://github.com/documentcloud/backbone/pull/710) est en cours sur Github pour que ce fork soir mergé avec
258259
Backbone.
259260

260261
### Intégrer RequireJS dans notre HTML
@@ -303,7 +304,7 @@ Si on appelle r.js avec le paramètre -o et en lui spécifiant un fichier de con
303304
})
304305
{% endhighlight %}
305306

306-
Le fichier bootstrap.js du réperoire build contiendra l'ensemble de notre code js minifié.
307+
Le fichier bootstrap.js du répertoire build contiendra l'ensemble de notre code js minifié.
307308

308309
PS : r.js nécessite node ou Rhino pour fonctionner.
309310

@@ -322,7 +323,7 @@ Sur mobile on a toujours des contraintes des taille. Nous ne voulons surtout pas
322323

323324
Actuellement il en existe plusieurs dont 3 que j'ai testé personnellement.
324325

325-
* Almond la plus petite (mois de 1Ko gzippé) ne fait pas de chargement dynamique; tous les modules doivent être contenu dans un seul fichier. Elle fonctionne très bien en complément du script builder r.js. Comme tout le code est groupé en un seul fichier, Almond peut faire son travail. Almond est la solution privilégiée sur mobile.
326+
* Almond la plus petite (moins de 1Ko gzippé) ne fait pas de chargement dynamique; tous les modules doivent être contenus dans un seul fichier. Elle fonctionne très bien en complément du script builder r.js. Comme tout le code est groupé en un seul fichier, Almond peut faire son travail. Almond est la solution privilégiée sur mobile.
326327
* Curl.js qui est deux fois moins gros que RequireJs et peut être une bonne alternative si vous avez besoin de chargement dynamique de code.
327328

328329
Par contre, sur des projets un peu gros, souvent RequireJS est le seul à s'en sortir.
@@ -398,7 +399,7 @@ RequireJS possède même des plugins afin de compiler les templates par le scrip
398399
Conclusion
399400
----------
400401

401-
Quoi que RequireJs peut paraitre un poil complexe à configurer, RequireJs permet de répondre à pas mal de problématiques et pour l'instant je n'ai rien trouvé de mieux pour faire des Single Page Web App.
402+
Bien RequireJS puisse paraitre un poil complexe à configurer, RequireJs permet de répondre à pas mal de problématiques et pour l'instant je n'ai rien trouvé de mieux pour faire des Single Page Web Apps (SPA).
402403

403404
D'ailleurs, pour de la SPA : RequireJS + Backbone c'est un must have. Je l'ai déjà
404405
cité, mais regardez le livre de Addy Osmani : [Backbone Fondamentals](https://github.com/addyosmani/backbone-fundamentals) il vaut vraiment le coup.

0 commit comments

Comments
 (0)