Loader YUI 3.x

Approche classique

Supposons que nous souhaitons utiliser le module node de YUI 3.x (permet de manipuler le DOM) dans notre page web. Pour que ce module fonctionne il faut disposer dans la même pages de toutes ses dépendances, ce qui donne :

<!-- inclure le cœur YUI 3.x --> 
<script type="text/javascript" src="../../build/yui/yui.js"></script> 
<!-- inclure les dépendances du  module node --> 
<script type="text/javascript" src="../../build/oop/oop.js"></script> 
<script type="text/javascript" src="../../build/event/event.js"></script> 
<script type="text/javascript" src="../../build/dom/dom.js"></script> 
<script type="text/javascript" src="../../build/node/node.js"></script>   

En plus vous devez inclure votre propre code javascript dans le page, permettant d'utiliser le module node, ce qui donne :

  
var elem = YUI().get('#demo');

Comme vous pouvez le voir cela alourdi significativement votre page, alors qu'on n'a utilisé qu'un seul module. Si vous souhaitez utiliser un autre module, il faudra faire le même travail tout en faisant attention à ne pas inclure deux fois la même dépendance, pourquoi ? Parce que plusieurs dépendances sont partagées entre plusieurs modules.

Approche dynamique

Charger un module YUI 3.x

Comme expliqué dans les section précédentes, YUI 3.x fournie un utilitaire appelé Loader permettant de gérer dynamiquement les modules et leurs dépendances. Voyons comment cela marche, prenons le même exemple que précédemment, nous souhaitons utiliser le module node. Cette fois, pour que ce module fonctionne, il faut installer YUI 3.x sur notre page :

<!-- inclure le cœur YUI 3.x --> 
<script type="text/javascript" src="../../build/yui/yui.js"></script> 

Et puis écrire notre propre code permettant de l'utiliser le module node dynmaiquement, ce qui donne :

YUI().use('node' , function (Y) { 
    
  var elem = Y.get('#demo');
})

Explication, on crée une instance YUI

YUI() ...

on lui demande de charger le module node

.use('node', ...

Et enfin on lui demande d'exécuter notre code javascript utilisant le module en question

... , function (Y) { 
    
  var elem = Y.get('#demo');
})

Charger tous les modules YUI 3.x

Quand nous créons une instance YUI, on lui demande de charger le module *, c'est un alias qui signifie tous les modules, ce qui donne :

YUI().use('*' , function (Y) { 
      
})

Charger des modules externes

Par modules externes, on entend modules non présents dans YUI 3.x, par exemple les modules YUI 2.x, JQuery , ou tout autre librairie que vous souhaiteriez utiliser, et même vos propre script. Comment définir votre module :

 
  
nom : requis, le nom du module
 
  
type : requis, le type du module (js ou CSS)
 
  
fullpath : l'URL pour accéder au module
 
  
requires: liste de dépendances requis par ce module

Un exemple avec le calendrier YUI 2.x, et un de vos script qu'on appellera votreScript1.js et qui utilise la librairie JQuery :

YUI({ 
   
   modules :  {

      'yui2-yde': { 
	            fullpath: "http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js" 
	        },
      'yui2-calendarcss': { 
	            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/assets/skins/sam/calendar.css", 
	            type: 'css' 
	        },  
       'yui2-calendar': { 
	            fullpath: "http://yui.yahooapis.com/2.5.2/build/calendar/calendar-min.js", 
	            requires: ['yui2-yde', 'yui2-calendarcss'] 
	        } ,
        'jquery' : {
		name :"jquery",
		type :"js",
		fullpath :"http://yoja-web.com/dev/build/plugins/jquery/jquery.js"
	},
       
       'votrescript1' : {
		name :"votrescript1",
		type :"js",
		fullpath :"http://www.votresite.com/votrescript1.js"
                requires: ['jquery''] 
	}
   }      

}).use('yui2-calendar', 'votrescript1 ',  function (Y) { 
  //Le calendrier 'yui2-calendar' est disponible, ainsi que ses dépendances 
  //le module CSS  'yui2-calendarcss' et le script 'yui2-yde'

 //Votre script 'votrescript1' est disponible, ainsi que JQuery 
 //chargé comme dépendance de  'votrescript1'
})

Vous pouvez mettre le contenu de l'exemple dans un autre script qu'on appellera votreScript2.js, l'inclusion dans votre page se reduit à ce qui suit :

<!-- inclure le cœur YUI 3.x --> 
<script type="text/javascript" src="../../build/yui/yui.js"></script> 
<!-- inclure votre script 2 --> 
<script type="text/javascript" src="http://www.votresite.com/votrescript2.js"></script>