JavaScript Coding & Design Patterns discusses JavaScript style guides, namespaces, dependencies, dealing with browsers, separation of concerns, DOM scripting, events, functions, and design patterns like the Singleton, Module, and Prototypal Inheritance patterns. It covers topics like hoisting, scope, configuration objects, IIFEs, and using the new keyword and Object.create method for prototypal inheritance. The document provides examples and explanations of these JavaScript concepts and design patterns.

1. JavaScript Coding & Design Patterns

2. Content
Getting Started
JavaScript Style Guide
Namespace
Dependencies’s Declaration
Dealing With Browsers
Separation of Concerns
Init-time Branching
DOM Scripting
Events
Design Patterns
Singleton
Module Pattern
Prototypal Inheritance
The new keyword
The Object.create method

3. Getting Started
JavaScript Style Guide, Namespace & Dependencies’s Declaration

4. JavaScript Style Guide
https://github.com/mercadolibre/javascript-style-guide

5. Namespace
JavaScript doesn’t have built-in namespaces
Reduce globals variables
Avoid naming collisions
Avoid name prefixing

6. Namespace
var fleet = fleet || {};

7. Dependencies’s Declaration
Explicit declaration the modules at the top
Easy to find and resolve dependencies
Working with local is faster than working with global
Smaller code when minifies the module for production

8. Dependencies’s Declaration
function Car() {
var Motor = vehicle.Motor,
Wheel = vehicle.Wheel;
}

9. Dealing with Browsers
Separation of Concerns, Init-time Branching,
DOM Scripting & Events

10. Separation of Concerns
Improves the delivery to a vast array of user agents
Enhance the site progressively
Test it without CSS
Test it without JS

11. Init-time Branching
Optimization pattern to test a condition only once
Common used on browser feature detection

12. Init-time Branching
var w = window,
modern = w.addEventListener !== undefined,
on = modern ?
‘addEventListener’ : ‘attachEvent’,
click = modern ? ‘click’ : ‘onclick’;
!
document.body[on](click, function(){});

13. DOM Scripting
Inconsistently implemented across browsers
Avoiding DOM access in loops
Assigning DOM reference to local variables
Use selector APIs methods
Caching the length when iteration over a HTML collection
Change the DOM outside the live document

14. DOM Scripting
var collection = document.querySelectorAll('.cars'),
collectionLength = collection.length,
item = 0;
function addWheel(){
for (item; item < collectionLength; item ++) {
var car = collection[item];
car.setAttribute('data-item-number', item);
car.setAttribute('data-item-message', message[item]);
}
}

15. Events
Attaching listeners unobtrusively helps reutilisation
Delegates event helps performance

16. Event Delegation
var container = document.querySelector(‘.parking’),
child;
!
container.addEventListener(‘click’, function(ev){
if(ev.target.hasAttribute(‘data-car’)){
child = ev.target;
child.setAttribute(‘selected’, ‘selected’);
}
});

17. Functions
Scope, Hoisting, Configuration Object, IIFE

18. Functions
They have a variety of tasks, other languages may have special syntax for it
They are first-class objects
They provide scope
Can have their own properties and methods
Can be passed as argument and returned by other functions
Can be augmented, assigned to variables, referenced and deleted

19. Scope
JavaScript has not special syntax to denote
private, protected or public properties or methods
JavaScript is a function scope language

20. Scope
var code = 93854782;
!
function Car(){
var code;
}

21. Hoisting
JavaScript enables you to have multiple var statements anywhere in a
function, and they all act as if the variables were declared at the top of the
function.

22. Hoisting
function Car(){
var code,
motor,
wheels,
doors;
!
}

23. Configuration Object
Car({
'code': 'A195',
'wheels': 4,
'doors': 3,
'color': 'blue'
});

24. Immediately-Invoked Function Expression
It is a syntax that enables you to execute a function as soon as it is defined
It provides a scope sandbox for your initialisation code
It can receive arguments
It can return values
It can be used when define object properties
It helps doing work wrapped without leaving any global variable

25. IIFE Immediately-Invoked Function Expression
(function(){
/* code */
}());

26. Design Patterns
Singleton, Module Pattern

27. Singleton
Only one instance of a specific class
A simple way is creating a object literal
Every time you use the object literal syntax you are creating a singleton
It is possible to use the new keyword to create a singleton

28. Singleton simple way
var parking = {};

29. Singleton with the new keyword
function Parking(){
if(typeof Parking.instance === 'object') {
return Parking.instance;
}
Parking.instance = this;
return this;
}

30. Module Pattern
It provides structure and helps organise your code as it grows
It provides the tools to create self-container decoupled pieces of code
It is a combination of the following patterns
Namespaces
Immediate functions
Private and privileged members
Declaring dependencies

31. Module Pattern
var parking = (function () {
var _places = [], // private
module = {}; // public
!
module.isTaken = function(placeNumber){};
!
return module;
}());

32. Module Pattern
(function(exports) {
var _places = [],
module = {}; // public
!
module.isTaken = function(placeNumber){};
!
exports.module;
}(parking));

33. Prototypal Inheritance
The new keyword & The Object.create() method

34. Prototypal Inheritance
JavaScript is classified as having a prototype-based object model.
It is simple, a new object can inherit the properties of an old object.
Every function has a prototype property and it contains an object.
Add functionality by adding methods and properties to the prototype.

35. The new keyword
function Car(brand, doors){
this.brand = brand;
this.doors = doors;
return this;
}
!
Car.prototype.run = function(){}
!
var peugeot = new Car(‘peugeot’, 4);

36. The Object.create() method
var Car = {
‘run’: function(){},
‘init’: function(brand, doors){
this.brand = brand;
this.doors = doors;
}
}
!
var peugeot = Objetc.create(Car);