Javascript "using" test

Load HTML, Javascript, CSS on demand before executing code or html snippets

ensure( {js:"some.js", html:"some.html", css: "some.css"}, function(){ ...do your work... } );

Ensure Javascript before calling

Ensure Javascript libraries or your own functions are avaible before calling them. If they are not available, they will be loaded and then your code will execute.

The following button loads a Javascript on-demand and calls a function:

Some.js defines a function named SomeJS like this:

function SomeJS() { alert("Hi I am from SomeJS"); }

The function is available only when the Javascript file is loaded. Clicking on the button will load the javascript and call the function.

Ensure UI loaded before showing/manipulating

Load html UI fragments on demand when needed. For example, popup dialog box or some UI block that appears on some user action. Instead of delivering all such UI fragments upfront, you can load them on-demand

The following button will load a html snippet and CSS on-demand and then show the html inside the dummy DIV below.

When you click the button, an html file and a CSS is loaded on-demand and the UI is inserted inside the dummy DIV. Once the UI is loaded, you can write DOM manipulation code that uses the loaded html elements

This is a dummy DIV where the content will appear

Load application features on de-mand

You can load multiple Javascript libraries, CSS, HTML fragment all at once before delivering some feature to user. This allows you to break up a complex application into small manageable components that are loaded only when needed

Now the season finally, this button will load several Javascripts, HTML and CSS on demand

Here, showPopup() is defined as:


    function showPopup()

    {

        ensure({

            js:     'Components/BlockUI.js', 

            html:   ['Components/BlockUI.html',

                    'Components/Popup.aspx'], 

            css:    'Components/Popup.css'

            }, 

            function()

            {

                BlockUI.show();

                var popup = document.getElementById('Popup');

                if( null == popup ) alert('Popup is not loaded!');

                else popup.style.display = 'block';

            });

    }

What is ensure

ensure allows you to load Javascript, HTML and CSS on demand, whenever they are needed. It saves you from writing a gigantic Javascript framework upfront so that you can ensure all functions are available whenever they are called. It also saves you from delivering all possible html on your default page (e.g. default.aspx) hoping that they might some day be needed on some user action. Delivering unnecessary Javascript, html fragments, CSS during initial loading makes initial loading slow. Moreover, browser operations get slower as there are lots of stuff on the browser DOM to deal with. So, ensure saves you from delivering unnecessary javascript, html and CSS upfront instead load them whenever needed, on-demand. Javascripts, html and CSS loaded by ensure remain in the browser and next time when ensure is called with the same Javascript, CSS or HTML, it does not reload them and thus saves from repeated downloads.

For example, you can use ensure to download Javascript on demand:

ensure( { js: "Some.js" }, function()

        {

    SomeJS(); // The function SomeJS is available in Some.js only

        });

The above code ensures Some.js is available before executing the code. If the SomeJS.js has already been loaded, it executes the function write away. Otherwise it downloads Some.js, waits until it is properly loaded and only then it executes the function. Thus it saves you from deliverying Some.js upfront when you only need it upon some user action.

Similarly you can wait for some HTML fragment to be available, say a popup dialog box. There's no need for you to deliver HTML for all possible popup boxes that you will ever show to user on your default web page. You can fetch the HTML whenever you need them.

ensure( {html: "Popup.html"}, function()

        {

    // The element "Popup" is available only in Popup.html

    document.getElementById("Popup").style.display = "";   
        

        });

The above code downloads the html from "Popup.html" and adds it into the body of the document and then fires the function. So, you code can safely use the UI element from that html.

You can mix match Javascript, html and CSS altogether in one ensure call. For example,

ensure( { js: "popup.js", html: "popup.html", css: "popup.css" }, function() { PopupManager.show(); });

You can also specify multiple Javascripts, html or CSS files to ensure all of them are made available before executing the code:

ensure( { js: ["blockUI.js","popup.js"], html: ["popup.html", "blockUI.html"], css: ["blockUI.css", "popup.css"] }, function() { BlockUI.show(); PopupManager.show(); });

You might think you are going to end up writing a lot of ensure code all over your Javascript code and result in a larger Javascript file than before. In order to save you javascript size, you can define shorthands for commonly used files:

var JQUERY = { js: "jquery.js" };

                var POPUP = { js: ["blockUI.js","popup.js"], html: ["popup.html", "blockUI.html"], 
            css: ["blockUI.css", "popup.css"] };

        ...

        ...

        ensure( JQUERY, POPUP, function() {

    $("DeleteConfirmPopupDIV").show();

        });

        ...

        ...

        ensure( POPUP, function()

        {

    $("SaveConfirmationDIV").show();

        );

While loading html, you can specify a container element where ensure can inject the loaded HTML. For example, you can say load HtmlSnippet.html and then inject the content inside a DIV named "exampleDiv"

ensure( { html: ["popup.html", "blockUI.html"], parent: "exampleDiv"}, function(){});

You can also specify Javascript and CSS that will be loaded along with the html.

Download Code