Introduction à la définition du module asynchrone AMD et à l'utilisation des plug-ins jQuery et jQuery dans Require.js_jquery

Module AMD

L'objectif global du format AMD (Asynchronous Module Definition) est de fournir aux développeurs actuels une solution JavaScript modulaire utilisable.

Le format de module AMD lui-même est une proposition sur la façon de définir des modules afin que les modules et les dépendances puissent être chargés de manière asynchrone. Il présente de nombreux avantages uniques, notamment le fait d'être intrinsèquement asynchrone et très flexible, ce qui peut rompre le couplage étroit entre le code et l'identité du module qui est courant. Il a été adopté par de nombreux projets, dont jQuery (1.7).

RequireJS

RequireJS est une bibliothèque d'outils principalement utilisée pour la gestion des modules clients. Il permet de diviser le code client en modules pour un chargement asynchrone ou dynamique, améliorant ainsi les performances et la maintenabilité du code. Sa gestion des modules adhère aux spécifications AMD.

Prise en charge de jQuery pour AMD

jQuery 1.7 commence à prendre en charge l'enregistrement de jQuery en tant que module asynchrone AMD. Il existe de nombreux chargeurs de scripts compatibles (y compris RequireJS et curl) qui peuvent charger des modules en utilisant un format de module asynchrone, ce qui signifie qu'il ne faut pas beaucoup de piratage pour que tout fonctionne. Vous pouvez jeter un œil au code source dans jQuery 1.7 :

Copiez le code Le code est le suivant :

// Exposez jQuery en tant que module AMD, mais uniquement pour les chargeurs AMD qui
// comprennent les problèmes liés au chargement de plusieurs versions de jQuery
// dans une page que tous pourraient appeler definition(). Le chargeur indiquera
/ / ils ont des allocations spéciales pour plusieurs versions de jQuery en
// en spécifiant set.amd.jQuery = true Enregistrez-vous en tant que module nommé,
// puisque jQuery peut être concaténé avec d'autres. fichiers qui peuvent utiliser definition,
// mais n'utilisent pas un script de concaténation approprié qui comprend les modules anonymes
// Un AMD nommé est le moyen le plus sûr et le plus robuste d'enregistrer.
// Jquery minuscule est utilisé. car les noms de modules AMD sont dérivés de
// noms de fichiers, et jQuery est normalement livré dans un nom de fichier en minuscules.
if ( typeof definition === "function" && definition.amd && definition.amd.jQuery ) {
définir( "jquery ", [], function () { return jQuery; } );
}

La façon dont cela fonctionne est que le chargeur de script utilisé indique qu'il peut prendre en charge plusieurs versions de jQuery en spécifiant une propriété, finish.amd.jQuery, comme true. Si vous souhaitez connaître les détails spécifiques de l'implémentation, vous pouvez enregistrer jQuery en tant que module nommé, car il existe un risque qu'il soit associé à d'autres fichiers utilisant la méthode Defin() d'AMD sans utiliser un script d'assemblage approprié qui comprend les définitions anonymes des modules AMD.

La version supérieure de jQuery (1.11.1) supprime le jugement definition.amd.jQuery :

Copier le code Le code est le suivant :

if ( typeof definition === "function " && définir .amd ) {
définir( "jquery", [], function() {
return jQuery;
});
}

Utiliser jQuery dans Require.js

Il est très pratique d'utiliser jQuery dans Require.js, il suffit de le configurer simplement, par exemple :

Copier le code Le code est le suivant :

// Configuration simple
exiger. config( {

// RequireJS charge tout le code via un chemin relatif baseUrl. baseUrl est généralement défini sur le répertoire de même niveau que le script spécifié par l'attribut data-main. baseUrl: "./js",

// Alias ​​​​du module de script tiers, jquery est plus concis et clair que libs/jquery-1.11.1.min.js
chemins : {

"jquery ; ": "libs/jquery- 1.11.1.min.js"

}

});

// Commencez à utiliser le module jQuery
require([" jquery"], function ($ ) {

//Votre code
//Vous pouvez utiliser les méthodes jquery directement ici, telles que : $( "#result" ).html( "Hello World!" );

});

Utiliser le plug-in jQuery dans Require.js

Bien que jQuery prenne en charge l'API AMD, cela ne signifie pas que le plug-in jQuery est également compatible avec AMD.

Format général du plug-in jQuery :

Copier le code Le code est le suivant :

(fonction ($) {

$.fn.myPlugin = function () {
//Votre propre code de plug-in
};
})(jQuery);

Cependant, on peut utiliser Require.js pour charger un plug-in jQuery avec une légère modification :

Copiez le code Le code est le suivant :

;(function (factory) {
if (typeof definition === "function" && definition.amd) {
// Mode AMD
définir([ "jquery" ] , factory);
} else {
                                                                                                                                                                                                                            ) {
//Code du plug-in
};
}));



Utilisation des composants de l'interface utilisateur jQuery dans Require.js

L'utilisation des composants jQuery UI dans Require.js est similaire. Modifiez simplement le code jQuery Widget Factory et chargez les dépendances de jQuery UI. Par exemple :

Copier le code

Le code est le suivant :(function (widgetFactory) {

if (typeof Définir === "fonction" && définir.amd) {

// Mode AMD
définir("jquery.ui.widget", ["jquery"], fonction ( ) {

                                                                                                                             }
}
(fonction ($, non définie) {

// Code jQuery Widget Factory

}));