Detailed explanation and example sharing of yepnope.js usage_javascript skills

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, and if it is false, polyfill.js and wrapper.js are loaded.

yepnope complete syntax :

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 加载完成后执行的函数 */
}, ... ]);

Why use yepnope:

Only 1.6K after Gzip which is smaller than most resource loaders
Can load CSS and JS
yepnope passed all browser tests that the author could find
yepnope completely separates resource loading and execution, so you can control the execution order of resources
Provide friendly API and promote logical combination of resources
Modular design, you can expand the functions yourself (see Prefixes and filters later)
Encourage on-demand resource loading
Integrated in Modernizr
By default, it is always executed in the order of the resource list (the order of the file list you provide)
It can handle resource fallback and still prioritize downloading dependent scripts in parallel. It is easier to understand if you look at 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 do 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' );
 /*注意这点和yepnope的区别，yepnope加载失败后仅需重新加载备用资源即可，不会影响依赖此资源的其他文件执行*/
 } else {
  someLoader( 'jquery.plugin.js' );
 }
});

Disadvantages of yepnope

It is not always the fastest. After optimization, things like labjs may load faster than yepnope, but you need to consider which loader to use based on your actual situation
You need to set a certain cache header for the resource (this is very important)
Unlike class libraries such as RequireJS that have their own generation tools and rich APIs, yepnope only implements basic loader functions
By default, it is always executed in the order of the resource list you provide, which may affect the speed

yepnope usage examples:

Directly pass in the string

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

Pass in an Object

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

Callback function instance (url in the callback function represents the name of the loaded resource file; 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 instance

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

Key mapping example

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 courseCallback functionYou can also write 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 officially provided by yepnope

css! Prefix: Files with any suffix can be loaded as css files

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

preload! Prefix: Preload the resource into the cache, but do not execute it (it will only be executed the next time it is loaded)

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 it is an IE browser (in addition to ie!, it also supports ie5, ie6, ie7, ie8, ie9, iegt5, iegt6, iegt7, iegt8, ielt7, ielt8, and ielt9 These types of Prefix)

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