Your SlideShare is downloading. ×
Mini-Training: Javascript Patterns
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mini-Training: Javascript Patterns


Published on

An introduction to design patterns used in Javascript

An introduction to design patterns used in Javascript

Published in: Software, Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JS Patterns How to improve javascript code
  • 2. Reminder :  3 categories design patterns : -> Creational -> Structural -> Behavioral  Antipattern : -> Wrong design -> Result of bad habit, bad practice, bad idea…
  • 3. Best practice general :  Function Declarations : creating anonymous functions and assigning them to a variable  Implied Typecasing : avoid implied typecasting
  • 4.  Avoid eval() : "Eval is evil." Best practice general :  Minimize Global (Not clear & unexpected results) / Hoisting  Working with Json (JavaScript Object Notation)  Use literal notation ( array & Regex)  Use parseInt()
  • 5. Best practice – code reuse :  Use constructor / share prototype => use javascript object  Use functions : - Callback / Chaining Pattern - Configuration objects - Immediate functions (could be used to init object) - Memoization : use function properties to avoid repeated computation
  • 6. Design pattern - Creation - best practice :  Use Namespace : namespaces help reduce the number of globals required and avoid naming collisions or excessive name prefixing  Use Module / Declare dependencies  Use private Properties / Methodes / Static Members / Object constants  Use sandbox : it provides an environment for the modules to work without affecting other modules and their personal sandboxes
  • 7. Design pattern – Creation :  Use Builder : constructs complex objects by separating construction and representation  Use Factory : creates objects without specifying the exact class to create
  • 8. Design pattern – Structural :  Use Decorator : dynamically adds/overrides behaviour in an existing method of an object
  • 9.  Use Facade : provides a simplified interface to a large body of code  Proxy : provides a placeholder for another object to control access, reduce cost, and reduce complexity Design pattern – Structural :
  • 10. Design pattern – Behavioral :  Chain of responsibility : delegates commands to a chain of processing objects  Command : creates objects which encapsulate actions and parameter  Mediator : allows loose coupling between classes by being the only class that has detailed knowledge of their methods  Observer : is a publish/subscribe pattern which allows a number of observer objects to see an event  Strategy : allows one of a family of algorithms to be selected on-the-fly at runtime
  • 11. jQuery :  requery : avoid requery by using jQuery chaining  append : use string concatenate and set innerHTML  append : use string concatenate and set innerHTML  detach : take element off the DOM while manipulating them
  • 12. jQuery :  selector cache : using selector cache to avoid requery  selector Left and Right - specific on the right, light on the left  Selector Decending from id : be more specific  Use publish / subscribe : $.Callbacks() & $.Observable
  • 13. jQuery Plugin :  Basic : the most basic pattern  Extend : enables you to define multiple functions at once and which sometimes make more sense semanticall
  • 14. jQuery :  UI Widget factory : for building complex, stateful plugins based on object-oriented principles
  • 15. References :   JavaScript Patterns – O’REILLY    Learning JavaScript Design Patterns – O’REILLY
  • 16. Find out more • On
  • 17. We want our brands to be easy to use for every gamer around the world. Join us to make that happen. Everything we do reflect our values Come and work in a friendly atmosphere based on trust & cooperation between IT Teams. Learn & Share with us Friday tech trainings, BBL, Meetups, Coding Dojo, Innovation Day & more If you want to contribute to the success of our group, look at all the challenges we offer HERE Want to be part of a great online gambling company? Check out our Carreers account on Stackoverflow
  • 18. About Us • Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio comprising various complementary international brands: Betclic, Everest, bet-at-, Expekt, Monte-Carlo Casino… • Through our brands, Betclic Everest Group places expertise, technological know-how and security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion of our players. We want our brands to be easy to use for every gamer around the world. We’re building our company to make that happen. • Active in 100 countries with more than 12 million customers worldwide, the Group is committed to promoting secure and responsible gaming and is a member of several international professional associations including the EGBA (European Gaming and Betting Association) and the ESSA (European Sports Security Association).