jQuery Events Contribute to Clean JavaScript

As the title reveals, this blog post is about some clean JavaScript code example. Many developers dislike JavaScript because of different reasons. I think JavaScript is a pretty cool language. To prevent developers from disliking it and to encourage them to show how great JavaScript can be, we all as developers have to write JavaScript in a clean way. This way, fewer developers will be discouraged to use it.

In this blog post, I will show you how to write some OOP style JavaScript, which you know as of languages like C#. I will use jQuery to get to some clean JavaScript code. First of all, I explain what I try to achieve with this code. I want to make two modules, one is a jQuery dialog which contains a form to post some products, the other one is some grid which shows the products. For this second one, you could use for example jqGrid. I want these two modules to operate completely separate from each other. They should be able to communicate with each other. Therefore, I will use the jQuery event mechanism.

So first of all, I will create my JavaScript productDialog module.

var productDialog = function($){
    var self = null;
    var dialogForm = null;

    var init = function() {
        if (self === null) return;
        self = this;
        initDialog();
    };

    var initDialog = function() {
        dialogForm = $('#productDialogForm');
        dialogForm.dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            buttons: {
                Create: function() {
                    var valid = true;
                    //Some form validation, left for brevity

                    if(valid) {
                        $.post('someserverurl', formData, postComplete, 'json');
                    }
                },
                Cancel: function() {
                    $(this).dialog('close');
                }
            },
            close: function() {
                //remove validation classes from form elements
                //left for brevity
            }
        });
        //Do some cool jquery stuff on your form to make it more interactive
        //Remove the original submit button because dialog contains one
    }

    var postComplete = function(data) {
        self.trigger('formPostComplete', data); //triggers event 
                         // with the response from the server
    };

    var show = function(modal) {
        if (modal) dialogForm.dialog({ modal: true; });
        else dialogForm.dialog({ modal: false; });
        dialogForm.dialog('open');
    };

    return {
        init: init,
        showModal: show(true),
        show: show
    };
}(jQuery);

Second, I need to init my products overview.

var productOverview = function($){
    var self = null;
    var grid = null;

    var init = function() {
        if (self === null) return;
        self = this;
        grid = $('#productsGrid');
        //init a jqGrid on some div id grid.jqGrid(....
        //or simply init some other things to 
        //show your products data by doing a $.get(....
        //left for brevity
    };

    var refreshData = function(data) {
        //simply call grid.reload() in case of jqGrid,
        //or update your products overview by using the data, 
        //(depends on what your server post returns)
        //or do a $.get request or something
    };

    return {
        init: init,
        refreshData: refreshData
    };
}(jQuery);

In order to let them communicate with each other on a specific page, I implement some mediator, who will link some logic together for a specific page. At first glance, this looks like overkill, and I see you thinking why not ding this in the page itself. Well when your modules have more events and more logic to link to each other, this can grow into larger code. When the amount of modules on a page grows, you want a central place where you link all logic together. You can implement more mediators in case this keeps your code cleaner.

var productMediator = function($) {
    var self = null;

    var init = function() {
        if (self === null) return;
        self = null;
        productDialog.init();

        productOverview.init();
        productDialog.bind('formPostComplete', productOverview.refreshData);

        $('#createNewProduct').click(productDialog.showModal); //binds buttonclick
    };

    return {
        init: init
    }
}(jQuery);

Last but not least, you have to add these scripts to your page.

<!DOCTYPE html>
<html>
    <head>
        <title>Products</title>
        <!-- stylesheets jquery ui and ui dialog-->
        <!-- scripts jquery and jquery ui-->
        <script src="productDialog.js"></script>
        <script src="productOverview.js"></script>
        <script src="productMediator.js"></script>
        <script>
                        $(function() {
                productMediator.init();
                        });
        </script>
    </head>
    <body>
        <h1>Products<h1>
        <button id="createNewProduct">Create new product</button>
        <div id="productsGrid">
            <!-- Contains your products grid -->
        <div>
        <form id="productDialogForm">
            <label for="name">Name</label>
            <input id="name" name="name" />
            <label for="price">Price</label>
            <input id="price" name="price" />
            <label for="category">Category</label>
            <input id="category" name="category" />
            <button type="submit">Create</button>
        </form>
    </body>
</html>

Conclusion

This code doesn’t look discouraging at all and I hope it didn’t do for you. The modules I showed you here can be used separately from each other except for the mediator. You can combine them easily with some MVC3 partials, which include the HTML for example. You can control which methods are public visible in the return value. I hope I lowered the threshold to write some JavaScript apps yourself. Maybe very soon, you will be writing some cool Windows 8 JavaScript apps.

As always, share this post if you liked it! If you didn’t also, share it :).