About the basic design patterns in Javascripts

3. 3
“One of the most important aspects of writing maintainable code is
being able to notice the recurring themes in that code and optimize
them. This is an area where knowledge of design patterns can prove
invaluable.”

4. 4

5. 5

6. 6

7. 7

9. 9

10. 10
// a simple facade that masks the various browser-
specific methods
function addEvent( element, event, callback ) {
if( window.addEventListener ) {
element.addEventListener( event, callback, false );
} else if( document.attachEvent ) {
element.attachEvent( 'on' + event, callback );
} else {
element[ 'on' + event ] = callback;
}
}

11. 11

12. 12

13. 13
var app = express()
$getJson()

15. 15

16. 16
// build the Subject base class
var Subject = ( function( window, undefined ) {
function Subject() {
this._list = [];
}
// this method will handle adding observers to the internal list
Subject.prototype.observe = function observeObject( obj ) {
console.log( 'added new observer' );
this._list.push( obj );
};
...

17. 17
Subject.prototype.unobserve = function unobserveObject( obj ) {
for( var i = 0, len = this._list.length; i < len; i++ ) {
if( this._list[ i ] === obj ) {
this._list.splice( i, 1 );
console.log( 'removed existing observer' );
return true;
}
}
return false;
};
Subject.prototype.notify = function notifyObservers() {
var args = Array.prototype.slice.call( arguments, 0 );
for( var i = 0, len = this._list.length; i < len; i++ ) {
this._list[ i ].update.apply( null, args );
}
};
return Subject;
} )( window );

18. 18

19. 19

20. 20

22. 22

23. 23
var mySingleton = (function () {
// Instance stores a reference to the Singleton
var instance;
function init() {
var privateRandomNumber = Math.random();
return {
getRandomNumber: function() {
return privateRandomNumber;
}
};
};
return {
// Get the Singleton instance if one exists
// or create one if it doesn't
getInstance: function () {
if ( !instance ) {
instance = init();
}
return instance;
}
};
})();

24. 24
// Usage:
var A = mySingleton.getInstance();
var B = mySingleton.getInstance();
console.log(
A.getRandomNumber() === B.getRandomNumber()
); // true

25. 25

26. 26

27. 27

29. 29

30. 30
// build our blueprint object
var MyBluePrint = function MyBluePrintObject() {
this.someFunction = function someFunction() {
alert( 'some function' );
};
this.showMyName = function showMyName() {
alert( this.name );
};
};
function MyObject() {
this.name = 'testing';
}
MyObject.prototype = new MyBluePrint();

31. 31

32. 32
Object.create()

34. 34

35. 35
var orgChart = {
addNewEmployee: function(){
// getEmployeeDetail provides a view that users interact with
var employeeDetail = this.getEmployeeDetail();
// when the employee detail is complete, the mediator (the 'orgchart' object)
// decides what should happen next
employeeDetail.on("complete", function(employee){
// set up additional objects that have additional events, which are used
// by the mediator to do additional things
var managerSelector = this.selectManager(employee);
managerSelector.on("save", function(employee){
employee.save();
});
});
},
// ...
}

36. 36

37. 37

39. 39

40. 40

41. 41
function CarDoor( options ) {
this.color = options.color || 'red';
this.side = options.side || 'right';
this.hasPowerWindows = options.hasPowerWindows || true;
}
function CarSeat( options ) {
this.color = options.color || 'gray';
this.material = options.material || 'leather';
this.isReclinable = options.isReclinable || true;
}

42. 42
function CarPartFactory() {}
CarPartFactory.prototype.createPart = function createCarPart( options ) {
var parentClass = null;
if( options.partType === 'door' ) {
parentClass = CarDoor;
} else if( options.partType === 'seat' ) {
parentClass = CarSeat;
}
if( parentClass === null ) {
return false;
}
return new parentClass( options );
}

43. 43
// example usage
var myPartFactory = new CarPartFactory();
var seat = myPartFactory.createPart( {
partType : 'seat',
material : 'leather',
color : 'blue',
isReclinable : false
});
// outputs: true
console.log( seat instanceof CarSeat );
// outputs a CarSeat object with material "leather", color "blue",
isReclinable "false"
console.log( seat );

44. 44

45. 45

46. 46

48. 48

49. 49

50. 50
( function( window, undefined ) {
// normally variables & functions start with a lowercase letter but with modules, that is not the
case.
// The general tradition is to start them with a capital letter instead.
function MyModule() {
// `this` refers to the instance of `MyModule` when created
this.myMethod = function myMethod() {
alert( 'my method' );
};
// note that we still use a function declaration even when using a function expression.
// for more information on why, check out: http://kangax.github.io/nfe/
this.myOtherMethod = function myOtherMethod() {
alert( 'my other method' );
};
}
// expose access to the constructor
window.MyModule = MyModule;
} )( window );

51. 51
// example usage
var myModule = new MyModule();
myModule.myMethod(); // alerts "my method"
myModule.myOtherMethod(); // alerts "my other method"

52. 52

53. 53

55. 55

56. 56
var myRevealingModule = (function () {
var privateVar = "Ben Cherry",
publicVar = "Hey there!";
function privateFunction() {
console.log( "Name:" + privateVar );
}
function publicSetName( strName ) {
privateVar = strName;
}
function publicGetName() {
privateFunction();
}
// Reveal public pointers to
// private functions and properties
return {
setName: publicSetName,
greeting: publicVar,
getName: publicGetName
};
})();
myRevealingModule.setName( "Paul Kinlan" );

57. 57

58. 58

59. 59
http://addyosmani.com/resources/essentialjsdesignpatterns/book/

60. 60
http://uml.org.cn/c++/pdf/DesignPatterns.pdf

61. 61

62. 62