How to implement the Least Knowledge Principle

We should only invoke methods that belongs to:
1. The object itself
2. The object that is parameterised to the method
3. The object that a method created or instantiated
4. Any component of object

The Least Knowledge Principle

The principle of least knowledge guides us to reduce the interaction between object to just only few close friend the class itself. Don't try to be a close friend to all other class in the system. When you designing a system which composes of many classes and sub classes, you gotta be careful that one class should only interacts with those close immediately close friend and try to make least coupling as much as you can. For one system that all class are tightly coupling ( one class has interactions to many classes) will increase the complexity of the system and boost up the cost of maintanance.

SOLID will make you a solid programmer

The below article is referenced from http://mmiika.wordpress.com/oo-design-principles/

S.O.L.I.D. Class Design Principles

Collected by Robert C. Martin for his book “Applying Principles and Patterns”,

Single Responsibility Principle (SRP)

A class should have only one reason to change. For example, if a change to the business rules causes a class to change, then a change to the database schema, GUI, report format, or any other segment of the system should not force that class to change.

• http://davidhayden.com/blog/dave/archive/2005/05/29/1066.aspx
• http://c2.com/cgi/wiki?SingleResponsibilityPrinciple
• Head First Design patterns page 185, 336, 339, 367
• http://msdn.microsoft.com/en-us/magazine/cc546578.aspx

Open/Closed Principle (OCP)

Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

• http://davidhayden.com/blog/dave/archive/2005/06/04/1096.aspx
• http://en.wikipedia.org/wiki/Open/closed_principle
• Head First Design patterns page 86-87, 407
• http://c2.com/cgi/wiki?OpenClosedPrinciple

Liskov substitution principle (LSP)

Subtypes must be substitutable for their base types. If class A inherits from class B, then wherever you can use A you should be able to use B. E.g. remember that square is not necessarily a rectangle! When extending: Preconditions cannot be straightened, Postconditions cannot be loosened, visible Invariants cannot be changed (?). Invariants: users depend on this both before and after sending a message. Use a proper set-based inheritance relationship. Not following set semantics is very risky. Subsumption Rule: A reference to a subtype can be used in any context where a reference to a super type is expected. This principle extremely limits what SHOULD be done with the pure extension (inheritance) mechanism. Do not follow at your own risk.

• http://davidhayden.com/blog/dave/archive/2005/06/10/1226.aspx
• Agile Principles and Patterns page ?
• http://c2.com/cgi/wiki?LiskovSubstitutionPrinciple
• http://en.wikipedia.org/wiki/Liskov_substitution_principle
• http://javaboutique.internet.com/tutorials/JavaOO/

Interface Segregation Principle (ISP)

The dependency of one class to another one should depend on the smallest possible interface.

• http://davidhayden.com/blog/dave/archive/2005/06/15/1482.aspx
• http://c2.com/cgi/wiki?InterfaceSegregationPrinciple
• http://www.google.com/search?q=interface+segration+principle
• http://doodleproject.sourceforge.net/articles/2001/interfaceSegregationPrinciple.html

Dependency Inversion Principle (DIP)

Depend upon abstractions (interfaces), not upon concrete classes.

• http://davidhayden.com/blog/dave/archive/2005/06/10/1261.aspx
• http://en.wikipedia.org/wiki/Dependency_inversion_principle
• Head First Design patterns page 139-143
• http://c2.com/cgi/wiki?DependencyInversionPrinciple

Positioning dom element

Static positioning:

This is the default way that an element is positioned; it simply follows
the normal flow of the document. The top and left properties have no effect when an element
has static positioning. eg. position: static; top: 0px; left: 0px;

Relative positioning:

This means the positioning is very similar to static positioning, as the
element will continue to follow the normal flow of the document until instructed to do
otherwise. However, setting the top or left properties will cause the element to be shifted
in relation to its original (static) position. eg. position: relative; top: -50px; left: 50px;

Absolute positioning:

Positioning an element absolutely completely breaks it out of the
normal flow of page layout. An element that’s been positioned absolutely will be displayed
in relation to the first parent element that has a nonstatic position. If no parent
exists, it’s positioned in relation to the entire document. eg. absolute; top: 20px;
left: 0px;

Fixed Positioning:

Fixed positioning works by positioning an element relative to the
browser window. Setting an element’s top and left to 0 pixels will display that element
in the top-left corner of the browser for as long as the user is on that page, completely
ignoring any use of the browser’s scrollbars. position: fixed; top: 20px; right: 0px;

OffsetParent:

offsetParent: This is the parent that an element is positioned within. However,
in practice, the element that offsetParent refers to depends on the browser (for
example, in Firefox it refers to the root node, and in Opera, the immediate parent).

offsetLeft and offsetTop: These parameters are the horizontal and vertical offsets of the
element within the context of the offsetParent. Thankfully, this is always accurate in
modern browsers.

