Need help with jsdefer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

BorisMoore
123 Stars 17 Forks Other 16 Commits 7 Opened issues

Description

Script loader, using the 'Deferred' pattern for async operations.

Services available

!
?

Need anything else?

Contributors list

# 21,947
JavaScr...
CSS
cldr
l10n
16 commits

JsDefer recent Status:

There have been some breaking changes in jQuery APIs for Deferred since JsDefer was implemented.

A recent JsDefer commit modifies jquery.defer.js to make it agains compatible with current jQuery APIs.

However the non-jquery version of JsDefer - jsdefer.js - uses the previous Deferred APIs, which means that you cannot currently load jsdefer.js and then have it load jQuery! You need to determine up front whether you want the version with or without jQuery...

Apart from the above fixes, JsDefer is not being actively updated at the moment, but will probably become active again at some point after JsViews V1.0 has shipped.

JsDefer Features:

  • Wrapped scripts
  • Unwrapped scripts
  • Optional script definition (deferDef) defines dependencies
  • Optional deferring of DomReady at global or individual request level
  • Can also add dependencies for script - or add new definitions - in the script itself, if wrapped
  • Execution order based on dependency
  • Parallel/serial loading based on definitions, dependency, and wrapped versus unwrapped, and whether dependencies are defined in separate def file or in script itself.
  • Passing options to scripts
  • Wrapped script can provide a return value
  • Failure bubbling
  • Integration with Deferred (as in jQuery 1.5) enables or simplifies many use-case scenarios
  • Use of $,when and other deferred features:
    when( scripts, json, domReady ).then( myCallback );
  • Exposing 'promises' (named deferreds)
  • Setting: min true/false, for debug versus minified versions
  • Wrapped scripts 'self executing' when used as static scripts
  • Composite scripts (also able to be loaded statically in page)
  • jQuery independent version
  • Small

Demos

Complete Demos

  • Different versions of the Movies Demo app are provided to illustrate different use scenarios for JsDefer.

Feature tests:

  • Basic Features: Currently no unit tests are provided (they will come) but the FeatureTests/Basic folder provides some examples for testing different feature details.
  • Advanced Features: This folder shows how to use JsDefer with or without jQuery. These samples illustrate some less-commonly used features. The AsyncTemplates folder explores some experimental integration with jQuery Templates.

Syntax Examples:

Request deferred script loading

// Note: If scripts have been defined in a deferDef declaration, this will
// trigger parallel loading of all dependent scripts,
// and will execute scripts in the correct order

// Load movies script $.defer( "...movieApp.js" ) .done( workWithMovies ) .fail( failCallback );

Deferred script loading using delayed DomReady event

$.deferSettings.delayDomReady = true;

$.defer( "...movieApp.js" );

$( function() { workWithMoviesAndDom(); });

Passing options and using return value

$.defer( "...movieApp.js", { pageSize: 4 })
    .done( function( movieApp ) {
        workWithMovies( movieApp );
    });

Using $.when to handle parallel async processes

// Load both data and scripts in parallel,
// and process when data, scripts and DOM are ready
$.when(
    $.defer( "...movieApp.js", { pageSize: 4 } ),
    getMovies( "Cartoons" ),
    $.ready
)
.done( function( movieApp, data ) {
    workWithMoviesAndDom( movieApp );
});

Setting default options

// Use unminified versions of script
$.deferSettings.min = false;

// Delay DomReady by default. (Can also override as a setting, for individual defer() requests.) $.deferSettings.delayDomReady = true;

Create deferDef definition - to load and execute dependencies in correct order

$.deferDef({
    // Just set the URL
    tmpl: "http://...jquery.tmpl.js",

// Specify url and dependencies
tmplplus: {
    url: "http://.../jquery.tmplplus.js",
    depends: "tmpl"
},

tmplCombined: {
    url: "myCombinedFiles/tmplCombined.js",

    // This script has both minified and unminified versions
    urlMin: "myCombinedFiles/tmpl.min.js",

    // It is a combined script: it can be used in place of the tmpl and tmplplus scripts
    contains: [ "tmpl", "tmplplus" ]
},

yahooHelper: {
    url: "http://.../yahooHelper.js",

    // This script is not wrapped, and therefore will load sequentially after its dependencies:
    // i.e. it will only be requested after any script that it depends on has loaded and executed
    bare: true,
},

movieApp: {
    url: "movieApp.js",

    // Note that this script is wrapped (default is bare: false), and so will be loaded in parallel along
    // with its dependencies. However its contents will not be executed until after execution of dependent scripts.

    // Depends on both a declared and undeclared scripts
    depends: [ "tmplplus", "http://...datamodel.js", "yahooHelper" ]
}

});

