February 26, 2009

The addEvent/removeEvent Library Written by Dean Edwards

I think, these are the good functions which I don't want to write more code by myself.

function addEvent(element, type, handler) {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(window.event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
return returnValue;
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
fixEvent.preventDefault = function() {
this.returnValue = false;
fixEvent.stopPropagation = function() {
this.cancelBubble = true;

Flyweight pattern and Pacade pattern

here are the new two interesting patterns which I learned from many team members.

Flyweight patter is a pattern which is used to make the memory low usage by catching many the same objects in one location and take them to use in many different location or apply their style in different style. as similar as word processor that we store only characters those characters' style are apply in different way.

Pacade pattern is the common pattern which is very useful while we have many complex class that contain a lot of subsystems inside. Pacade is an interface that store or catch only the needed subsystems and apply them to all client to use.

Javascript preventDefault

It's quite strange for me to start with Javascript. But there are many interesting things inside it. such as this preventDefault I found it in Event chapter of John Resig Pro javascript

function preventDef(event) {

function addHandler() {
preventDef, false);

function removeHandler() {
preventDef, false);

function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("checkbox");
var canceled = !cb.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
} else {
// None of the handlers called preventDefault
alert("not canceled");

February 17, 2009

State pattern and Visitor pattern

It's an appropriate of time that I can join the Yoolk team. I've learned a lot of new things.
State pattern is mostly used in State machine. It has all of methods in itself to calculation in everything. as an example, if you have some methods such as, Add, delete, Update and Save. you will write all of these operations. Like when will you allow to press button after this button you will move to another button, so If you have many of these operation in your project you should better write these operation in State pattern by writing only one time and use it in many places.

Visitor pattern is the pattern that we don't want to change anything in the existing class. we just derive it and override some method over the main class. As example, we have employee department and have many levels of employee in it, so if we want to increase their salary we just write another method to the new object and update all of their salary by their own different level.

February 10, 2009

Momento and Prototype pattern

I don't know much about design pattern but it's quite great that I've been joined with Mylab team.

Memento pattern is the way which we use to store our object as temporary in order to undo or redo by the parent object only.

Prototype pattern is the clone object method which is used to copy only the value of each object it's the same as deep copy but different to shallow copy which is used to copy as reference.