JavaScript Coding & Design Patterns
Content
Getting Started
JavaScript Style Guide
Namespace
Dependencies’s Declaration
Dealing With Browsers
Separation of Co...
Getting Started
JavaScript Style Guide, Namespace & Dependencies’s Declaration
JavaScript Style Guide
https://github.com/mercadolibre/javascript-style-guide
Namespace
JavaScript doesn’t have built-in namespaces
Reduce globals variables
Avoid naming collisions
Avoid name prefixing
Namespace
var fleet = fleet || {};
Dependencies’s Declaration
Explicit declaration the modules at the top
Easy to find and resolve dependencies
Working with l...
Dependencies’s Declaration
function Car() {
var Motor = vehicle.Motor,
Wheel = vehicle.Wheel;
}
Dealing with Browsers
Separation of Concerns, Init-time Branching, 

DOM Scripting & Events
Separation of Concerns
Improves the delivery to a vast array of user agents
Enhance the site progressively
Test it without...
Init-time Branching
Optimization pattern to test a condition only once
Common used on browser feature detection
Init-time Branching
var w = window,
modern = w.addEventListener !== undefined,
on = modern ?
‘addEventListener’ : ‘attachE...
DOM Scripting
Inconsistently implemented across browsers
Avoiding DOM access in loops
Assigning DOM reference to local var...
DOM Scripting
var collection = document.querySelectorAll('.cars'),
collectionLength = collection.length,
item = 0;
functio...
Events
Attaching listeners unobtrusively helps reutilisation
Delegates event helps performance
Event Delegation
var container = document.querySelector(‘.parking’),
child;
!
container.addEventListener(‘click’, function...
Functions
Scope, Hoisting, Configuration Object, IIFE
Functions
They have a variety of tasks, other languages may have special syntax for it
They are first-class objects
They pr...
Scope
JavaScript has not special syntax to denote 

private, protected or public properties or methods
JavaScript is a fun...
Scope
var code = 93854782;
!
function Car(){
var code;
}
Hoisting
JavaScript enables you to have multiple var statements anywhere in a
function, and they all act as if the variabl...
Hoisting
function Car(){
var code,
motor,
wheels,
doors;
!
}
Configuration Object
Car({
'code': 'A195',
'wheels': 4,
'doors': 3,
'color': 'blue'
});
Immediately-Invoked Function Expression
It is a syntax that enables you to execute a function as soon as it is defined
It p...
IIFE Immediately-Invoked Function Expression
(function(){
/* code */
}());
Design Patterns
Singleton, Module Pattern
Singleton
Only one instance of a specific class
A simple way is creating a object literal
Every time you use the object lit...
Singleton simple way
var parking = {};
Singleton with the new keyword
function Parking(){
if(typeof Parking.instance === 'object') {
return Parking.instance;
}
P...
Module Pattern
It provides structure and helps organise your code as it grows
It provides the tools to create self-contain...
Module Pattern
var parking = (function () {
var _places = [], // private
module = {}; // public
!
module.isTaken = functio...
Module Pattern
(function(exports) {
var _places = [],
module = {}; // public
!
module.isTaken = function(placeNumber){};
!...
Prototypal Inheritance
The new keyword & The Object.create() method
Prototypal Inheritance
JavaScript is classified as having a prototype-based object model.
It is simple, a new object can in...
The new keyword
function Car(brand, doors){
this.brand = brand;
this.doors = doors;
return this;
}
!
Car.prototype.run = f...
The Object.create() method
var Car = {
‘run’: function(){},
‘init’: function(brand, doors){
this.brand = brand;
this.doors...
Upcoming SlideShare
Loading in …5
×

Javascript coding-and-design-patterns

567 views
509 views

Published on

Talk given at MercadoLibre, as a first idea, about how to organise your JavaScript code.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
567
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript coding-and-design-patterns

  1. 1. JavaScript Coding & Design Patterns
  2. 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. 3. Getting Started JavaScript Style Guide, Namespace & Dependencies’s Declaration
  4. 4. JavaScript Style Guide https://github.com/mercadolibre/javascript-style-guide
  5. 5. Namespace JavaScript doesn’t have built-in namespaces Reduce globals variables Avoid naming collisions Avoid name prefixing
  6. 6. Namespace var fleet = fleet || {};
  7. 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. 8. Dependencies’s Declaration function Car() { var Motor = vehicle.Motor, Wheel = vehicle.Wheel; }
  9. 9. Dealing with Browsers Separation of Concerns, Init-time Branching, 
 DOM Scripting & Events
  10. 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. 11. Init-time Branching Optimization pattern to test a condition only once Common used on browser feature detection
  12. 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. 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. 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. 15. Events Attaching listeners unobtrusively helps reutilisation Delegates event helps performance
  16. 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. 17. Functions Scope, Hoisting, Configuration Object, IIFE
  18. 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. 19. Scope JavaScript has not special syntax to denote 
 private, protected or public properties or methods JavaScript is a function scope language
  20. 20. Scope var code = 93854782; ! function Car(){ var code; }
  21. 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. 22. Hoisting function Car(){ var code, motor, wheels, doors; ! }
  23. 23. Configuration Object Car({ 'code': 'A195', 'wheels': 4, 'doors': 3, 'color': 'blue' });
  24. 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. 25. IIFE Immediately-Invoked Function Expression (function(){ /* code */ }());
  26. 26. Design Patterns Singleton, Module Pattern
  27. 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. 28. Singleton simple way var parking = {};
  29. 29. Singleton with the new keyword function Parking(){ if(typeof Parking.instance === 'object') { return Parking.instance; } Parking.instance = this; return this; }
  30. 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. 31. Module Pattern var parking = (function () { var _places = [], // private module = {}; // public ! module.isTaken = function(placeNumber){}; ! return module; }());
  32. 32. Module Pattern (function(exports) { var _places = [], module = {}; // public ! module.isTaken = function(placeNumber){}; ! exports.module; }(parking));
  33. 33. Prototypal Inheritance The new keyword & The Object.create() method
  34. 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. 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. 36. The Object.create() method var Car = { ‘run’: function(){}, ‘init’: function(brand, doors){ this.brand = brand; this.doors = doors; } } ! var peugeot = Objetc.create(Car);

×