// Can optionally use typed methods to do a deferred load of any resource script defined in // the deferDef definition (plus its dependencies):

$.defer.movieApp() .done( workWithMovies ) .fail( failCb );

Wrapped script

Note: This can be loaded by any script loader that recognizes the $deferRun global name for the wrapper function.

$deferRun(

function( $, options ) {

// Script code here
doStuff( options );
return myObject;

}

);

Self-executing wrapper

Use this wrapper syntax to create a wrapped script which can also be loaded as a static script in the absence of a script loader recognizing the $deferRun wrapper function

((window.$deferRun || function( run ){ run(); }) (

function( $, options ) {

// Script code here

}

));

Declare dependencies on script itself

Note: If the dependent script was already declared in a deferDef definition, then it will have loaded in parallel. Otherwise, if only declared here, it will be loaded in series - after this script loads, but before the body of this script is executed.

((window.$deferRun || function( run ){ run(); }) (

function( $, options ) {

// Script code here

},

// Declare one or more dependent scripts "myOtherCode.js"

));

Declare dependencies and a deferDef definition, on the script itself

((window.$deferRun || function( run ){ run(); }) (

function( $, options ) {

// Script code here

}, { // Declare one or more dependent scripts depends: ["...myOtherCode.js", "myComponent"],

// Declare some deferDer script definitions
def: {
    myComponent: {
        url: "...myComponent.js",
        minUrl: "...myComponent.min.js",
        depends: "...componentCore.js"
    }
}

}));

Script combination: Composite scripts

The different wrapped scripts within this script are identical to the individual wrapped scripts that they replace.

tmplCombined.js:

$deferRun(
function( $, options ) {

$deferRun(
function( $, options ) {
    // Script code for tmpl.js here
});

$deferRun(
function( $, options ) {
    // Script code for tmplplus here
});

});

Associated script definition, and invocation

$.deferDef({
    tmplCombined: {
        url: "myCombinedFiles/tmplCombined.js",

    contains: [ "http://...tmpl.js", "http://...tmplplus.js" ]
}

});

$.defer.tmplCombined();

// Note: The above will make one HTTP request for the composite file, // but is otherwise equivalent to the following two requests:

//$.defer( "http://...tmpl.js" ); //$.defer( "http://...tmplplus.js" );

// The individual wrapped scripts will execute in the correct order based on the // declared dependencies of the individual scripts files they represent, // but the individual files will not be loaded, once the composite // script has been requested.

Can also declare deferDef script definitions, dependencies, etc. on the composite file itself

$deferRun(

function( $, options ) {

$deferRun(
function( $, options ) {
    // Script code for sub script 1 here
});

$deferRun(
function( $, options ) {
    // Script code for sub script 2 here
});

}, { depends: [ "...OtherCode.js", "foo" ], def: { myVal: { url: "...foo.js", minUrl: "...foo.min.js", depends: "...fooCore.js" } } }

);

Self-executing composite script

Use the following wrapper syntax to create a composite script that can also be loaded statically

Note: if loaded statically, the individual wrapped scripts will execute in document order

    ((window.$deferRun || function( run ){ run(); }) (
    function( $, options ) {

    ((window.$deferRun || function( run ){ run(); }) (
    function( $, options ) {
        // Script code for sub script 1 here
    }));

    ((window.$deferRun || function( run ){ run(); }) (
    function( $, options ) {
        // Script code for sub script 2 here
    }));

    ((window.$deferRun || function( run ){ run(); }) (
    function( $, options ) {
        // Script code for sub script 3 here
    }));

}));

App example:

Inline deferDef

Delayed DomReady






We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.