Learning jQuery…Have a few questions

[Rugg]

Hello everyone,

I’m in the beginning stages of learning jQuery and have a couple questions regarding best practices. For those who are well versed with the framework, I welcome any suggestions or tips you can offer regarding the following. Thank you in advance.

**Question #1**

Which of the following methods for storing functions _(for later use + multiple times)_ is the best approach?

_Method A_

function something() {
//Do Something
}

_Method B_

var something = function() {
// Do Something
}

_Method C_

$.fn.something = function () {
return this.show(0);
};

**Question #2**

What is the difference between the following extension syntax?

$.fn.something = function () {
return this.show(0);
};

_And_

$.fn.something = function () {
this.show(0);
return this;
};

[pixelgrid]

question #1
a and b are generally the same but the second one has to be defined before it gets called the first one can be called before declaring it
so

one();
function one(){
console.log(‘yes’);
}
//will log yes

two();
var two = function(){
console.log(‘no’);
}
typeerror two is not a function

in general the second case is used in objects when you want a method handler

Question #1 three you are declaring a function to the jquery prototype so you can use it with a jquery constructor

$(‘.my_selector’).my_custom_function();

question 2

the first one is a shorthand of the second one they are the same

[srikarg]

@Rugg

Be careful there. For question #3, the first version will only execute one piece of code since the if, else if, and else are connected. However, the second version can possibly execute two pieces of code as the second if isn’t an if else. This means that if the first condition evaluates to true, it’s code will be run. Then, if the second condition evaluates to true, it will also run.

> I’ve tested both structures…resulting in the same output.

In your case, both versions are ideal for this situation. However, in the future, it may be better to use version #1 as it will avoid the possible error of executing unwanted code. For example, let’s take a look at a simple grade checker:

**Version #1**

var grade = 70; //We can get this from the user.
var letter = ”; //Letter grade
if (grade > 90)
letter = ‘A’;
if (grade > 80)
letter = ‘B’;
if (grade > 70)
letter = ‘C’;

With this version, notice the use of only if’s. Because of this, if the grade is a 100, the letter will become A, then B, then C. This isn’t what we expected correct?

**Version #2**

var grade = 70; //We can get this from the user.
var letter = ”; //Letter grade
if (grade > 90)
letter = ‘A’;
else if (grade > 80)
letter = ‘B’;
else if (grade > 70)
letter = ‘C’;

This will work correctly because if the grade is 100, it will go into the first if and then break out since the first condition evaluates to true.

Clearly, both versions may work for certain situations, but it is best to go with the first one if possible.

[pixelgrid]

just for the trivia , javascript doesnt handle if else if the way you might be used to.

if(condition1){}
else if(condition2){}
else{}

what it does is checks the first if and then makes ever else if a if else in the else statement.
yeah i know its a bit to much, but just internals of javascript.
so what it does is

if(condition1){}
else{
if(condition2){}
else{}
}

you can have a look here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if…else

[pixelgrid]

$(‘my_selector’).click();

is a shorthand for

$(‘my_selector’).on(‘click’,function(){})

they are practically the same. you can avoid a function call by using directly .on

[srikarg]

**Question 5**

Well, I use the first version but I’m not sure if using the second version will make a big difference or any at all…

[Chris Coyier]

I just heard a pretty good reasoning why you should do it at the end recently and can’t remember exactly what it was. Something about error handling I think and not being able to see certain errors.

[Author]

Posts