Categories

jQLoader

jQLoader is a jQuery plugin that helps you loading javascript libraries and their dependencies. It is a very light wight plugin with a small set of API that are specifically created to help you organize your projects and simplify the way you assemble your code. If you want to write code in a modular, reusable and scalable way jQLoader is a solutions you may consider.

Imagine the following scenario: your project uses a javascript library that also requires three more libraries and one of the required libraries uses two utilities that you probably wrote for a different project.

+ application.js
        + lib1.js
        + lib2.js
                + utils1.js
                + utils2.js
        + lib3.js

How do you keep track of these dependencies?

Many developers choose to keep their project simple and write all their code in one single file. The problem with this approach is that if there are portions of your project that can be reused, they will be tight to an specific project. You may copy some code from that project and paste it onto another project, however if you ever need to update the common code then you have to figure out which of your projects need to be updated. This creates a maintenance nightmare.

A more scalable approach is to include your libraries as separate files in you HTML page. This will require you to keep a mental map of all the files and their dependencies. And again you may choose to keep your projects simple, basically because it is hard to track two, three or more levels of dependencies.

		<script src="lib3.js"><!--mce:0--></script>
		<script src="utils1.js"><!--mce:1--></script>
		<script src="utils2.js"><!--mce:2--></script>
		<script src="lib2.js"><!--mce:3--></script>
		<script src="lib1.js"><!--mce:4--></script>
		<script src="application.js"><!--mce:5--></script>

jQuery is a good example of this approach. There is nothing wrong with that, but including javascript files in the header of you HTML page does not cover the issues with nested dependencies. For instance, If a jQuery plugin requires another jQuery plugin, you need to know that in advance, so you can add the required files in the header of your HTML page. Keep in mind that your projects will require more that jQuery plugins. Basically the challenge is to manage you own code.

How can jQLoader help you?

You probably don’t want to change the way you write your code just because I say so. In fact you don’t have to. You should be able to organize your old code or the code that you are about to write in a logical modular way. The goal that jQLoader will help you accomplish is to organize your code in reusable pieces and automatically combine those pieces at run time or in advance before you publish your project. Different project may need different combination, but you don’t have to worry. Once you organize your code in multiple files the only thing that you have to do is to declare the immediate dependencies of each piece and that will be it. Regardless of how many levels of dependencies you may end up having, jQLoader will do the stitching for you.

// application.js sample code
 
   $.jqloader.require("lib1.js");
   $.jqloader.require("lib2.js");
   $.jqloader.require("lib3.js");
   function Application(){
       // code goes here
   }
 
// lib2.js sample code
 
   $.jqloader.require("utils1.js");
   $.jqloader.require("utils2.js");
   function Library2(){
       // code goes here
   }

How does it work?

You only need to worry about your initial application file. Once you indicate that you application requires additional files jQLoader will create a queue and load all the dependencies first before reporting that you application has been loaded. Similarly, if any of the dependencies require other files, those files will be added to the queue. This will guarantee that all the required files will be available before you application is initialized. Here is an example that shows how to load your application using jQLoader:

?View Code JAVASCRIPT
var callback = function(){
    alert("Hello jQLoader");
};
$.jqloader.load("application.js", callback):

Is that it?

For the most part, yes. You can use two basic API to get the job done: $.jqloader.require() and $.jqloader.load(). jQLoader also allows you to register classes under a custom name space or unique key name. This is particularly handy if you embrace Object Oriented Programming. The $.jqloader.run() API makes even simpler to run your application. The $.jqloader.publish() API was design to stitch all the required files and print them in the screen without executing you application. Finally, jQLoader supports configuration objects and parameters that will make this plugin as flexible as you need. Here is the short list of public API:

  • load(url, options)
  • run(url, options)
  • publish(url, options)
  • require(url)
  • register(nameScape, classDef)
  • get(nameScape)

Get jQLoader

No more talk, here are some links: