Tuesday, June 7, 2011

Ways to define a JavaScript class

Following article gives a good overview of ways to define JavaScript class.

Though the author seems to have dthe point of effectiveness of using prototypes compared to other methods, the reponses by quite a few folks in the article drive home that point quite convincingly.

Overriding/Wrapping/Extending ActiveX and XMLHttpRequest object

Sometimes a special or a custom behaviour may be desired whenever an Ajax call is made from the Javascript code in the page.

In Internet Explorer 6 and earlier, XMLHTTP was implemented as an ActiveX object provided by Microsoft XML (MSXML). Beginning with Internet Explorer 7, XMLHTTP is also exposed as a native scripting object.

The native implementation of the XMLHTTP object is designed with cross-browser compatibility in mind. With just a bit of script, it is easy to build a function that works with either version of Internet Explorer, or any browser that supports XMLHTTP
Also it is more efficient to create a native scriptable object than to create an ActiveX object.

var xmlHttp = null;
if (window.XMLHttpRequest) {
// If IE7, Mozilla, Safari, and so on: Use native object.
xmlHttp = new XMLHttpRequest();
if (window.ActiveXObject) {
// ...otherwise, use the ActiveX control for IE5.x and IE6.
xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
//Msxml2.XMLHTTP.6.0 ; Msxml2.XMLHTTP.3.0 ; Microsoft.XMLHTTP

Overriding ActiveX object: Following link gives the details of overriding Activex object:-

The code first stores the instance of the actual ActiveXObject in a variable ActualActiveXObject.
Then the actual ActiveXObject's constructor is overridden with a custom constructor.
The custom constructor creates an instance of the Actual (or the overriden) Activex object.

If the arguement passed to constructor is not "msxml2.xmlhttp", then the instance of the actual Activex object is returned; Else, the rest of the code in the custom constructor is executed which creates a custom object O with certain variables and functions like Open(), Send, ReadyStateChanged(), etc. These custom functions contain user code and eventually call the respective function of the actual instance of the ActiveXObject.

Overriding XMLHttpRequest object: It is on almost similar lines to above code.
The following link and comments in it give details on overriding XMLHttpRequest object.


MVC, MVP and MVVM are patterns, or more specifically architectural patterns, which specify guidelines (or recommended practises) for defining layers within an application and their communication styles for effectively maintaining, scaling, testing, etc the application and its layers.

MVC - Defines 3 layers i.e. Model, View and Controller. Controller receives the UI events and accordingly guides the model and/or view to update themself. And in case the Model is updated from other sources too, it can notify the View(s) to refresh themselves via the observer pattern.
For more details, please refer the following MSDN link:-

MVP:- is a variant of MVC, with the primary difference that there is no interaction between View and Model. And the Presenter interacts with the View via an interface.
For more details, please refer to following article by Dino Esposito:-

MVVM: Model ,View and View Model is very similar to MVP pattern. Or it is some sort of specialized form of MVP pattern. Here Presentator is known as ViewModel.
Model communicates with ViewModel with notification and ViewModel communicates with View with data binding and command .
Following article gives idea of MVVM at high level:-

Also the following link, too gives decent links to various details about MVC and MVP (some video links too are referrred):-