JS Patterns

How to improve javascript code

Reminder :

3 categories design patterns :

-> Creational-> Structural-> Behavioral

Antipattern :

-> Wrong design -> Result of bad habit, bad practice, bad idea…

Best practice general :

Function Declarations : creating anonymous functions and assigning them to a variable

Implied Typecasing : avoid implied typecasting

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()

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

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

Design pattern – Creation :

Use Builder : constructs complex objects by separating construction and representation

Use Factory : creates objects without specifying the exact class to create

Design pattern – Structural :

Use Decorator : dynamically adds/overrides behaviourin 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 to control access,reduce cost, and reduce complexity

Design pattern – Structural :

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 ofobserver objects to see an event

Strategy : allows one of a family of algorithms to be selected on-the-fly at runtime

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

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

jQuery Plugin :

Basic : the most basic pattern

Extend : enables you to define multiple functions at once and which sometimes make more sense semanticall

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://api.jquery.com/

http://www.codetails.com/2014/05/27/top-10-javascript-traps-for-a-c-developer/

Learning JavaScript Design Patterns – O’REILLY

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 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 accounton Stackoverflow

About Us• Betclic Everest Group, one of the world leaders in online

gaming, has a unique portfolio comprising variouscomplementary 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 ourstrategy to deliver an on-line gaming offer attuned to thepassion of our players. We want our brands to be easy to usefor every gamer around the world. We’re building ourcompany to make that happen.

• Active in 100 countries with more than 12 million customersworldwide, the Group is committed to promoting secure andresponsible gaming and is a member of several internationalprofessional associations including the EGBA (EuropeanGaming and Betting Association) and the ESSA (EuropeanSports Security Association).