JavaScript: Patterns, Part 1

494 views

Published on

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

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

No notes for slide

JavaScript: Patterns, Part 1

  1. 1. JavaScript Patterns Part One
  2. 2. Patterns ● Design Patterns ○ Gang of Four ○ Templates for any language ● Coding Patterns ○ JavaScript-specific strategies ○ Our main focus in this series ● Antipatterns ○ Common despite being dangerous ○ Introduce more problems than they solve
  3. 3. Object-Oriented ● JavaScript IS an object-oriented language ● 5 primitive types - these are not objects: ○ number, string, boolean, null, undefined ○ three of the primitives have object wrappers ■ Number(), String(), Boolean() ● 3 global properties ○ Infinity, NaN, undefined ● 13 global methods ○ decodeURI, encodeURI, escape, unescape, isFinite, isNaN, parseFloat, parseInt, eval, String, Number, decodeURIComponent, encodeURIComponent
  4. 4. Object-Oriented ● Objects ○ collection of key:value pairs ■ associative array, dictionary, hash ○ mutability - objects can be modified ○ two types: ■ Native JavaScript - defined by ES standard ■ built-in ■ user-defined (var o = {};) ■ Host - defined by browser/host ■ browser ■ DOM
  5. 5. Object-Oriented ● Functions are objects - can have: ○ properties ○ methods (other functions) ● Ther are no classes! ○ GoF: "Prefer object composition over inheritance." ● Prototypes ○ provide an inheritance-like capability ○ prototype is an object, not a class ○ every function object has a prototype property ○ avoid adding to JS built-ins ○ utilize for custom constructors
  6. 6. ECMAScript 5● Standard which JS is based on● Version 5 ○ new objects, methods and properties ○ strict mode ■ removes features ■ makes programs simpler and less error prone ■ backward compatible ■ use strict once per scope ○ not yet supported ○ keep an eye out for the transition
  7. 7. JSLint● JavaScript ○ interpreted ○ no static compile-time checks = hard to debug● Douglas Crockford ○ this tool "will hurt your feelings" ○ but also inspire confidence● jslint.com ○ improve code quality ○ find syntax errors ○ find simple omissions ○ has a wide variety of settings: strict mode compliance
  8. 8. The Console● present in most browsers ○ Gecko: Firebug ○ Webkit: Web Inspector ○ Trident: Developer Tools● less obtrusive than alert()● consoles output methods ○ console.log() outputs params ○ console.dir() enumerates ○ type in directly
  9. 9. Authoring Essentials ● Write Maintainable Code ○ readable ○ consistent ○ predictable ○ focused ○ documented ● Know Your Scope ○ local ○ global
  10. 10. Global● declared outside of any function● browsers provide access via window property● shared among all code, including any 3rd party libs● use as few as possible, strategies include: ○ namespaces ○ immediate functions ○ var declarations
  11. 11. Global● var declarations ○ var inside any function ■ "var foo = {}" ■ makes a foo object local to that function ■ "bar = {}" ■ adds a bar property to the global ■ "var nix = bix = 0" ■ makes a local nix and a global bix ○ var outside any function ■ makes a global variable (not a global property)● vars CAN NOT be deleted, properties can● ES5 strict mode throws error for undeclared variable assignments
  12. 12. Variable Hoisting● all var declarations in a function act as if declared at top● so just declare them at top to avoid confusion var scope = "global"; function f(){ alert(scope); //undefined var scope = "local"; alert(scope); //local } f(); ____________________________ var scope = "global"; function f(){ var scope; alert(scope); //undefined scope = "local"; alert(scope); //local } f();
  13. 13. Loops● for loop ○ cache the length value of your collection ■ Array ■ HTMLCollection ■ especially bad ■ live queries on the DOM ○ exception: when modifying length of collection● try to avoid nested loops at all costs ○ look for other ways ○ ask around ○ might not be obvious, but worth it
  14. 14. Loops● for in loops ○ enumeration of objects ■ ...technically can be used with arrays ■ ...but not recommended ○ hasOwnProperty() ■ important defensive strategy ■ filters out prototype chain ■ ...but has performance implication ■ if your object has redefined hasOwnProperty() ■ Object.prototype.hasOwnProperty.call(obj, i)
  15. 15. Augmenting Built-ins● its done via prototype ○ Object.prototype.newMethodForAll = function(){};● but its best not done at all ○ less predictable ○ other devs wont get it ○ it will show up in loops that dont defend against it● exception conditions - all 3 must be met! 1. if ES or JS will eventually implement anyway 2. if you are sure it doesnt already exist 3. you clearly document AND communicate to your team 4. example: Array.isArray

×