JavaScript Tricks And Good Programming Style
|
|
|
| 2.0/5.0 (1 votes total) |
|
|
|
Alexander Kirk August 10, 2006
|
I have been programming for about 10 years now, and I am always
longing for improving my code. Throughout time I added a few habbits
that I consider to be good practices and increase the quality of my
code.
In
a loose series I’d like to point out a few of them. As I am currently
mostly programming in JavaScript, I will write most of my samples in
that language; also some of the tricks I mention only apply to
JavaScript. But most of them apply to most programming languages around.
Optional parameter and default value #
When defining a function in PHP you can declare optional parameters by giving them a default value (something like function myfunc($optional = “default value”) {}).
In JavaScript it works a bit differently:
var myfunc = function(optional) {
if (typeof optional == "undefined") {
optional = "default value";
}
alert(optional);
}
This is a clean method to do it. Basically I pretty much recommend the use of typeof operator. Some people would do the above with a if (!optional), but my version works cross browser (e.g. Safari will throw an error when you try to negate null).
Parameters Hints #
The larger your app gets, the more functions you get which you would
use throughout the app. It also creates a problem with maintenance. As
each function can contain multiple arguments it is not unlikely that
you forget what those parameters were for (especially for boolean
variables) or mix up their sequence (I am especially gifted for that).
So what I do is this:
var myfunc2 = function(title, enable_notify) {
// [...]
}
myfunc2(title = "test", enable_notify = true);
This piece of code relies on the functionality of
programming languages that the return value of an assignment is the
assigned value. (This is something that you should also maintain in
your app, for example with database storage calls, give the assignment
value as a return value. It’s minimal effort and you might be glad at
some point that you did it).
If you do this you can see at
any point in the code, what parameters the function takes. Of course
this is not always useful, but especially for functions with many
parameters it gets very useful.
Also be careful that you would
override the variable names in the scope of which you are calling the
function. You might mini-namespace the variables, e.g. with
letter+underscore (p_title, p_enable_notify).
Search JavaScript documentation #
When I need some documentation for JavaScript I use the mozilla development center (mdc). To quickly search for toLocaleString, I use Google: http://google.com/search?q=toLocaleString+mdc
As I am a German speaker I also use the excellent (though a bit out-dated) JavaScript section SelfHTML. I use the downloaded version on my own computer for even faster access.
The self variable #
This technique comes from Private Members in JavaScript by Douglas Crockford at www.crockford.com . By assigning a value in a function to this.value it will be publically accessible afterwards.
function Animal(name) {
this.name = name;
var self = this;
this.hello = function() {
alert("hello " + self.name);
//alert("hello " + this.name); // would fail
}
}
var dog = new Animal("Jake");
button = {
onclick = dog.hello;
}
button.onclick();
The cause of this problem is that the this keyword receives different values in different contexts.
Problem with this solution is that I am not absolutely sure if this creates a memory leak in internet explorer
Reduce indentation amount #
One of the most annoying things I find in other people’s code is this: (multiple) nested if clauses. Something like this:
var arr = ["dog", "cat"];
var action = 'greet';
for(i = 0, ln = arr.length; i < ln; i++) {
animal = arr[i];
if (animal == "cat") {
alert("hello " + animal);
}
}
This is only a short example, but I often saw this going deep into 10 levels of nested clauses. I suggest using the break and continue (and next in Perl):
var arr = ["dog", "cat"];
for(i = 0, ln = arr.length; i < ln; i++) {
animal = arr[i];
if (animal != "cat") continue;
alert("hello " + animal);
}
This accomplishes the same with only one level of indentation. One more example for a function:
function greet_animal(animal) {
if (typeof animal == "undefined") return;
if (animal != "cat") return;
alert("hello " + animal);
}
Javascript is one of the few languages where you can leave the return value empty (i.e. typeof greet_animal() == “undefined”). You might want to rather use return false so that you can easily determine if the function failed for some reason.
That’s all for now, to be continued. __ This article appeared originally at alexander.kirk.at/2006/08/09/javascript-tricks-and-good-programming-style |