JS Patterns
How to improve javascript code
Reminder :
 3 categories design patterns :
-> Creational
-> Structural
-> Behavioral
 Antipattern :
-> Wrong design
-> R...
Best practice general :
 Function Declarations : creating anonymous functions
and assigning them to a variable
 Implied ...
 Avoid eval() : "Eval is evil."
Best practice general :
 Minimize Global (Not clear & unexpected results) / Hoisting
 W...
Best practice – code reuse :
 Use constructor / share prototype => use javascript object
 Use functions :
- Callback / C...
Design pattern - Creation - best practice :
 Use Namespace : namespaces help reduce the number of globals required
and av...
Design pattern – Creation :
 Use Builder : constructs complex objects by separating
construction and representation
 Use...
Design pattern – Structural :
 Use Decorator : dynamically adds/overrides behaviour
in an existing method of an object
 Use Facade : provides a simplified interface to a large body of code
 Proxy : provides a placeholder for another object...
Design pattern – Behavioral :
 Chain of responsibility : delegates commands to a chain of processing objects
 Command : ...
jQuery :
 requery : avoid requery by using jQuery chaining
 append : use string concatenate and set innerHTML
 append :...
jQuery :
 selector cache : using selector cache to avoid requery
 selector Left and Right - specific on the right, light...
jQuery Plugin :
 Basic : the most basic pattern
 Extend : enables you to define multiple functions at once and which
som...
jQuery :
 UI Widget factory : for building complex, stateful plugins based on
object-oriented principles
References :
 http://shichuan.github.io/javascript-patterns/#general-patterns
 JavaScript Patterns – O’REILLY
 http://a...
Find out more
• On https://techblog.betclicgroup.com/
We want our brands to be easy to use
for every gamer around the world.
Join us to make that happen.
Everything we do refle...
About Us
• Betclic Everest Group, one of the world leaders in online
gaming, has a unique portfolio comprising various
com...
Upcoming SlideShare
Loading in...5
×

Mini-Training: Javascript Patterns

1,759
-1

Published on

An introduction to design patterns used in Javascript

Published in: Software, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,759
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mini-Training: Javascript Patterns

  1. 1. JS Patterns How to improve javascript code
  2. 2. Reminder :  3 categories design patterns : -> Creational -> Structural -> Behavioral  Antipattern : -> Wrong design -> Result of bad habit, bad practice, bad idea…
  3. 3. Best practice general :  Function Declarations : creating anonymous functions and assigning them to a variable  Implied Typecasing : avoid implied typecasting
  4. 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. 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. 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. 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. 8. Design pattern – Structural :  Use Decorator : dynamically adds/overrides behaviour in an existing method of an object
  9. 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. 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. 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. 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. 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. 14. jQuery :  UI Widget factory : for building complex, stateful plugins based on object-oriented principles
  15. 15. References :  http://shichuan.github.io/javascript-patterns/#general-patterns  JavaScript Patterns – O’REILLY  http://api.jquery.com/  http://www.codetails.com/2014/05/27/top-10-javascript-traps-for-a-c-developer/  Learning JavaScript Design Patterns – O’REILLY
  16. 16. Find out more • On https://techblog.betclicgroup.com/
  17. 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. 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- home.com, 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).
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×