reply to position-absolute.com post: Organizing events with jQuery

gistfile1.js

// -----------------------
// refactor by Miller Medeiros (http://blog.millermedeiros.com)
// of code samples present on position-absolute.com blog post:
// http://www.position-absolute.com/articles/organizing-events-with-jquery/
// -----------------------


//just so we make sure `myApp` does exist
window.myApp = window.myApp || {};

//no need to use `var` and it is actually wrong since we are setting a property
//of the object and not creating a new variable
//we also pass jQuery to the closure so we can use `$` without any issues
myApp.dashboard = (function($){

    //in case you need to add extra functionality to your initializer we keep
    //a concise and descriptive name for the initializer and keep all the logic
    //in separate functions
    function init(){
        attachListeners();
    }

    //loadEvents isn't a good name since you aren't "loading" anything, you are
    //attaching the event listeners
    function attachListeners(){
        //no need to use `.delegate()` since we are attaching listeners to
        //a single element
        $('#myButton').click(selectOptionOnClick);
        $('#myButton2').click(doSomethingOnClick);
    }

    //name states that it is a click handler and which action will be
    //performed, making it clear that it should be only called by a click
    //handler and that it expects and Event object as parameter and that
    //`this` will be bound to the element.
    function selectOptionOnClick(evt){
        $(this).addClass('selected');
    }

    //just to translate the parameters since `doSomething` expects an Element
    //and it is on the exposed API, so we expect it to be accessed from outside
    //our module.
    function doSomethingOnClick(evt){
        doSomething(this);
    }

    function doSomething(el){
        //just a stub for some method of your module that will be accessed 
        //from inside your module and also from outside
    }

    //expose dashboard (PUBLIC API)
    return {
        init : init,
        doSomething : doSomething
    };

//pass jQuery to the closure so we can use `$` without issues (even if `jQuery.noConflict()`)
}(jQuery));


//initialize dashboard, note that we don't need to create an anonymous function
jQuery(document).ready(myApp.dashboard.init);

another good thing to add to this topic is that nowadays I've been using RequireJS on most of my projects so I don't create a global object for my applications anymore (since AMD modules already solves name conflicts problems in a "better" way - variables are encapsulated inside a module)

Instead of doing myApp.dashboard = { ... }; I do define({ ... }). "No" more globals in my code...

more about how to name functions and variables: http://blog.millermedeiros.com/2011/07/naming-methods-properties-and-objects/

and more about the difference between each pattern: https://gist.github.com/1189235 - and one of the the main advantages of using it.