JavaScript General Notes

I choose JavaScript as the language for implementing most of my hobby programming projects. Coming from a C/C++ world, adopting JavaScript is not of much difficulty. But, from now and then, I need to watch out for some cross-language gotchas. JavaScript is now in a peculiar position of the software industry. I very appreciate Mozilla Foundation's view of the FirefoxOS and a purely JavaScript/HTML5 driven UI for the entire OS. Hope this language can jump cross the necessary hurdles to get its grand position among the computing languages. In the least, a big reason I choose the language is that it can be directly run in the browser, and I can set up demo pages with much less efforts. This page includes some of my notes about general topics of using this language.

Object-oriented Modular Programming

It is always important to use modular programming pattern when it comes to writing maintainable code. In JavaScript, Function is an Object too, which gives Functions properties just like any Object in the JavaScript language. This can be used to achieve an Object-oriented programming pattern, and as the code size grows, the program grows by either adding new modules (i.e., objects), or, by extending existing modules. The complexity of code maintenance are kept within boundaries. There are plenty of book chapters and web articles covering the topic of object-oriented JavaScript programming patterns. "JavaScript - The Definitive Guide" has a complete treatise of the topic, showing at least two different methods. I also found that the very first chapter of "Supercharged JavaScript Graphics" gave a very practical example of OOP in JavaScript.

As there are many ways to skin a cat, there are different ways of defining a class in JavaScript. In Chapter - 9 of "JavaScript - The Definitive Guide", two methods have described. One is the Constructor/Prototype pattern, and one is the Factory function pattern. This example -1 has shown a slightly different way of factory function. In this pattern, the private members can be achieved. The two instances foo1 and foo2 will each have its own copy of private member "privMem", respectively. For a detailed discussion of this pattern, please see Doug Crockford's talk.

Example-1: Defining Class Using Factory Function

<script>

var Foo = function () {

var privMem = 4;

var that = {

pubMem : 5,

getPrivMem : function () {

return privMem;

},

setPrivMem : function(setVal) {

privMem = setVal;

},

};

return that;

}; //end Foo

$(document).ready(function() {

var foo1 = Foo();

var foo2 = Foo();

foo2.pubMem = 10;

alert("foo1.getPrivMem()=" + foo1.getPrivMem() + " foo2.getPrivMem()=" + foo2.getPrivMem() +" . And foo2.pubMem=" + foo2.pubMem + " .");

foo2.setPrivMem(8);

alert("foo1.getPrivMem()=" + foo1.getPrivMem() + " foo2.getPrivMem()=" + foo2.getPrivMem() +" .");

}); //end ready

</script>

The following Example-2 shows the two typical ways of adding new functions to an existing class: by inheritance or by claiming the existing class as a member. ClassA is the existing JavaScript class implemented using the Factory function pattern. ClassB achieves the inheritance relation to ClassA, because the "that" object returned by factory function ClassB() is firstly constructed by the factory function ClassA(). Since these "that" objects returned by the factory functions are JavaScript Objects, we can extend one "that" object for ClassA with newly added functional properties, in this way, it becomes the "that" object of ClassB. This is how factory function ClassB() is working. In factory function ClassC(), it reuses the functions of ClassA() by claiming a private member as an instance of ClassA. The member functions of ClassC() can directly invoke the member functions of ClassA().

Example-2: Demo of "Is-A'" and "Has-A" Relations

<script>

var ClassA = function () {

var privMemA = 4;

var that = {

pubMem : 5,

ExportedFunction1 : function () {

//do some magic

return that; //for member function chaining

},

};

return that; //for factory pattern

};

var ClassB = function () {

var privMemB = 5;

var that = ClassA();

that.ExportedFunction2 = function () {

//do some magic

return that; //for member function chaining

};

return that; //for factory pattern

};

var ClassC = function () {

var privMemC = 6;

var privMemInstOfA = ClassA();

var that = {

ExportedFunction3 : function () {

privMemInstOfA.ExportedFunction1();

//do some magic

return that; //for member function chaining

},

};

return that; //for factory pattern

};

</script>

Implementing Binary Bit Stream or Byte Pool

All numbers in JavaScript are represented as floating-point values. There are no types like UINT32. But, occasions do happen that a byte pool, or even a bit stream, is needed in a JavaScript program. For example, in my QRCode implementation, the square pattern of blocks are internally generated and stored as a bit pool, with each black/white block represented by a bit.

To solve this problem, the ECMAscript standard (aka JavaScirpt language specification) has included TypedArray specifications. It defines an ArrayBuffer type, which can be easily used for implementing byte pools.

ArrayBuffer

var buffer = new ArrayBuffer(arraySize),

arr32 = new Uint32Array(buffer);

arr8 = new Uint8Array(buffer);

In the next, I explain how to make a hexadecimal print-out of a byte pool. The following picture shows how the print-out looks like in a browser.