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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link
Owner Author

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

This comment has been minimized.

Copy link
Owner Author

commented Sep 2, 2011

@millermedeiros

This comment has been minimized.

Copy link
Owner Author

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
You can’t perform that action at this time.