Your SlideShare is downloading. ×
0
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Javascript coding-and-design-patterns
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript coding-and-design-patterns

239

Published on

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

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
239
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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);

×