My Micro-Library called Jet.js

My love for Javascript just get bigger and also my knowledge but that's not what I'm going to blog about today.. at this time I'm going to post about the Micro-Library I created Jet.js

Jet.js

One of the senior developers at my former company was having some performance issues on a particular Web Application.. After see the code at my perspective one of the problems were all the plugins (was more than 15) being download on the entire Application.

I decided create a very lightweight library (called modular-script-loader) to solve that problem downloading scripts asynchronously (non-block) and on demand (not for all the pages).

So last night I decided re-write entirely using better Design pattern and cleaner code I also gave a better name "Jet.js".

Code

Check out on Github <a href="http://www.github.com/weblancaster/jet" target=""_blank title="Jet js">Jet.js

My goal here is to make the Web Application faster therefore download scripts asynchronously (non-block), better organized script dependency and very very lightweight.

Below is the code to make the "magic" happen..just a few lines of code.

/*!
 * Jet.js (Micro-library)
 * Version: 0.3
 * http://git.io/LwFXlg
 * Released under the MIT license
 *
 * Author's name: Michael Lancaster
 * website: www.bymichaellancaster.com
 * Twitter: @weblancaster
 * Date: 24-09-2013
 */
;(function(window, undefined) {

    window.Jet = window.Jet || {};

    Jet.App = (function() {
        // PRIVATE

        /**
         * Responsible to inject widgets/scripts
         * on the page
         * @method inject
         */
         function inject(url, callback) {
            var script = document.createElement("script");
            script.type = "text/javascript";

            if (script.readyState){  //IE
                script.onreadystatechange = function(){
                    if ( script.readyState == "loaded" || script.readyState == "complete" ) {
                        script.onreadystatechange = null;
                        if ( callback !== undefined ) {
                            callback();
                        }
                    }
                };
            } else {  //Others
                script.onload = function(){
                    if ( callback !== undefined ) {
                        callback();
                    }
                };
            }

            script.src = url;
            document.getElementsByTagName('body')[0].appendChild(script);
        }

        // PUBLIC
        return {
            /**
             * Responsible to store all widgets
             * as an array
             * @property WIDGETS_COLLECTION
             */
            WIDGETS_COLLECTION: null,

            /**
             * Responsible to get widgets
             * and transform in array
             * and assign to the property
             * @method widgets
             */
            widgets: function() {
                var widgets = document.body.getAttribute('data-ui-widget'),
                    widgetsArr = widgets.split(' ');

                this.WIDGETS_COLLECTION = widgetsArr;
            },

            /**
             * Responsible for receive arguments and initialize widget
             * @method init
             */
            init: function(name, url, callback) {
                this.widgets();

                if ( arguments.length < 2 ) {
                    return false
                }

                var widget = name,
                    widgetCollection = this.WIDGETS_COLLECTION,
                    widgetCollectionLength = widgetCollection.length,
                    i = 0;

                for ( ; i < widgetCollectionLength; i++ ) {
                    if ( widgetCollection[i].indexOf(widget) === 0 ) {
                        inject(url, callback);
                    }
                }
            }
        }

    });

})(window);

how to use

Define what are the widgets you want to use on that page (on body element).

< body data-ui-widget="widget-jquery widget-cycle" >

include Jet.js on your page

<script src="js/jet.min.js"></script>

I would suggest you create a JS file which has all your widgets been called.

// Cycle
var dependency1 = new Jet.App;
    dependency1.init('widget-cycle', 'http://malsup.github.io/jquery.cycle.all.js', function() {
        console.log('cycle loaded');
        $('#outdoor-context-content').cycle({
            fx: 'fade'
        });
    });

Done!

Example of use

  • Relatively small to medium Web Applications
  • Wordpress, Drupal, CMS's Web Applications in general

(Intended) browser support

  • Google Chrome
  • Mozilla Firefox 3+
  • Apple Safari 4+
  • Opera 10+
  • Internet Explorer 7+

If you found any bug or want to contribute or want to give me any opinion feel free to do that.


More Stories

Cover Image for Using ChatGPT as your nutritionist

Using ChatGPT as your nutritionist

While ChatGPT is primarily known for its conversational abilities, it can also serve as a virtual trainer and nutritionist, providing personalized guidance to help you achieve your health and wellness goals.

Cover Image for How to invest in the stock market - a beginners guide

How to invest in the stock market - a beginners guide

There is so much bad information on how to invest in stock market causing a lot of confusion for people that want to get started in investing that I decided to create a guideline for beginners based on Peter Lynch work