You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2012-01-04-requirejs.markdown
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -99,7 +99,7 @@ Gestion des dépendances avec RequireJS
99
99
C'est à ce moment que je commence à vous parler de RequireJS.
100
100
101
101
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
103
103
devenir framework agnostique. Merci James ;)
104
104
105
105
RequireJs va vous permettre de faire :
@@ -108,7 +108,7 @@ RequireJs va vous permettre de faire :
108
108
* de la modularité
109
109
* de la gestion de dépendances
110
110
* 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)
112
112
113
113
RequireJS est actuellement la solution mise en avant par :
114
114
@@ -140,7 +140,7 @@ define(
140
140
}
141
141
)
142
142
143
-
/* bootstrap.js qui utilise la dépendance definie ci dessus. */
143
+
/* bootstrap.js qui utilise la dépendance définie ci dessus. */
144
144
require({
145
145
paths: {
146
146
jquery: 'js/libs/jquery-1.7.1.min',
@@ -153,7 +153,7 @@ require({
153
153
154
154
Reprenons l'exemple précédent tout doucement.
155
155
156
-
RequireJs définie deux notions : `define` et `require`. Simple non :D
156
+
RequireJS définit deux notions : `define` et `require`. Simple non :D
157
157
158
158
*`define` permet de définir un module avec des dépendances et des choses (fonction ou variable) à exporter.
159
159
*`require` permet de charger dynamiquement des modules.
@@ -176,7 +176,7 @@ define([
176
176
});
177
177
{% endhighlight %}
178
178
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.
179
+
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.
180
180
181
181
Dans mon module, j'ai spécifié une liste de dépendances.
182
182
@@ -198,12 +198,12 @@ Mon module peut exporter des choses (fonction ou variable) à l'aide du return:
198
198
199
199
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, ...`
200
200
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 ;) ).
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 soient chargées automatiquement (ce n'est plus à nous de gérer l'ordre c'est cool ;) ).
202
202
203
203
204
204
### Charger des modules avec `require`
205
205
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.
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. L'appel à `require` va charger dynamiquement un module, puis ses dépendances, puis appeler la fonction passée en dernier paramètre.
207
207
208
208
{% highlight javascript %}
209
209
require({
@@ -221,7 +221,7 @@ require({
221
221
222
222
### Configurer RequireJS
223
223
224
-
Comme vous l'avez remarqué le premier paramètre de requireJS est un objet de configuration :
224
+
Comme vous l'avez remarqué, le premier paramètre de RequireJS est un objet de configuration :
Une [issue](https://github.com/documentcloud/backbone/pull/710) est un cours sur github pour que ce fork soir mergé avec
257
+
Une [issue](https://github.com/documentcloud/backbone/pull/710) est en cours sur Github pour que ce fork soir mergé avec
258
258
Backbone.
259
259
260
260
### Intégrer RequireJS dans notre HTML
@@ -303,7 +303,7 @@ Si on appelle r.js avec le paramètre -o et en lui spécifiant un fichier de con
303
303
})
304
304
{% endhighlight %}
305
305
306
-
Le fichier bootstrap.js du réperoire build contiendra l'ensemble de notre code js minifié.
306
+
Le fichier bootstrap.js du répertoire build contiendra l'ensemble de notre code js minifié.
307
307
308
308
PS : r.js nécessite node ou Rhino pour fonctionner.
309
309
@@ -322,7 +322,7 @@ Sur mobile on a toujours des contraintes des taille. Nous ne voulons surtout pas
322
322
323
323
Actuellement il en existe plusieurs dont 3 que j'ai testé personnellement.
324
324
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.
325
+
* 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.
326
326
* 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.
327
327
328
328
Par contre, sur des projets un peu gros, souvent RequireJS est le seul à s'en sortir.
@@ -398,7 +398,7 @@ RequireJS possède même des plugins afin de compiler les templates par le scrip
398
398
Conclusion
399
399
----------
400
400
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.
401
+
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).
402
402
403
403
D'ailleurs, pour de la SPA : RequireJS + Backbone c'est un must have. Je l'ai déjà
404
404
cité, mais regardez le livre de Addy Osmani : [Backbone Fondamentals](https://github.com/addyosmani/backbone-fundamentals) il vaut vraiment le coup.
0 commit comments