Javascript coding-and-design-patterns
-
Upload
hernan-mammana -
Category
Technology
-
view
205 -
download
0
description
Transcript of Javascript coding-and-design-patterns
![Page 1: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/1.jpg)
JavaScript Coding & Design Patterns
![Page 2: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/2.jpg)
ContentGetting 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
![Page 3: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/3.jpg)
Getting StartedJavaScript Style Guide, Namespace & Dependencies’s Declaration
![Page 4: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/4.jpg)
JavaScript Style Guidehttps://github.com/mercadolibre/javascript-style-guide
![Page 5: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/5.jpg)
NamespaceJavaScript doesn’t have built-in namespaces
Reduce globals variables
Avoid naming collisions
Avoid name prefixing
![Page 6: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/6.jpg)
Namespacevar fleet = fleet || {};
![Page 7: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/7.jpg)
Dependencies’s DeclarationExplicit 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
![Page 8: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/8.jpg)
Dependencies’s Declarationfunction Car() { var Motor = vehicle.Motor, Wheel = vehicle.Wheel; }
![Page 9: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/9.jpg)
Dealing with BrowsersSeparation of Concerns, Init-time Branching, DOM Scripting & Events
![Page 10: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/10.jpg)
Separation of ConcernsImproves the delivery to a vast array of user agents
Enhance the site progressively
Test it without CSS
Test it without JS
![Page 11: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/11.jpg)
Init-time BranchingOptimization pattern to test a condition only once
Common used on browser feature detection
![Page 12: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/12.jpg)
Init-time Branchingvar w = window,
modern = w.addEventListener !== undefined,
on = modern ? ‘addEventListener’ : ‘attachEvent’,
click = modern ? ‘click’ : ‘onclick’; !
document.body[on](click, function(){});
![Page 13: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/13.jpg)
DOM ScriptingInconsistently 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
![Page 14: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/14.jpg)
DOM Scriptingvar 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]); }
}
![Page 15: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/15.jpg)
EventsAttaching listeners unobtrusively helps reutilisation
Delegates event helps performance
![Page 16: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/16.jpg)
Event Delegationvar container = document.querySelector(‘.parking’), child; !
container.addEventListener(‘click’, function(ev){ if(ev.target.hasAttribute(‘data-car’)){ child = ev.target; child.setAttribute(‘selected’, ‘selected’); } });
![Page 17: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/17.jpg)
FunctionsScope, Hoisting, Configuration Object, IIFE
![Page 18: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/18.jpg)
FunctionsThey 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
![Page 19: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/19.jpg)
ScopeJavaScript has not special syntax to denote private, protected or public properties or methods
JavaScript is a function scope language
![Page 20: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/20.jpg)
Scopevar code = 93854782; !
function Car(){ var code; }
![Page 21: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/21.jpg)
HoistingJavaScript 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.
![Page 22: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/22.jpg)
Hoistingfunction Car(){
var code, motor, wheels, doors; !
}
![Page 23: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/23.jpg)
Configuration ObjectCar({ 'code': 'A195', 'wheels': 4, 'doors': 3, 'color': 'blue' });
![Page 24: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/24.jpg)
Immediately-Invoked Function ExpressionIt 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
![Page 25: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/25.jpg)
IIFE Immediately-Invoked Function Expression
(function(){ /* code */
}());
![Page 26: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/26.jpg)
Design PatternsSingleton, Module Pattern
![Page 27: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/27.jpg)
SingletonOnly 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
![Page 28: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/28.jpg)
Singleton simple wayvar parking = {};
![Page 29: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/29.jpg)
Singleton with the new keywordfunction Parking(){ if(typeof Parking.instance === 'object') { return Parking.instance; } Parking.instance = this; return this; }
![Page 30: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/30.jpg)
Module PatternIt 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
![Page 31: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/31.jpg)
Module Patternvar parking = (function () { var _places = [], // private module = {}; // public !
module.isTaken = function(placeNumber){}; !
return module; }());
![Page 32: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/32.jpg)
Module Pattern(function(exports) { var _places = [], module = {}; // public !
module.isTaken = function(placeNumber){}; !
exports.module; }(parking));
![Page 33: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/33.jpg)
Prototypal InheritanceThe new keyword & The Object.create() method
![Page 34: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/34.jpg)
Prototypal InheritanceJavaScript 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.
![Page 35: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/35.jpg)
The new keywordfunction Car(brand, doors){ this.brand = brand; this.doors = doors; return this; } !
Car.prototype.run = function(){} !
var peugeot = new Car(‘peugeot’, 4);
![Page 36: Javascript coding-and-design-patterns](https://reader037.fdocuments.us/reader037/viewer/2022103113/554a2d98b4c9051b578b4f49/html5/thumbnails/36.jpg)
The Object.create() methodvar Car = { ‘run’: function(){}, ‘init’: function(brand, doors){ this.brand = brand; this.doors = doors; } } !
var peugeot = Objetc.create(Car);