'rsLIB' Tutorial - by GuerraTron

rsLIB _{REQUIRE SYNC LIBRARY}

This is a Loader which insert the linked-scripts parameters in the HTML-HEAD section SYNCHRONOUSLY, but without AJAX.
It loads Scripts (js, json, ...) and even style sheets (CSS) DINAMICALLY and SYNCHRONOUS.
File autoLoader for javascript Libraries (multi-scripts).
copyright @ 2015 - Juan José Guerra Haba <dinertron@gmail.com>
License: Free. GPL.v3

rsLIB Tutorial

Load
Options
Code
onComplete(..) event
RSLIB obj

Of course the first step starts loading the script. We use the tag HTML < script ... / > in the Head page.

The script handles dynamically import scripts / libraries listed in the options and, once completed, built a GLOBAL object rsLIB, which contains some interesting properties and methods, among others, a very useful event onComplete (..) to pass a callback. You only need to use it if you do use a resource immediately (variable, method, object ...) from loaded library.

Load the Script:

We import the script in the Head page area, for example:
<script id="rsLIB_ID" class="rsLIB_CLASS" type="text/javascript" src="./scripts/rsLIB.js"> {JAVASCRIPT OPTIONS} </script>

The most interesting thing here is the area marked as braces {JAVASCRIPT OPTIONS}. Well, this is the way in which the script will pick the passed option, which must be a object Javascript.

Options:

As already mentioned, rsLIB works with options and these are expected as an object embedded within the tag script of the own call to this loader. These options should appear as follows:

nameLIB: name of the library to load.
pathToLIB: path (relative or absolute) to the library directory with respect to html caller.
scripts: An array with the path relative to each script file you want to load. The last element of the array will not be charged, which is only indicates the main on which to launch the 'onComplete (..)' method.

The call in the HTML Head might be:
/* Anonymous object for options */ { nameLIB: "PolyArea", pathToLIB: "./scripts/PolyArea/", scripts: ["./scripts/PolyArea/PolyArea.js", "./scripts/PolyArea/css/polyArea.css", "./scripts/PolyArea/PolyArea.js"] //The latter will not be loaded, only determines the event 'onComplete (..)' }

For reasons of safety the options will be destroyed after use, leaving no trace in the HTML generated, helping to increase the SECURITY layer and ABSTRACTION.

Code:

If you need to use a variable or execute any library function immediately, it should be within the event rsLIB.onComplete(callback) passing a function as a callback.
For example, if you need to use the variable objLanguage it which is defined in an external script imported by this loader, would::


                window.addEventListener("load", 
                 function pageLoaded(){
                  /* rsLIB.onComplete(callback) function passing a function as a callback. */
                  rsLIB.onComplete(
                   function callBack01(){  //callback
                    document.getElementById("container").innerHTML = "Language: " + objLanguage.language ;
                   }
                  );
                 }
                , false);

DYNAMIC loading is something NO-STANDARD employing an UNORTHODOX way and can cause different behaviors in certain browsers ... When produced a modification of DOM at the same time it is building its ELEMENT TREE incurred in a kind of contradiction is solved differently in different browsers.

P.D.: Some libraries NEED synchronous mode for proper operation)

'onComplete( callback )' EVENT:

This method has been implemented to wait to use variables which were defined a immediately manner. These variables must be executed in the CALLBACK function passed as a parameter. For Example:


               /** An event callback function which include with the immediate code
                 * @param callback */
                rsLIB.onComplete( function callBack(){
                 //code to execute when the scripts are loaded (the main)
                });

THE 'rsLIB' OBJECT:

Once interpreted the file rsLIB.js, it create the global variable rsLIB' representing the LOADER object. The following members are created:

options: the complete object detected as embedded options.
nameLIB: name of the library to load.
pathToLIB: the path to the library, based on the situation of HTML caller.
scripts: the array of scripts to load the library.
get: get properties of embedded object.
isset: utility method to check whether a variable is undefined.
onComplete(..): The event method to which can be passed a 'callback' function as the only parameter.