Click here to Skip to main content
11,492,914 members (61,212 online)
Click here to Skip to main content

jQuery events contribute to clean JavaScript

, 7 Mar 2012 CPOL 7.5K 8
Rate this:
Please Sign up or sign in to vote.
How to write some OOP style 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 encourage them to show how great JavaScript can be, we all as developers have to write JavaScript in a clean way. This way lesser 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 of here can be used seperately from each other except for the mediator. You can combine them easy 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 you’re writing very soon some cool Windows 8 JavaScript apps.

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

marcofranssen
Software Developer Atos
Netherlands Netherlands
I am a .NET Software Developer at Atos International. Architecture, CQRS, DDD, C#, ASP.NET, MVC3, HTML5, Jquery, WP7, WPF, ncqrs, Node.js
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150520.1 | Last Updated 7 Mar 2012
Article Copyright 2012 by marcofranssen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid