Comment charger plusieurs plugins JQuery?

Comment charger plusieurs plugins JQuery utilisant le $ pour accéder aux méthodes? Mon fichier de configuration ( config.js ) est le suivant:

 var require = { paths: { "jquery": "lib/jquery", "jqueryui": "lib/jquery-ui", "semanticui": "lib/semantic", }, shim: { "jqueryui": { exports: "$", deps:['jquery'] }, "semanticui": { exports: "$", deps: ['jquery'] } }};

Mon fichier d’application ( load.js ) est défini comme suit:

 define(['jqueryui', 'semanticui'], function ($) { console.log($); })

J’ai trouvé que le $ n’était pas défini. Cependant, lorsque j’utilise le code suivant ci-dessous:

 define(['semanticui', 'jqueryui'], function ($) { console.log($); })

$ est défini comme l’object jQuery .

Est-il possible d’utiliser le $ pour accéder à jQuery et aux méthodes définies par les plugins?

Ceci est le fichier index.html que j’utilise:

         Dashboard           AthenaViz
 
 
        Dashboard    Visualize  
      Name  Date Joined  E-mail  Called  
 
   John Lilki  September 14, 2013  [email protected]  No  
  Jamie Harington  January 11, 2014  [email protected]  Yes  
  Jill Lewis  May 11, 2014  [email protected]  Yes  
  Jill Lewis  May 11, 2014  [email protected]  Yes  
  Jill Lewis  May 11, 2014  [email protected]  Yes

Name	Date Joined	E-mail	Called
John Lilki	September 14, 2013	[email protected]	No
Jamie Harington	January 11, 2014	[email protected]	Yes
Jill Lewis	May 11, 2014	[email protected]	Yes
Jill Lewis	May 11, 2014	[email protected]	Yes
Jill Lewis	May 11, 2014	[email protected]	Yes

Vous ne devez pas utiliser une interface shim avec l’interface utilisateur jQuery, car elle appelle define par elle-même et shim ne concerne que les modules n’appelant pas define . Si vous regardez le code ici , vous verrez près du début du fichier:

 (function( factory ) { if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define([ "jquery" ], factory ); } else { // Browser globals factory( jQuery ); } }(function( $ ) {

Et il semblerait que la fonction factory ne renvoie rien, ce qui explique pourquoi vous avez défini $ sur indéfini.

L’interface utilisateur sémantique a besoin d’une shim car elle n’appelle pas define .

Je suggère qu’au lieu d’essayer de récupérer $ depuis les plugins, vous l’obtenez depuis jquery lui-même:

 define(['jquery', 'jqueryui', 'semanticui'], function($) { console.log($); });

L’ordre peut sembler étrange mais cela fonctionnera bien. Vous devez réfléchir à la manière dont les plugins jQuery s’installent: ils modifient l’object jQuery, qui est $ ici. Donc, le code ci-dessus chargera jquery , puis jqueryui , qui modifiera jQuery pour s’append lui-même en tant que plugin, et charger semanticui , qui modifiera également jQuery pour s’append lui-même en tant que plugin. (En fait, semanticui pourrait se charger avant jqueryui parce que l’un ne dépend pas de l’autre, mais cela ne change pas le résultat final.) Ainsi, les $ que vous entrez dans votre fonction anonyme auront les plugins installés dessus.

Je fais ce que je suggère par dessus tout le temps, sans aucun problème, mais j’utilise l’idiome de CommonJS:

 define(function (require, exports, module) { var $ = require("jquery"); require("bootstrap"); require("jquery.bootstrap-growl"); });

bootstrap et jquery.bootstrap-growl s’installent eux jquery.bootstrap-growl mêmes en tant que plugins jQuery, mais j’obtiens ma référence de jquery lui-même.

(L’idiome de CommonJS n’est pas meilleur. C’est juste ce que j’utilise.)