Explication détaillée et partage d'exemples des compétences d'utilisation_javascript de yepnope.js

Un exemple typique de yepnope.js :

yepnope({
 test : Modernizr.geolocation,
 yep : 'normal.js',
 nope : ['polyfill.js', 'wrapper.js']
});

Cet exemple signifie que si Modernizr.geolocation est vrai, normal.js est chargé, et s'il est faux, polyfill.js et wrapper.js sont chargés.

oui, syntaxe complète  :

yepnope([{
 test : /* boolean(ish) 输入条件    */,
 yep : /* array (of strings) | string - 条件为真时加载的资源 */,
 nope : /* array (of strings) | string - 条件为假时加载的资源 */,
 both : /* array (of strings) | string - 条件无论真假都加载 */,
 load : /* array (of strings) | string - 条件无论真假都加载 */,
 callback : /* function ( testResult, key ) | object { key : fn } 回调函数 */,
 complete : /* function 加载完成后执行的函数 */
}, ... ]);

Pourquoi utiliser yepnope :

Seulement 1,6 Ko après Gzip, ce qui est plus petit que la plupart des chargeurs de ressources
Peut charger CSS et JS
ouais, a réussi tous les tests de navigateur que l'auteur a pu trouver
yepnope sépare complètement le chargement et l'exécution des ressources, vous pouvez donc contrôler l'ordre d'exécution des ressources
Fournissez une API conviviale et favorisez une combinaison logique de ressources
Conception modulaire, vous pouvez étendre les fonctions vous-même (voir Préfixes et filtres plus tard)
Encouragez le chargement des ressources à la demande
Intégré dans Modernizr
Par défaut, il est toujours exécuté dans l'ordre de la liste des ressources (l'ordre de la liste des fichiers que vous fournissez)
Il peut gérer le repli des ressources tout en donnant la priorité au téléchargement de scripts dépendants en parallèle. C'est plus facile à comprendre si vous regardez le code :

.

yepnope([
 {
  load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
   if ( ! window.jQuery ) {
    yepnope( 'local/jquery.min.js' );
   }
  }
 },
 {
  load : 'jquery.plugin.js',
  complete: function () {
   jQuery(function () {
    jQuery( 'div' ).plugin();
   });
  }
 }
]);

D'autres chargeurs devront peut-être faire ceci :

someLoader('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', function(){
 if ( ! window.jQuery ) {
  someLoader( 'local/jquery.min.js', 'jquery.plugin.js' );
 /*注意这点和yepnope的区别，yepnope加载失败后仅需重新加载备用资源即可，不会影响依赖此资源的其他文件执行*/
 } else {
  someLoader( 'jquery.plugin.js' );
 }
});

Inconvénients du oui

Ce n'est pas toujours le plus rapide. Après optimisation, des choses comme labjs peuvent se charger plus rapidement que oui, mais vous devez déterminer quel chargeur utiliser en fonction de votre situation réelle
Vous devez définir un certain en-tête de cache pour la ressource (c'est très important)
Contrairement aux bibliothèques de classes telles que RequireJS qui disposent de leurs propres outils de génération et d'API riches, yepnope n'implémente que les fonctions de base du chargeur
Par défaut, il est toujours exécuté dans l'ordre de la liste de ressources que vous fournissez, ce qui peut affecter la vitesse

Exemples d'utilisation de oui non :

Passer directement dans la chaîne

yepnope( '/url/to/your/script.js' );

Passer un objet

yepnope( {
   load : '/url/to/your/script.js'
   } );

Instance de fonction de rappel (l'url dans la fonction de rappel représente le nom du fichier de ressources chargé ; le résultat représente le résultat du paramètre de test ; la clé représente l'abréviation du nom de fichier lors de l'utilisation du mappage de touches)

yepnope( {
  test : window.JSON,
  load : '/url/to/your/script.js',
  callback : function ( url, result, key ) {
   // whenever this runs, your script has just executed.
   alert( 'script.js has loaded!' );
  }
 } );

instance de fonction complète

yepnope( {
  test : window.JSON,
  nope : 'json2.js',
  complete : function () {
   var data = window.JSON.parse( '{ "json" : "string" }' );
  }
 } );

Exemple de mappage de touches

yepnope( {
  test : Modernizr.geolocation,
  yep : {
   'rstyles' : 'regular-styles.css'
  },
  nope : {
   'mstyles' : 'modified-styles.css',
   'geopoly' : 'geolocation-polyfill.js'
  },
  callback : function ( url, result, key ) {
   if ( key === 'geopoly' ) {
    alert( 'This is the geolocation polyfill!' );
   }
  }
 } );

Bien sûrFonction de rappelVous pouvez aussi écrire comme ceci :

yepnope( {
  test : Modernizr.geolocation,
  yep : {
   'rstyles' : 'regular-styles.css'
  },
  nope : {
   'mstyles' : 'modified-styles.css',
   'geopoly' : 'geolocation-polyfill.js'
  },
  callback : {
   'rstyles' : function ( url, result, key ) {
    alert( 'This is the regular styles!' );
   },
   'mstyles' : function ( url, result, key ) {
    alert( 'This is the modified styles!' );
   },
   'geopoly' : function ( url, result, key ) {
    alert( 'This is the geolocation polyfill!' );
   }
  },
  complete : function () {
   alert( 'Everything has loaded in this test object!' );
  }
 } );

3 préfixes officiellement fournis par yepnope

Préfixe css : les fichiers avec n'importe quel suffixe peuvent être chargés sous forme de fichiers CSS

yepnope( 'css!mystyles.php?version=1532' );

preload ! Préfixe : Préchargez la ressource dans le cache, mais ne l'exécutez pas (elle ne sera exécutée qu'au prochain chargement)

yepnope( {
 load : 'preload!jquery.1.5.0.js',
 callback : function ( url, result, key ) {
  window.jQuery; //undefined
  yepnope(jquery.1.5.0.js);
  window.jQuery; //object
 }
} );

Préfixe(s) ie! : Déterminez s'il s'agit d'un navigateur IE (en plus de ie!, il prend également en charge ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8 et ielt9 (ces types de préfixe)

yepnope({
 load: ['normal.js', 'ie6!ie7!ie-patch.js'] // ie6 or ie7 only (on patch)
});