JavaScript UI

The view object below returns anonymous function objects instead of executing UI functions directly. When you think about how JavaScript is typically used to manipulate the DOM (in response to events, etc), it becomes clear that the functions simply need to execute. We rarely need references to them; We simply need the series of steps within them to execute in a predetermined order.

This technique speeds up the performance of the UI a lot by reducing the number of references into the main object even though new objects are continually being created*. I prefer this trade-off after my mistake in vehicle_lineup.js on the Dodge Vehicle Lineup.

Basic stuff, but it’s easy to forget when working quickly.

/*
 * bluetooth:     20100607
 * @purpose:    Set of object methods for
 *
 * @version:     1.20100607
 * @notes:        bluetooth returns function definitions; it does not execute functions.
                This greatly improves speed of tiny widgets, like the nav.
 */
(function( window, undefined ) {
var bluetooth = {
    model: {
        //Static State Members
    },
    view: {
        swapButtonText: function () {
            return function (element) {
                var active = jQuery(element).parent().parent().hasClass('active');
                if (active.toString() != "true") {
                    var titles = jQuery(element).parent().parent().attr('title').split("||");
                    var text_holder_element = jQuery(element).parent().find('span');
                    var text = jQuery(text_holder_element).text();
                    (text == titles[0]) ? jQuery(text_holder_element).text(titles[1]) : jQuery(text_holder_element).text(titles[0]);
                }
            }
        },
        navClickEventHandler: function() {
            return function(element) {
                var parent = jQuery(element).parent().parent();
                var active = parent.hasClass('active');
                if (active.toString() != "true") {
                    bluetooth.view.deactivate()(); //Deactivate the menu
                    bluetooth.view.activate()(element); //Activate the menu
                }
            }
        },
        deactivate: function() {
            return function() { //Only called by active image
                jQuery('ul#list .active').each(function() {
                    //this == li
                    jQuery(this).removeClass('active');//set inactive (style change)

                    //Activate the image
                    var image = jQuery(this).find('img').get(0);
                    var imageSrc = image.src.toString(); //String, not a ref
                    image.src = imageSrc.replace("_on", "_off");

                    //Set Button Text
                    bluetooth.view.swapButtonText()(image);
                });
            }
        },
        activate: function() {
            return function(element) {
                //Get LI element from element (either image or text)
                var parent = jQuery(element).parent().parent();
                parent.addClass('active'); //set active (style change)

                //Activate Image
                var image = jQuery(parent).find('img').get(0);
                var imageSrc = image.src.toString();
                image.src = imageSrc.replace("_off", "_on");

                //Set Button Text
                var viewName = parent.attr('title').split("||")[0];
                bluetooth.view.setApplicationView()(viewName);
            }
        },
        setApplicationView: function() {
            return function(viewName) {
                jQuery('#title1').html(application_main_data[viewName].title1);
                jQuery('#title2').html(application_main_data[viewName].title2);
                jQuery('#title3').html(application_main_data[viewName].title3);
            }
        },
        swapImage: function() {
            return function(element) {
                if (element.src.match(/off.png/)) {
                    element.src = element.src.replace(/off/, "on");
                } else {
                    element.src = element.src.replace(/on/, "off");
                }
            }
        },
        setVehicle: function() {
            return function() {
                try {
                    var name = jQuery(this).get(0).value;
                    jQuery('div#step1 div.image img').get(0).src = "/bluetooth/gm_resources/"+name+".jpg";
                } catch (E) {
                    console.log(E);
                }
            };
        }
    }

}

if (window['bluetooth'] == undefined) {
    window.bluetooth = bluetooth;
} else {
    alert('bluetooth object cannot be instantiated; namespace pollutedn(app_bluetooth.js?)');
}

})(window);

XML Retrieval
This application manages > 100K lines of XML. jQuery works well with it. IBM produces awesome tutorials for a lot of subjects, and they didn’t fail me when I went searching for this topic.

jQuery.ajax({
    url: "/bluetooth/resources/BluetoothVehicles.xml",
    success: function(response, responseMessage) {
        var xml = response;
        response = {};
        jQuery('#BluetoothVehicles div[brand]', xml).each(function() {
            console.log(jQuery(this));
        });
    }
})

^{* Note the .toString() method used when obtaining things like an image source for manipulation. Again, there is a trade-off between creating a new, temporary object and working with a reference. In this spot, it’s not a big deal, but these objects tend to get passed around. By breaking references early, the code stays fast.}