Wanted to write my code more eloquently

March 4, 2016 5:59 pm Published by Leave your thoughts

I was never classically trained in javascript and I always wonder about my code quality.

I don’t think I ever write any javascript in “proper” or “eloquent” ways.

So when I wrote a simple script which manipulates a DOM in three different states, I wanted to see how a “real” programmer would write it.

Below is what I had hacked together.

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var uiscroll;

mywindow.scroll(function () {
uiscroll = mywindow.scrollTop();
if (uiscroll > mypos && !up) {
$('div').addClass('down');
    up = !up;
} 
else if(uiscroll < mypos && up) {

$('div').removeClass('down');
    up = !up;
}
mypos = uiscroll;

 if (mywindow.scrollTop() > 200) { 
  $('div').addClass('test');
}
else {
   $('div').removeClass('test');
}

});

I got a reply from Eric Guan few minutes after I posted my code at stackoverflow.

This is what he came up with.

var mypos = 0;
var up = false;
var $div = $('div');
$(window).scroll(function () {
    var uiscroll = $(this).scrollTop();
    if (uiscroll > mypos && !up) {
        $div.addClass('down');
        up = !up;
    } else if(uiscroll < mypos && up) {
        $div.removeClass('down');
        up = !up;
    }
    mypos = uiscroll;
    $div.toggleClass('test',uiscroll>200);
});

Eric gave me few pointers also.

1. mywindow var is not necessary because mypos can be initialized with 0.

2. window inside the scroll handler can be referenced with $(this).

3. Instead of telling jQuery to find div multiple times, tell it to find it once   and store it in a jquery object. It is actually quite expensive/wasteful to search for the same element multiple times, especially in a scroll event which is fired many times. If you need to reference the same element multiple times, it’s always better to store it in a variable.

4. toggleClass(‘classname’,boolean)

is just short hand for

if(boolean is true)
//add class
else
//remove class

“Javascript can execute before any html is drawn, it’s just that if the js tries to access the DOM before it’s ready, then it will fail.” – hey, of course I knew that!!

But this is the part I am still somewhat fuzzy on.

“Generally, any time you see the jquery object $, you should assume the code takes place inside a document ready.”

I still don’t get this. Ok. I can assume that but why? What’s the logic for making that assumption?

Despite not really answering my last question, I was really impressed with Eric’s insight & thankful for his “tutorial.”

‘Who is this guy?’ ‘This Eric guy is a really cool dude!!!’

Naturally, I was intrigued & I wanted to look up his profile.

Eric_Guan

LOL

Eric Guan is ranked 5th at Stack Overflow this week.

That’s like top 0.1% of all users at Stack Overflow.

No wonder. hahaha

Thanks Eric. You Rock!!!

Tags: ,

Categorized in:

This post was written by hackya

Leave a Reply

Your email address will not be published. Required fields are marked *