Structuring JavaScript CodeVedran Maršić

Who’s talkin to you Vedran Maršić AKA Fosna

dev at http://axilis.com/

organizing programming workshops for kids Logo, Scratch, HTML, CSS, JavaScript, Python

@Fosna_

Vedran.Marsic@Axilis.com

Some of JavaScript Object Design Patterns

Prototype Pattern (Revealing) Module Pattern Revealing Prototype Pattern

Prototype Pattern

PROS

• Native to JavaScript• Functions loaded to

memory once• Easy inheritance

CONS

• "this" becomes tricky• No encapsulation• Constructor is separate

from prototype definition

Revealing Module Pattern

PROS

• Encapsulation • public and private

members

• No need to use “this“

CONS

• Copies functions• Inheritance is difficult• Private methods and

functions lose extendibility since they are inaccessible 

Revealing Prototype Pattern

PROS

• Private static methods. • Should pass reference to

object instance to make like instance methods.

• Functions loaded to memory once• Easy inheritance

CONS

• "this" becomes tricky - you have to pass it arround• No variable encapsulation• Constructor is separate

from prototype definition

Conclusion

Revealing Module Pattern for building applications

Revealing Prototype Pattern for building frameworks

Things to remember

Immediately-Invoked Function Expression (IIFE) Namespacing Pesky “this“

Resources

http://weblogs.asp.net/dwahlin/techniques-strategies-and-patterns-for-structuring-javascript-code

http://www.pluralsight.com/courses/structuring-javascript http://blog.bigbinary.com/2011/08/18/understanding-bind-and-

bindall-in-backbone.html

Demo Code

https://github.com/axilis/StructuringJavascriptCode.git

Questions please!Thx for listening