Concept of reference in javascript

The basic concept of reference in javascript is the pointer to the actual location of an object. let take a look at the example and see how reference react in object assignment.

// Set items to an array (object) of strings
var items = new Array( "one", "two", "three" );

// Set itemsRef to a reference to items
var itemsRef = items;

for(el in itemsRef) alert(itemsRef[el])

The output will be "one", "two", "three".

Let add some more element to an array through push() method

items.push("four");
items.push("five");
for(el in itemsRef) alert(itemsRef[el])

The output will "one", "two", "three", "four", "five"

The itmesRef has a reference to items, thus anychange to items will also change in itemsRef

Event in javascript

1. Event Object

In javascript event also an object that can be attached to any element. In IE event object is a global that can be access anywhere in the page (e = window.event), whereby other browser beside IE, the event object (e) is need to passed in with call back function
eg. element.onclick = function( /*For none IE browser*/e){
if(e) {
alert("this is none IE event object" + e)
}else{
e = window.event;
alert("this is IE event object" + e)
}
}

2. Stop Event Capturing and Bubbling

IE : window.event.cancelBubble = true
Mozilla: e.stopPropogation()

3. Stop Default Browser event

A browser event is an event that fired by the browser which you don't really realize about it, like when you right click on any element, the browser will fire its event by default. To stop that let look at this.
IE : window.event.returnValue = false;
Mozilla : e.preventDefault();

4. Attach Event to An Element

There are two ways which you can attach event to any dom element.
1. Using classical way
element.onclick = function(){alert("event click happens")};
2. Using attachEvent/addEventListener
Mozilla : dom.addListener("click",function(){}, false/true );

Dom Object in javascript

Dealing with javascript dom object in javascript is quite convenient once you know it features. Here are some useful information about dom.

1. nodeType key word

- element.nodeType = 9 meaning the rood of the element
- element.nodeType = 3 meaning the element is a text
- element.nodeType = 1 match any element like

2. Get text of element

- IE : element.innerText
- Mozilla : element.nodeValue

3. Get innerHTML inside element
- All: element.innerHTML

4. Create element with name space
document.createElementNs('uri', element)

5. Set and Get attribute of element
element.setAttribute('value', 'my value')
element.setAttribute('id', 'my id')
element.setAttribute('style', 'position: absolute; left: 50pxl;')

assingment operator " = "

Remember, the assignment operator " = " in javascript is assigned by reference not the coppied value.
e.g var number1;
var number2 = 3 ;
number1 = number2;
number2 = 5 ;
alert(number1) ;

Guest what? 3 or 5.
The right answer is 5 not 3, since its reference has been changed to 5.

Remove child node for parent node

The kind of removing a child node is always the case when you want to remove the child node from parent node. let say you got a dom object that has 3 child node you may want to remove all of them. how to do so you might using a for loop to loop through all its child node and remove all of them accordingly to the child node's index. you are right but will it work? let take a look at this.
e.g var parentDom = document.CreateElement("div");
var child1 = document.CreateElement(''div'');
var child2 = document.CreateElement(''div'');
var child3 = document.CreateElement(''div'');
//Append all the child to parentDom
parentDom.appendChild(child1);
parentDom.appendChild(child2);
parentDom.appendChild(child3);

//Let use 'removeChild' key word and FOR LOOP to remove them
for(var i = 0 ; i < parentDom.childNodes.length ; i++){
parentDom.removeChild(parentDom.childNode[i]);
}
You sure, this will work ? oops it won't, because when you remove the first element the second element will be moved to the first index, that make the second index blank which will cause the error.
//It will work like this
//Let use 'removeChild' key word and FOR LOOP to remove them
for(var i = 0 ; i < parentDom.childNodes.length ; i++){
parentDom.removeChild(parentDom.childNode[0]);
}

Create artificial event to the dom object

Below is the artificial event that is created to trigger an event on a dom object. e.g you may want to a click event happen on a dom object without any actual mouse click on the dom. You can do so by using 'dispatch' for firefox and fireEvent for IT

Sample DIV.

The use of keyword 'continue' in for 'if' statement

Using continue key word will skip the current action in 'if' statement and continue to do normal work.

var j = 3;
for( var i = 0 ; i < 5 ; i++ ){
if( i == j) continue;
}

Memorise the index for click event in FOR loop

It always course trouble when come to deal with click event in for loop. Let say you got few dom element and you store it in array and you want to traverse all of them and add event listener to it. You wont be able to know which dom you click when it come to use for loop to traverse them.

Here is the solution, we use closure here to solve this problem

//User activities -- switching contents
for (var i = 0; i < tabs.length; i++) {
(function() {
var j = i;
eventObj.addDomListener(
self._tabContainerDoms[j],
'click',
function() {
self._tabContainerDoms[j].style.height = parseInt(self._tabContainerDoms[j].style.height) + 1 + "px";
}
);

})();
}