yepnope.js asynchronously loads resource files_javascript skills

Typical code example

Copy code The code is as follows:

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

When Modernizr. When geolocation is true, the yep item is loaded, which is "normal.js", otherwise the nope item is loaded - multiple files can be loaded at the same time.

What is the difference between yepnope and the existing xxx script loader?
Personally, I think the main reasons are these two points:

Can handle javascript and css at the same time
Be able to conditionally load all parameters of
yepnope

Copy code The code is as follows:

yepnope([{
test : /* boolean(ish) - the expression you want to check for authenticity* /,
yep : /* array (of strings) | string - load this when test is true*/,
nope : /* array (of strings) | string - load this when test is false* /,
both : /* array (of strings) | string - load under any circumstances */,
load : /* array (of strings) | string - load under any circumstances */,
callback: /* function (testResult, key) | object { key: fn} Execute the corresponding method when a certain url is loaded successfully*/,
complete: /* Execute this method when all functions are loaded*/
}, ... ]);

The parameters here can be array or object, which is useful when loading multiple resource files.

yepnope loads an instance of jquery

Copy code The code is as follows:

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();
});
}
}]);

This code loads jquery and jquery.plugin.js asynchronously, and even provides a backup handler for jquery loading failure.