A typical example of yepnope.js :
yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js']});This example means that if Modernizr.geolocation is true, normal.js is loaded, polyfill.js and wrapper.js are loaded.
yepnope full syntax :
yepnope([{ test : /* boolean(ish) Enter the condition */, yep : /* array (of strings) | string - Resources loaded when the condition is true */, nope : /* array (of strings) | string - Resources loaded when the condition is false */, both : /* array (of strings) | string - Resources loaded when the condition is false */, load : /* array (of strings) | string - Resources loaded when the condition is true and false */, callback : /* function ( testResult, key ) | object { key : fn } callback function */, complete : /* function Functions executed after loading*/}, ... ]);Why use yepnope :
Only 1.6K after Gzip is smaller than most resource loaders
Can load CSS and JS
yepnope passes tests for all browsers that the author can find
yepnope completely separates resource loading and execution, so you can control the order of the resource execution
Provides a logical combination of friendly APIs and facilitates resources
Modular design, you can expand your own functions (see Prefixes and filters later)
Encourage on-demand loading of resources
Integrated in Modernizr
By default, it is always executed in the order of resource list (the order of file list you provide)
It can handle resource fallbacks and still prioritizes downloading of dependent scripts in parallel. It is easier to understand after reading the 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(); }); } }]);Other loaders may have to handle this:
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' ); /*Note the difference between this and yepnope. After yepnope fails to load, you only need to reload the backup resource, which will not affect the execution of other files that depend on this resource*/ } else { someLoader( 'jquery.plugin.js' ); }});yepnope's shortcomings
Not always the fastest, like labjs, etc., may load faster than yepnope after optimization, but you need to consider which loader to use according to your actual situation.
You need to set certain cache headers for the resource (this is very important)
Unlike RequireJS and other class libraries that have their own generation tools and rich APIs, yepnope only implements the basic loader function.
By default, it is always executed in the order of the resource list you provide, which may affect the speed
yepnope usage example :
Passing in a string directly
yepnope( '/url/to/your/script.js' );
Pass in an Object object
yepnope( { load : '/url/to/your/script.js' } );Callback function instance (url in the callback function represents the loaded resource file name; result represents the result of the test parameter; key represents the abbreviation of the file name when using key mapping)
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!' ); } } );Complete function example
yepnope( { test : window.JSON, nope : 'json2.js', complete : function () { var data = window.JSON.parse( '{ "json" : "string" }' ); } } );Key mapping instance
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!' ); } } } );Of course you can also write the callback function like this:
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 Prefixes provided by yepnope
css! Prefix: Any file with suffix can be loaded as a css file
yepnope( 'css!mystyles.php?version=1532' );
preload! Prefix: Preload the resource into the cache, but not execute (execute it next time you load it)
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 }} );ie! Prefix(es): determine whether IE browser (in addition to ie!, it also supports ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8, and ielt9)
yepnope({ load: ['normal.js', 'ie6!ie7!ie-patch.js'] // ie6 or ie7 only (on patch)});