Un exemple typique de yepnope.js :
yepnope ({test: modernizr.geolocation, yep: 'normal.js', non: ['polyfill.js', 'wrapper.js']});Cet exemple signifie que si modernizr.geolocation est vrai, normal.js est chargé, polyfill.js et wrapper.js sont chargés.
Syntaxe complète de Yepnope :
yepnope ([{test: / * booléen (ish) entrez la condition * /, yep: / * array (des chaînes) | String - Ressources chargées lorsque la condition est vraie * /, non: / * array (des chaînes) | String - Ressources chargées lorsque la condition est fausse * /, les deux: le tableau (de * * chaîne) | String - Resources chargées lorsque la condition est fausse * chargé lorsque la condition est vraie et fausse * /, rappel: / * fonction (testResult, key) | objet {key: fn} function de rappel * /, complète: / * fonctions de fonction exécutées après le chargement * /}, ...]);Pourquoi utiliser Yepnope :
Seulement 1,6k après que GZIP soit plus petit que la plupart des chargeurs de ressources
Peut charger CSS et JS
Yepnope passe des tests pour tous les navigateurs que l'auteur peut trouver
Yepnope sépare complètement le chargement et l'exécution des ressources, vous pouvez donc contrôler l'ordre de l'exécution des ressources
Fournit une combinaison logique d'API amicale et facilite les ressources
Conception modulaire, vous pouvez étendre vos propres fonctions (voir les préfixes et les filtres plus tard)
Encourager le chargement des ressources à la demande
Intégré dans modernizr
Par défaut, il est toujours exécuté dans la liste des ressources (la liste des fichiers que vous fournissez)
Il peut gérer les retombées des ressources et prioriser le téléchargement de scripts dépendants en parallèle. Il est plus facile à comprendre après avoir lu le code:
yepnope ([{chargement: 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', complet: function () {if (! window.jquery) {yepnope 'jQuery.plugin.js', complet: fonction () {jQuery (function () {jQuery ('div') .plugin ();});D'autres chargeurs peuvent devoir gérer ceci:
Someloader ('http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js', fonction () {if (! window.jquery) {Someloader ('local / jquery.min.js', 'jQuery.plugin.js'); / * note la différence entre ce domaine et yeper. Yepnope ne se charge pas, vous n'avez qu'à recharger la ressource de sauvegarde, ce qui n'affectera pas l'exécution d'autres fichiers qui dépendent de cette ressource * /} else {Someloader ('jQuery.plugin.js');});Les lacunes de Yepnope
Pas toujours le plus rapide, comme les LabJ, etc., ne peuvent se charger plus rapidement que Yepnope après optimisation, mais vous devez considérer le chargeur à utiliser en fonction de votre situation réelle.
Vous devez définir certains en-têtes de cache pour la ressource (c'est très important)
Contrairement à OBSIDJS et à d'autres bibliothèques de classe qui ont leurs propres outils de génération et les API riches, Yepnope implémente uniquement la fonction de chargeur de base.
Par défaut, il est toujours exécuté dans l'ordre de la liste des ressources que vous fournissez, ce qui peut affecter la vitesse
Exemple d'utilisation de Yepnope :
Passer directement dans une chaîne
yepnope ('/url/to/your/script.js');Passer dans un objet d'objet
yepnope ({chargement: '/url/to/your/script.js'});Instance de fonction de rappel (URL dans la fonction de rappel représente le nom de fichier de ressource chargé; le résultat représente le résultat du paramètre de test; la clé représente l'abréviation du nom du fichier lors de l'utilisation du mappage de clé)
yepnope ({test: window.json, chargement: '/url/to/your/script.js', callback: function (url, result, key) {// chaque fois que cela s'exécute, votre script vient d'exécuter. alert ('script.js a chargé!');}});Exemple de fonction complète
yepnope ({test: window.json, non: 'json2.js', complet: function () {var data = window.json.parse ('{"json": "string"}');}});Instance de mappage clé
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'régulier-syles.css'}, non: {'mStyles': 'Modified-styles.css', 'Geopoly': 'Geolocation-Polyfill.js'}, Callback: fonction (url, résultat, key) {if (key ==. alert ('Ceci est la géolocalisation polyfill!');}}});Bien sûr, vous pouvez également écrire la fonction de rappel comme ceci:
yepnope ({test: modernizr.geolocation, yep: {'rstyles': 'régulièrement.css'}, non: {'mStyles': 'modified-styles.css', 'geopoly': 'geolocation-polyfill.js'},}: {{`` RSTYLES ' Les styles réguliers! ');3 Préfixes fournis par Yepnope
CSS! Préfixe: tout fichier avec suffixe peut être chargé en tant que fichier CSS
yepnope ('css! mystyles.php? version = 1532');Précharge! Préfixe: Préchargez la ressource dans le cache, mais ne pas exécuter (exécutez-la la prochaine fois que vous le chargerez)
yepnope ({chargement: 'preload! jQuery.1.5.0.js', rappel: fonction (url, résultat, key) {window.jquery; // non défini yepnope (jQuery.1.5.0.js); window.jquery; // objet}});IE! Prefix (ES): Déterminez si le navigateur IE (en plus de IE!, Il prend également en charge IE5, IE6, IE7, IE8, IE9, IEGT5, IEGT6, IEGT7, IEGT8, IELT7, IELT8 et IELT9)
yepnope ({chargement: ['normal.js', 'ie6! ie7! ie-patch.js'] // ie6 ou ie7 uniquement (sur patch)});