JavaScript : 5 Things you Must Know

learn-javascript-design-development

1. CALLBACKS IN AN OBJECT :

I love this one, and that i undoubtedly did not think it up myself, however it is so neat and tidy. If you've got a load of callbacks going on you will be used to doing them inline like this:

$("#someid").click(function() 





  // guts of the {callback

  /* returning false
   * in a jQuery recall stops
   * propagation and prevents
   * the default behaviour
   */
 return false;

});


or alternatively simply hooking a loose function from your code like this:

$("#someid").click(mySuperFunction);

function mySuperFunction(event) a lot of epic things happen here
 return false;
}

There are a handful of issues with these approaches. With the primary kind it becomes tough to detach the function presently if you wish to. certain you'll be able to detach all click handlers, as an example, however you will have a couple of attached and really you only need to drop that one. With the second it's simply a maintainability issue - it's tougher if that function is hidden away amongst the rest of your code. Instead consider doing this type of thing:

$("#someid")
  .click(callbacks.mySuperFunction);

// all my callbacks ar
// in this object
var callbacks = 

  mySuperFunction:function(event) {
    // {more epic things happen here
 come false;
  }
}

// and afterward...
$("#someid").unbind('click',
  callbacks.mySuperFunction);

2. AVOID SETINTERVAL :

This is a very vital purpose for anyone doing any animation in their JavaScript. Why is it
a problem? If you are calling one thing each 20ms with setInterval, however what you are calling takes longer the browser does not care, it's about to begin the next call before your initial one is complete. Instead you must use, at least, setTimeout to call your operate. At the end of it you set the timeout for following call so on.


In reality there is a new-but-half-implemented operate known as requestAnimationFrame that is simply good. It acts pretty much like the setTimeout save for the very fact that it does not run for tabs out of focus (saving battery life, as an example, on mobile devices) and it's native to the browser thus it will schedule it when it is best.

3. USE IMAGES :

It's very tempting to draw things in Canvas significantly using the inbuilt drawing strategies. wherever possible, however, you must really look to check if will|you'll|you'll be able to} use pictures as a result of it can drastically improve performance. certainly effects like shadows and blurs you'll well got to do it in any case, however keep an eye fixed for anything else you'll do.

4. PROTOTYPE IT :

Let's begin with an easy one. thus you've got a good plan for an experiment. Do a fast prototype of the foremost complex a part of it to visualize whether the tech can rise up to it. WebGL, for instance, is really powerful since it hooks straight into the GPU, however remember it's being accessed from the JavaScript engine which can be much slower than your graphics card. Your nice plan may be undermined by something as easy as that.

5. CACHE ME IF YOU CAN

This is something i have been doing lots of in my WebGL experiments. you actually want to avoid getting references to variables, objects or, in fact, something you can your main loops. For that reason it's totally worth caching up your objects or vertices thus you can access them extremely quickly once you are animating.