S5 Presentation template

Martin Reurings

Inline Script

<tag onclick="this.style.display='none';" />

• No separation of logic and content
• No re-use

Functions

function myFunction( object ) {
	alert("Hello " + object.tagName);
}
			

• Prepares for separation
• Re-usable
• Needs more knowledge of DOM

Events

Events are commonly used to react on user-input. Events are therefor of key importance when developing JavaScript.

• DOM 1
• DOM 2
• Common issues
  • Circular references
  • Closures may leak

Objects to functions

function myObject( object ) {
	this.object = object;
	this.myMethod = function( ) {
		alert("Hello " + this.object.tagName);
	}
}
			

• Common arguments for using Objects
• "Protect" methods from overrides
• Processor / Memory intensive
• Unintended closure (May cause memory leak)

Objects using several functions

function myMethod() {
	alert("Hello " + this.object.tagName);
}
			
function myObject( object ) {
	this.object = object;
	this.myMethod = myMethod;
}
			

• 'common' names may cause overrides
• Still memory intensive
• Unintended closure (May cause memory leak)

Object Literal

function myObject( object ) {
	this.object = object;
}
myObject.prototype = {
	myMethod: function() {
		alert("Hello " + this.object.tagName);
	}
}
			

• Tough for 'old-timers' to comprehend

JS-doc

• Well-known format
• Tools exist to parse these comments
• Some editors will already parse js-doc

CSS-classes for state-keeping

• Versatile
• Fast, makes use of pre-compiled browser-code
• Immediate seperation of presentation
• Easy coupling with presentation

Global event capturing

• Less code on every page render
• More 'complexity' on every event-call