Download to read offline
Uploaded byAsia Tyshchenko
Js tips & tricks
This document discusses various JavaScript design patterns and best practices including: - Common design patterns like singleton, factory, decorator, and observer. - Minimizing global variables by declaring variables with a single var statement. - Hoisting and how it provides access to function and variable declarations. - Classical inheritance patterns like using the prototype, renting a constructor, and sharing the prototype. - Defining functions as expressions vs declarations and how hoisting works. - Using immediate functions to provide scope and execute initialization code. - Callbacks and how they are used in asynchronous code.
Js tips & tricks
- 1. Java Script Tips &Tricks
- 2. They help uswrite better code using proven practices and not reinvent the wheel.They help us write better code using proven practices and not reinvent the wheel. They help us write better code using proven practices and not reinvent the wheel.They provide a level of abstraction They help us write better code using proven practices and not reinvent the wheel.They improve communication between developers and teams.
- 3. Design patternsDesign patternsDesign patternsCoding patterns singleton factory decorator observer ... JavaScript specific patterns
- 4. Design patternsObject-Oriented Design patternsNoClasses Design patternsPrototypes Design patternsEnvironment Objects Native Host
- 5.
- 6. var a =(b = 0);
- 7. Single var PatternBenefits • Provides a single place to look for all the local variables needed by the function • Prevents logical errors when a variable is used before it’s defined • Helps you remember to declare variables and therefore minimize globals • Is less code
- 8.
- 9. Access to theGlobal Object
- 10. For Loops HTMLCollections •document.getElementsByName() • document.getElementsByClassName() • document.getElementsByTagName() ...
- 11. First-class objects Providescope Functions are objects that: • Can be created dynamically at runtime, during the execution of the program • Can be assigned to variables, can have their references copied to other variables, can be augmented, and, except for a few special cases, can be deleted • Can be passed as arguments to other functions and can also be returned by other functions • Can have their own properties and methods Any variable defined with var inside of a function is a local variable, invisible outside the function.
- 12. Defining a function Functionexpression Function declarations
- 13. Function expression VSFunction declarations Read-only name property Function Hoisting
- 14. Callbacks are in -Asynchronous Event Listeners - Timeouts - Libraries - ...
- 17. - It providesa scope sandbox for your initialization code - Executes a function as soon as it is defined Parameters of an Immediate Function Returned Values from Immediate Functions
- 21. Classical Pattern #1—TheDefault Pattern
- 22. Classical Pattern #1—TheDefault Pattern Drawbacks - Inherit both own properties added to this and prototype properties - It doesn’t enable you to pass parameters to the child constructor
- 23.
- 24. Classical Pattern #2—Rent-a-Constructor Thedrawback is that nothing from the prototype gets inherited A benefit is that you get true copies of the parent’s own members, and there’s no risk that a child can accidentally overwrite a parent’s property.
- 25. Classical Pattern #3—Rentand Set Prototype + The result objects get copies of the parent’s own members and references to the parent’s reusable functionality (implemented as members of the prototype) + The child can also pass any arguments to the parent constructor - The parent constructor is called twice
- 26. Classical Pattern #4—Sharethe Prototype Classical Pattern #1 inherit Changed inherit - If one child or grandchild somewhere down the inheritance chain modifies the prototype, it affects all parents and grandparents.
- 27. Classical Pattern #5—ATemporary Constructor + The child only inherits properties of the prototype - We don’t have a reference to the original parent
- 28. Another methods With theclass keyword ECMAScript 6 introduced a new set of keywords implementing classes. Although these constructs look like those familiar to developers of class- based languages, they are not. JavaScript remains prototype-based. The new keywords include class, constructor, static, extends, and super. With Object.create ECMAScript 5 introduced a new method: Object.create(). Calling this method creates a new object. The prototype of this object is the first argument of the function: