Cleaner, Leaner, Meaner: Refactoring your jQuery

Cleaner, Leaner, Meaner
Refactoring your JavaScript
Rebecca Murphey • @rmurphey • rebeccamurphey.com

Thursday, December 2, 2010

http://github.com/rmurphey/refactor-jquery

2

“... changing a software system in such a way
that it does not alter the external behavior
of the code yet improves its internal
structure.”
Martin Fowler, “Refactoring”

3

Why Refactor?
Hint: Not just because it’s fun.

“When you sit down and solve a
problem, that solution is
merely a rst draft.”
Stoyan Stefanov, “JavaScript Patterns”

5

Internal rewards
Increase maintainability
Increase extensibility & reusability

User experience rewards
Improve page performance
Increase testability (reduce bugs)

6

Put another way: Refactoring will make your
users happier, make your code cheaper to work
with, or both.

7

JavaScript
Code Smells
8 tell-tale signs your code needs some TLC


$('#showMessage').click(function() {
$('<div>' +
'<h1>' + $('#messageTitle').val() + '</h1>' +
'<p>' + $('#messageText').val() + '</p>' +
'</div>')
.appendTo('#messageContainer')
});

// MINTY FRESH: Use templates instead
<script type="text/x-jquery-tmpl" id="messageTemplate">
<div>
<h1>${title}</h1>
<p>${text}</p>
</div>
</script>

$('#messageTemplate').template('messageTemplate');

$.tmpl('messageTemplate', {
title : $('#messageTitle').val(),
text : $('#messageText').val()
})
.appendTo('#messageContainer');

HTML in your JavaScript
9

http://api.jquery.com/category/plugins/templates/
http://github.com/janl/mustache.js/
http://documentcloud.github.com/underscore/

10

$('p.special').click(function() {
$(this).css({
'color' : 'red',
'font-weight' : 'bold'
});
})

// MINTY FRESH: Keep presentation information in CSS
p.extraSpecial {
color: red;
font-weight: bold;
}

$('p.special').click(function() {
$(this).addClass('extraSpecial');
});

Changing style information in JavaScript
11

http://api.jquery.com/category/utilities/
http://api.jquery.com/category/miscellaneous/

13

$('a.thinger').each(function() {
$(this).attr('href', $(this).attr('href') + '?ajax=true');
});
$('a.thinger').hide();
$('#myButton').click(function(){
$('a.thinger').show();
})

// MINTY FRESH: Use the chain and setter functions!
var thingers = $('a.thinger'), // store selection in a var
button = $('#myButton'); // just in case!

thingers.attr('href', function(idx, oldVal) {
// pass a setter function & avoid the need
// to iterate over matches
return oldVal + '?ajax=true';
}).hide();

button.click(function() {
thingers.show();
});

Repetition that jQuery lets you avoid
14

$(document).ready(function() {
$('#enableAwesome').click(function() {
$('ul.foo li').each(function() {
var li = $(this);

li.data('name', li.html())
.find('a.remove').click(function(e) {
$.ajax({
url : $(this).attr('href'),
dataType : 'json',
type : 'post',
success : function(resp) {
if (resp.ok) { li.remove(); }
},
error : console.log
})
e.preventDefault();
});
})
});
});

Deeply nested anonymous functions
15

// MINTY FRESH: Isolate functionality into an object with methods
var awesome = {
enableListItem : function() {
var li = $(this);
li.data('name', li.html());
},

removeListItem : function() {
var a = $(this),
li = a.closest('li');

awesome.removeOnServer({
url : a.attr('href'),
success : function(resp) {
if (resp.ok) { li.remove(); }
}
});
},

removeOnServer : function (config) {
var defaults = {
type : 'post',
dataType : 'json',
error : console.log
},
settings = $.extend({}, defaults, config);

if (!settings.url) { return; }
$.ajax(config);
}
};

16

$(document).ready(function() {
$('#enableAwesome').click(function() {
$('ul.foo li')
.each(awesome.enableListItem)
.delegate('a.remove', 'click', awesome.removeListItem);
});
});

17

// SMELLY: Overtesting for truthiness
if (errorMsg != null && errorMsg.length > 0) {
// ...
}

// MINTY FRESH: Be as terse as you can
if (errorMsg && errorMsg.length) {
// ...
}

Overtesting for truthiness
18

// SMELLY
if (total == null || total == "0") {
// ...
}

// MINTY FRESH
if (!parseInt(total, 10)) {
// ...
}

19

// SMELLY
if (price == null) {
// ...
} else if(discountPrice != null && price == discountPrice) {
// ...
}

// MINTY FRESH
if (!price) {
// ...

// we already know that price isn't null,
// so why test if discountPrice is? if it's
// equal to price, we know it's not null
} else if (price == discountPrice) {
// ...
}

20

// MINTY FRESH: Using an object instead
function crazyConcatenation(config) {
// indicate clearly what's required
if (
!config.selector ||
!config.words ||
!config.words.length
) { return; }

var defaults = { repeat : 5 },
settings = $.extend({}, defaults, config),
joinedWords = settings.words.join(', ');

while (settings.repeat--) {
arr.push(joinedWords);
}

$(settings.selector).html(arr.join('<br/>'))
}

crazyConcatenation({
selector : '#foo',
words : [ 'foo', 'bar', 'baz' ],
repeat : 20
});

23

Advanced Moves
Common patterns for improving your code

“Writing to be read means writing code ... with
the idea that someone else will read it. is
fact alone will make you edit and think of better
ways to solve the problem you have at hand.”
Stoyan Stefanov, “JavaScript Patterns”

25

example add the same behavior to similar
content without depending on IDs

26

example cache XHR responses, and create an
API to a server-side service

27

example refactor a portlet
to use the jQuery UI widget
factory

28

rebeccamurphey.com

blog.rebeccamurphey.com

@rmurphey

http://github.com/rmurphey/refactor-jquery

http://pinboard.in/u:rmurphey/t:refactor/

Presented at the 2010 Rich Web Experience

29

Cleaner, Leaner, Meaner: Refactoring your jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Cleaner, Leaner, Meaner: Refactoring your jQuery

Similar to Cleaner, Leaner, Meaner: Refactoring your jQuery (20)

More from Rebecca Murphey

More from Rebecca Murphey (8)

Recently uploaded

Recently uploaded (20)

Cleaner, Leaner, Meaner: Refactoring your jQuery