Contact us

Guideline Javascript

Guideline Javascript

Structure

Big projects with a lot of actions on the client side should use a specific library to organize the code, such as ExtJS, AngularJS or BackboneJS.
Those frameworks will provide a front-end MVC to structure our application.

But if you don’t have any MVC framework, here is a basic and simple way to organize your javaScript codes.

First create a function.js file to put all shared functions.
Then create a file for each module.
Start your file by applying the event actions when the DOM is ready.
Always use the live method to be sure your selector will always get the event even if you add a new items later.
Then declare the functions you just used.

Standardisation

In case you don’t know there is 2 ways to create a variable in javaScript:

var a = 1;

Or

a = 1;

This is totally 2 different variables.
The first one with var is a local variable and the other one is a global.
So when you create a variable without var it’s actually doing:

window.a = 1;

Which is useless, overload the browser memory and can have a lot of disagreements.
So the conclusion is to never use global unless you really want this variable to be used everywhere.

To make the variable creation faster you can create many variable with only one var and separate with some comas:

var id    =    12,
    name  =    "test",
    type  =    "test";

So here is an example of the code organization we need to apply:


// Apply events action
$(function() {
    $('.add-user').live('click', addUser);
    $('.hide-user').live('click', hideUser);
})

// Declare functions
function addUser()
{
    var id  =   $(this).attr('user-id'),
    name    =   $(this).attr('user-name');

    ajax('/user/delete/'+ id, function() {
    alert('You have deleted '+ name);
    });
}

// Add comment if the function name is not totally clear
function hideUser()
{ 
    // But the better way would be to use toggle:
    $(this).toggleClass('hide');
}

About your javaScript and jQuery codes.
In this example above we need to hide the user or show the user
First DO NOT create 2 different functions if you don’t need to.
KEEP IT SIMPLE and learn about the jQuery method to improve your codes.
For example use toggleClass instead of doing that:

if ($(this).hasClass('hide')) {
    $(this).removeClass('hide');
} else {
    $(this).addClass('hide');
}

This could be done in one line only:

$(this).toggleClass('hide');

Don’t use a function which won’t work if the DOM change:

var actiontab   =    $(this).parent().parent().parent().parent().parent().parent();

Make sure this code will work later by using a class or an id:

var actiontab   =    $(this).parents('.my-parent-class');

Also do not forget jQuery always return the last object so you can chain your method.
NOT GOOD

$('.class').val(2);
$('.class').css('color', 'red');
$('.class').text('test');

GOOD

$('.class')
    .val(2)
    .css('color', 'red')
    .text('test');

A final note about javaScript.

As you may know it runs at the client side (most of the time) so the rules aren’t totally the same as PHP. The speed is ALWAYS a requirement. Don’t forget users don’t have the same computer as you, it could be really slower and affect your application.
Keep this in mind when you use callback functions and never use setTimeout thinking it takes around 2sec to complete a function. It would work on your computer but we don’t know how long it could take on the user’s computer.
More important, remember javascript in totally unsecured, any data checking and any kind of protection can’t be trusted.
Always double check on the server side specially if the application is public.
The best way would be to create a user friendly checking on the client side (js) and a brutal checking on the server side (php).