javascript-patterns.markdown

February 23, 2015 · View on GitHub

JavaScript Patterns

by Stoyan Stefanov

I, Michael Parker, own this book and took these notes to further my own learning. If you enjoy these notes, please purchase the book!

pg 3: Native objects are described by the ECMAScript standard and are either built-in or user-defined; host objects are defined by the host environment.
pg 4: A prototype is an object, not a class or anything special, and every function has a prototype property.

pg 12: Globals declared with var outside any functions cannot be deleted; any implied globals are properties of the global object, and can be deleted.
pg 14: All variable declarations are hoisted to the top of a function, so referencing a variable declared later yields undefined, and not a global value with the same name.
pg 16: HTMLCollection objects are live queries against the document, and so iterating without caching their length is expensive.
pg 21: To avoid confusion caused by implied typecasting, use the === and !== operators that check both the values and the type of the expressions compared.
pg 22: Passing strings to setInterval, setTimeout, and the Function constructor is similar to using eval and should be avoided.
pg 26: To avoid ambiguity with Javascript's semicolon insertion mechanism, put the opening curly brace on the same line as the previous statement.
pg 34: At the expense of some verbosity, the YUIDoc system is language-agnostic and can document code in any language.
pg 36: If using a global variable more than once in a function, assign it to a local variable so it can be effectively minified.

pg 40: A trailing comma after the last name-value pair in an object literal produces errors in IE, so avoid it.
pg 42: Invoking a constructor with new creates an empty object, referenced by this, that inherits from the method prototype.
pg 48: To test if an object is an array, check whether Object.prototype.toString returns "[object Array]" when applied to it.
pg 51: Use the RegExp constructor when the pattern is known only at runtime; otherwise, use the literal form.
pg 52: Number, string, and boolean primitives are automatically converted to their wrapper objects when methods on them are called.
pg 53: You can only assign properties to the wrapper objects for number, string, and boolean primitives.

pg 60: Function declarations and named function expressions have a name property, which is useful for both debugging and recursion.
pg 62: Function declarations and expressions are hoisted, but expressions will only have their declaration hoisted, not their definition.
pg 68: Self-defining functions overwrite themselves to do less work later, but erase method properties, while references to the old definition may still exist.
pg 70: Immediate functions are a good place to put initialization code that won't pollute the global namespace and will only run once.
pg 74: Initialization tasks in an anonymous object with a method to be called immediately adds structure, but may not be minified effectively.
pg 76: To serialize an object or array of objects as a key in a cache, use JSON.

pg 91: Assigning modules required to local variables lists dependencies in one place, runs faster, and is minified more effectively.
pg 94: Immediate functions that return object literals can provide the scope in which private members of the literal exist.
pg 98: Object literals with methods created by immediate functions can be assigned to method prototypes or namespace objects to create modules.
pg 100: A module can return a method to create a constructor; inside the module, the constructor prototype can be set up appropriately.
pg 106: If a public static method is a method added to a constructor, then this inside the static method will refer to the constructor method.
pg 109: A constant can be implemented as a private property with only a getter, but simply using variables in all caps is likely enough.

pg 116: Prefer talking about constructors in JavaScript instead of classes, which can mean different things to different people.
pg 125: By introducing a proxy between a constructor and its parent prototype, no constructors have the same prototype, avoiding mistakes by modification.
pg 132: In the prototypical inheritance pattern, inheriting from the prototype object of the existing constructor avoids inheriting "own" properties.
pg 136: To re-use only a few methods of an object, don't inherit, but invoke call or apply to borrow them by binding your own object as this.

pg 146: When returning a singleton upon every use to new, wrap the instance in an immediate function to hide it.
pg 153: A decorated object can be the prototype of another object that overrides methods and calls the prototype copies appropriately.
pg 160: A proxy can lazily initialize a "real subject" or cache values computed by it, saving resources.
pg 172: By copying (mixing in) the properties of a publisher object, you can turn any object into a publisher with subscribers.
pg 178: The observer program promotes looser coupling, but shuns sequential code execution which could be more understandable.

pg 184: Selector APIs that accept a CSS selector string and return matching DOM nodes are faster than selecting the nodes yourself.
pg 185: To minimize repainting, add node batches using document fragments, and update nodes by cloning a root and then replacing it.
pg 192: Methods that perform feature detection can rewrite themselves to use the supported method once found without any checks.
pg 195: If you only need to send data to the server, use an image beacon, and ensure it returns a 204 (No Content) response.
pg 197: Set the expires header value of served JavaScript far in the future, and adopt a naming and versioning pattern for the files.
pg 201: Dynamically created script tags do not stop further page downloads until they are downloaded and executed.
pg 202: To insert a new script element safely, insert it immediately before an existing script element in the document.
pg 205: To preload a script, create an object element with a data attribute with no width and height, or use an image beacon in IE.