jquery.sp-require v0.2.0
$.spRequire
A jQuery plugin to load JavaScript libraries dynamically. Unlike other similar plugins, this plugin considers the loading of CSS files by default. Note that the only library that can not be loaded is the jQuery library, for obvious reasons.
See the demo
folder for complete examples.
Installation
Install bower and execute the following command:
$ bower install jquery.sp-require
Distribution files are under the dist
folder.
Declaring libraries
Libraries are declared in a configuration object. In the following example we have three libraries, and each library is composed by several JavaScript and CSS files. By default libraries are loaded asynchronously. That is: they can be loaded in any order. If you want a library to be loaded after other libraries, you can use the async
attribute. In the below example, library3
is loaded after library2
.
$.require('config', {
libraries: {
lib1: {
sources: {
js: ['js/script11.js', 'js/script12.js', 'js/script13.js'],
css: ['css/style11.css', 'css/style12.css', 'css/style13.css']
}
},
lib2: {
sources: {
js: ['js/script21.js', 'js/script22.js'],
css: ['css/style21.css', 'css/style22.css']
},
requires: ['lib1']
},
// this library IS LOADED AT LAST PLACE
// as it is a 'synchronous' library
lib3: {
async: false,
sources: {
js: ['js/script31.js'],
css: ['css/style31.css']
},
requires: ['lib2']
}
}
});
In some cases we can simplify the configuration object. We can use a string
to indicate a single element, an array of strings
to indicate multiple elements or an object
to indicate more complex objects. For example:
$.spRequire('config', {
// lib1 is composed by a single script
lib1: 'js/script1.js',
// lib2 is composed by two scripts
lib2: ['js/script21.js', 'js/script22.js'],
// lib3 is composed by a single script and requires lib2
lib3: {
sources: 'js/script3.js',
requires: 'lib2'
},
// lib4 is composed by two scripts and requires two libraries
lib4: {
sources: ['js/script41.js', 'js/script42.js'],
requires: ['lib2', 'lib3']
},
// lib5 is composed by a single script and a single CSS file and requires three libraries
// it is also a 'synchronous' library. That is: it is loaded after the required libraries
lib5: {
async: false,
sources: {
js: 'js/script5.js',
css: 'css/style5.js'
},
requires: ['lib1', 'lib2', 'lib3']
},
// lib6 is composed by several scripts and CSS files and requires a single library
// it is also a 'synchronous' library. That is: it is loaded after the required libraries
lib6: {
async: false,
sources: {
js: ['js/script61.js', 'js/script62.js', 'js/script63.js'],
css: ['css/style61.css', 'css/style62.css']
},
requires: 'lib5'
}
});
Basic usage
After declaring libraries in the configuration object, we can load them dynamically. For example:
$.spRequire(['lib1', 'lib2'], function () {
console.log('Libraries are loaded and they are readay to be used');
});
The $.spRequire([libs...])
function returns a jQuery.Promise object, so the above example can also be written as follows:
$.spRequire(['lib1', 'lib2']).done(function () {
console.log('Libraries are loaded and they are readay to be used');
}).fail(function () {
console.log('An error has occurred and the libraries could not be loaded');
}).alwasy(function () {
console.log('This function is always executed');
});
8 years ago