Refactoring (as a term if not as a practice) gets thrown around quite a bit. Sometimes really necessary refactoring doesn't get the priority it deserves because it is hard to quantify or even visualize/sense the result of a good refactoring (it should be relatively transparent in experience to the original, any differences should be optimization or enhancement-
without losing of the original functionality along the way). We can take the case of a simple JavaScript animation, for example.
Simple animating of "+" dropping across the browser screen
Long ago, I used a mobile app that had a neat UI animation feature I really liked, but it took me a while to track down just how to accomplish it. I found some good starting points on SO, and began implementing a draft on JSFiddle.net.
The animation behavior I went about creating is simply a delay of an HTML element falling from the screen (via the "topToBottom" variable you'll see below- which is just the browser screen height property) . In a cascading and sequential set of delays, each falling element is pushed an increasing distance from the left of the screen so that the elements can fall independently (otherwise you would see just one column for all of the falling +'s in the end result).
In the following 4 steps, I am going to present a very basic refactoring scenario- going from the code template references I found, to the final refactored code (css, html and .js).
(1) First I found a fiddle via the SO question reference below:
http://jsfiddle.net/reWwx/4/
(2) I then changed the code to create my own draft on JSFiddle.net:
http://jsfiddle.net/reWwx/539/
(3) Next, I created an .htm file with the CSS styles and JavaScript inline (not quite what we'd want to check into source control...):
<html>
<head>
<style>
body {height: 600px; background-color: #999}
#line-3 {
position:absolute;
width:100%;
left:20px;
top:0px;
}
#line-4 {
position:absolute;
width:100%;
left:30px;
top:0px;
}
#line-5 {
position:absolute;
width:100%;
left:40px;
top:0px;
}
#line-6 {
position:absolute;
width:100%;
left:55px;
top:0px;
}
#line-7 {
position:absolute;
width:100%;
left:70px;
top:0px;
}
#line-8 {
position:absolute;
width:100%;
left:85px;
top:0px;
}
#line-9 {
position:absolute;
width:100%;
left:100px;
top:0px;
}
#line-10 {
position:absolute;
width:100%;
left:115px;
top:0px;
}
#line-11 {
position:absolute;
width:100%;
left:130px;
top:0px;
}
#line-12 {
position:absolute;
width:100%;
left:145px;
top:0px;
}
#line-13 {
position:absolute;
width:100%;
left:160px;
top:0px;
}
#line-14 {
position:absolute;
width:100%;
left:175px;
top:0px;
}
#line-15 {
position:absolute;
width:100%;
left:195px;
top:0px;
}
#line-16 {
position:absolute;
width:100%;
left:210px;
top:0px;
}
</style>
<script>
$(document).ready(function(){
var bodyHeight = $('body').height();
var footerOffsetTop = $('#line-3').offset().top;
var topToBottom = bodyHeight -footerOffsetTop;
$('#line-3').css({top:'auto',bottom:topToBottom});
$("#line-3").delay(100).animate({
bottom: '100px',
}, 2200);
$('#line-4').css({top:'auto',bottom:topToBottom});
$("#line-4").delay(108).animate({
bottom: '100px',
}, 2200);
$('#line-5').css({top:'auto',bottom:topToBottom});
$("#line-5").delay(145).animate({
bottom: '100px',
}, 2200);
$('#line-6').css({top:'auto',bottom:topToBottom});
$("#line-6").delay(119).animate({
bottom: '100px',
}, 2200);
$('#line-7').css({top:'auto',bottom:topToBottom});
$("#line-7").delay(115).animate({
bottom: '100px',
}, 2200);
$('#line-8').css({top:'auto',bottom:topToBottom});
$("#line-8").delay(176).animate({
bottom: '100px',
}, 2100);
$('#line-9').css({top:'auto',bottom:topToBottom});
$("#line-9").delay(13).animate({
bottom: '100px',
}, 2200);
$('#line-10').css({top:'auto',bottom:topToBottom});
$("#line-10").delay(12).animate({
bottom: '100px',
}, 2200);
$('#line-11').css({top:'auto',bottom:topToBottom});
$("#line-11").delay(11).animate({
bottom: '100px',
}, 2000);
$('#line-12').css({top:'auto',bottom:topToBottom});
$("#line-12").delay(10).animate({
bottom: '100px',
}, 2100);
$('#line-13').css({top:'auto',bottom:topToBottom});
$("#line-13").delay(11).animate({
bottom: '100px',
}, 600);
$('#line-14').css({top:'auto',bottom:topToBottom});
$("#line-14").delay(14).animate({
bottom: '100px',
}, 700);
$('#line-15').css({top:'auto',bottom:topToBottom});
$("#line-15").delay(14).animate({
bottom: '100px',
}, 800);
$('#line-16').css({top:'auto',bottom:topToBottom});
$("#line-16").delay(24).animate({
bottom: '100px',
}, 900);
})
</script>
</head>
<body>
<div id="line-3">+</div>
<div id="line-4">+</div>
<div id="line-5">+</div>
<div id="line-6">+</div>
<div id="line-7">+</div>
<div id="line-8">+</div>
<div id="line-9">+</div>
<div id="line-10">+</div>
<div id="line-11">+</div>
<div id="line-12">+</div>
<div id="line-13">+</div>
<div id="line-14">+</div>
<div id="line-15">+</div>
<div id="line-16">+</div>
</body>
</html>
(4) And lastly I identified all of the repeating parts and made them dynamic in JavaScript, using the jQuery library to shorten much of the .js behavior:
<html>
<head>
<style>
body {height: 600px; background-color: #000000; color:lime;}
div {
position:absolute;
top:0px;
width:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var base = $('#base');
var topToBottom = $('body').height();
for(i=0; i<83; i++){
base.append('<div id=\"line-'+i+'\" style=\"left:'+ Math.abs(i*10) +'\px">+</div>')
$("#line-" + i).css({top:'auto', bottom:topToBottom}).delay(100*i).animate({bottom: '100px'}, (1000));
}
})
</script>
</head>
<body id="base">
</body>
</html>
The final result contains the same behavior of the draft but it eliminates repetition by dynamically generating the HTML and dynamically attaching the falling action (which is really just coordinated position and visibility property changes behind the scenes of .animate()). Eliminating duplication, standardizing for better readability, reorganization for better clarity of code purpose and finding patterns (or finding
different patterns that are a better match for the task) are the key concepts in refactoring.
Try it yourself by copying the code above, saving to an .htm file and opening the file in a web browser.
Final JSFiddle result:
https://jsfiddle.net/radagast/6uzypc80/5
Larger font is always fun:
https://twickrtape.azurewebsites.net/Home/About
Reference: https://stackoverflow.com/questions/8518400/jquery-animate-from-css-top-to-bottom
