Click here to Skip to main content
15,891,372 members
Articles / Programming Languages / Javascript

JavaScript "static" class - make JavaScript code more readable

Rate me:
Please Sign up or sign in to vote.
1.00/5 (2 votes)
11 Feb 2014CPOL2 min read 6.6K   1   4
I usually use static classes for my C# helper-functions, when there're no properties to expose, nor any need to inherit from them. So this increases code readability. Javascript, however, doesn't have that feature, so how to immitate it?

I usually use static classes for my C# helper-functions, when there're no properties to expose, nor any need to inherit from them. So this increases code readability. Javascript, however, doesn't have that feature, so how to immitate it? I usually do the below.

C#
// declare object - recall that 'function' is an object in javascript
var WebServiceFunctions = function() {
}

// declare method on the object
WebServiceFunctions.webServiceMethod = function (parameter1, parameter2) {
// method code here

// return value if any
return xyz;
}

With the above code, I call my helper-method in my code like this:

C#
var resultFromCall = WebServiceFunctions.webServiceMethod("foo","bar");

This has the odour of a static class. Of course behind the scene the var WebServiceFunctions = function() {} declaration signifies the creation of an object ("function" is an object in Javascript), but I find that given the generic name - 'WebServiceFunctions' - my mind abstracts from this.

The Javascript increases in readability, which may be an issue with a multitude of referenced Javascript files.

There's a slightly better way, though. If the helper-functions are so generic in nature that they're applicable to many different purposes, they may be used in many different files. As such, the above will declare the "WebServiceFunctions"-object with every import of the Javascript file. Better would be to check beforehand if the object has already been created, in which case there's no need to create it again:

C#
(function () {
   
    this.WebServiceFunctions = this.WebServiceFunctions || {};

    
    var ns = this.WebServiceFunctions;

    ns.getMobilityPeriodId = function (serviceUrl) {
             // function code here
     }

})();

The above this.WebServiceFunctions = this.WebServiceFunctions || {}; is a conditional that checks if this.WebServiceFunctions has any value, in which case the already created object is returned, or - represented by the two pipes '||' - a new object is created. var ns is merely a reference, to avoid having to write this.WebServiceFunctions repeatedly.

So that's a way to reference Javascript in a 'namespace' sort of way. I find the above helps me keep my references handy and maintain the readability of my code, especially as a project starts to become clotted with Javascript. If you wish to go depper into the subject matter, the above is what is known as the Javascript Module Pattern.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Denmark Denmark
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Question[My vote of 1] My "1" vote Pin
sobo12317-Feb-14 17:48
sobo12317-Feb-14 17:48 
What's this?
AnswerRe: [My vote of 1] My "1" vote Pin
harleydk17-Feb-14 18:55
harleydk17-Feb-14 18:55 
GeneralMy vote of 1 Pin
Member 1053254112-Feb-14 20:12
Member 1053254112-Feb-14 20:12 
GeneralRe: My vote of 1 Pin
Alexandru Lungu13-Feb-14 0:25
professionalAlexandru Lungu13-Feb-14 0:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.