Site by Peter-Paul Koch – A prime source to check browser compatibility information. We will find here the free assessments of the major browsers’ CSS and JavaScript capabilities, as well as their adherence to the W3C standards
var singleton = function () {
var privateVar = 10;
function privateMethod1() {
return privateVar;
}
return {
SetVal1: function (val) {
privateVar = val;
},
GetVal1: function () {
return privateVar;
},
GetVal2: function () {
return privateMethod1();
}
};
} ();
var obj1 = singleton;
var obj2 = singleton;
alert(obj1.GetVal1());
obj1.SetVal1(20);
alert(obj2.GetVal1());
// Global Variables – Version 1 : Should not use as the variable names may clash with other libraries that we refer in the page
var words = [‘a1’, ‘b1’, ‘c1’];
var getWord1 = function (n) {
return words[n];
};
alert(getWord1(1));
// Global Variables – Version 2 (better version ): but it is slow due to the fact that words array is recreated everytime we call getWord2 function
var getWord2 = function (n) {
var words = [‘a2’, ‘b2’, ‘c2’];
// Everytime getWord2 is called words array gets recreated, for testing you can have alert below and see that alert will be displayed on every getWord2 method call
alert(“getWord2”);
return words[n];
};
alert(getWord2(0));
alert(getWord2(1));
// Global Variables – Version 3 (best version) : using Closure
var getWord3 = function () {
var words = [‘a3’, ‘b3’, ‘c3’];
// Everytime getWord3 is called words array will not be recreated, for testing you can have alert below and see that alert will not be displayed on every getWord3 method call
alert(“getWord3”);
return function (n) {
return words[n];
};
} ();
alert(getWord3(0));
alert(getWord3(1));
http://msdn.microsoft.com/en-US/scriptjunkie/hh273390.aspx
1. Centralized event handling
This will be used in cases where we have a number of similar elements or structures on a page that share similar behaviour when a user-action is performed against them.
In JavaScript, there’s a known bubbling effect in the language so that if an element such as a link or button is clicked, that event is bubbled up to the parent, informing them that something lower down the tree has been clicked. We can use this effect to our advantage.
Ex: In following example we can bind click event to ul and can handle every li click separately with out binding different functions directly to each li. This will also improve performance by minimizing the DOM access for binding/unbinding and by avoiding the event handling for each element separately.
<ul>
<li class=’one’>One</li>
<li class=’two’>two</li>
<li class=’three’>three</li>
<li class=’four’>four</li>
<li class=’five’>five</li>
</ul>
stateManager = {
fly: function () {
var self = this;
$(‘ul’).unbind().bind(“click”, function (e) {
var target = $(e.originalTarget || e.srcElement);
if (target.is(“li.one”)) {
self.handleLIOne(target[0]);
}
else if (target.is(“li.two”)) {
self.handleLITwo(target[0]);
}
});
},
handleLIOne: function (elem) {
//Do your own implementation for first li element click
alert(elem.innerHTML);
},
handleLITwo: function (elem) {
//Do your own implementation for second li element click
alert(elem.innerHTML);
}
}
stateManager.fly();
VJ
Tech Hub 