Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
reply to position-absolute.com post: Organizing events with jQuery
// -----------------------
// 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);
@millermedeiros
Copy link
Author

millermedeiros commented Sep 2, 2011

Note that most of the comments on the source code are just to explain why I changed certain things, my "real code" wouldn't have any comments since the variables/functions names already describes what the code does. And the code is so trivial

PS: Comments are usually a sign of poor implementations. Only comment weird things.

@millermedeiros
Copy link
Author

millermedeiros commented Sep 2, 2011

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...

@millermedeiros
Copy link
Author

millermedeiros commented Sep 2, 2011

@millermedeiros
Copy link
Author

millermedeiros commented Sep 2, 2011

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment