JavaScript patterns

Notes for JavaScript Patterns by Stoyan Stefanov

1. Introduction

patterns in general

solution to a common problem
don't re-invent the wheel if you don't have to
provide a level of abstraction (models - all is wrong, some are useful)
common patterns help communication
this book covers
- design patterns: (generally simpler) JS implementation of GoF patterns
- coding pattens: JS specific pattern and good practices (main topic of the book)
- antipatterns: common approach causing more problem than it solves

(almost) everything is an object

only five primitive types are not objects: number, string, boolean, null, undefined
first three has object representation with primitive wrappers
functions are objects too
a var is an object
- becomes a property of the internal Activation Object or global object if it's global
- var itself is object-like, has properties called attributes (exposed since ES5)
- attributes determine if var can be changed, deleted or enumerated in for-in

what's an object?

an object is simply a collection of named properties (key-value pairs)
an object can have methods - simply when a value of a property is a function
and object can be modified (almost) anytime - properties added, removed, updated
an object is
- either native: user defined ({}) or built-in (Date) -
- native objects are described in the ES standard
- or host object (window) - defined by the host environment

no classes

no classes, unlearn if you worked with another OO language before
usually you just start with empty object and add properties to it
prefer composition over inheritance

prototypes

one way of achieving inheritance, but nothing special
prototype is just object property that gets added to every function
prototype property points to a new empty object
prototype object almost identical to object literal or new Object() but
but constructor property points at the function you're creating not the builtin Object()

environment

JS programs need an environment to run
the browser is the most common one
most patterns in the book are environment-agnostic
environments can provide their own host objects
- which might have unexpected behaviour
- not defined in the ES standard

EcmaScript 5

core javascript is based on the EcmaScript standard
ES3 was accepted in 1999, ES4 was dropped, ES5 2009
most important addition: strict mode
- trigerred by a 'use strict'; - backwards compatible
- once per scope - that function is executed in a strict subset of the language
- error is thrown if a non strict allowed feature is used
the plan is that future version will only support strict mode

JSLint/JSHint

Javascript is an interpreted language with no compiler to help spotting errors
JSLint and JSHint are static code analysis tools
JSLint is really strict but JSHint is more configurable
All examples in the book pass JSLint

console

the console object is not part of the language but available in most environments
Firebug in Firefox, Chrome Dev Tools in Chrome, standard I/O in Node.js, IE8+ Developer Tools
console.log - prints all parameters passed to it
console.dir - enumerates object and print all properties
when testing in browser console they log output by default

chrome dev console

log XHR
console.time()/console.timeEnd()
console.dir()/dir()
inspect() / $0
$$
monitorEvents() // mouse, key
keys()/values()
copy()

2. Essentials

minimizing globals

JavaScript uses functions to manage scope
variables declared within a function are local and not visible outside
global variables are declared outside of functions or used without being declared
every JS environment has a global object - accessible via this outside of any function
every global variable becomes a property of the global object
in browser the global object has a property called window pointing to the global object itself

problems with globals

shared among all the code in your app or webpage
danger of name collisions (especially with third-party code)
easy to create globals involuntarily: implied globals
implied globals: undeclared var is global
chained declaration also results in implied globals unless vars are declared in advance
you might accidentally overwrite existing host object properties
globals created with var outside of any function can't be deleted
ES5 strict mode doesn't allow undeclared variables

access to the global object

pass a reference to this from global scope to your function
non-strict mode: any function invoked (not with new) has this pointing at the global object

single var pattern (nope)

the world has moved on: see this blog post
single var statement at the top of your functions
single place to look for all the vars needed by your function
prevents logical errors when var is used before it's defined (hoisting)
might be good practice to initialize them with some defaults
- to avoid undefined
- also communicates the intended use

hoisting

multiple var statements (anywhere in a function) act as if they were at the top

caching array length in for loops (?)

for cache array length for (var i, max = arr.length; i < max, i++)
unless length can change

for in and hasOwnProperty when needed

for in - filter things coming down the prototype chain

for (prop in obj){
    if(obj.hasOwnProperty(prop)){
    }
}

unless you know and can trust the object you're dealing with

don't augment builtin prototypes

augmenting the prototype property of constructor functions is powerful
but hurts maintainability when done on builtin prototypes
when you absolutely need to: communicate with your team and check if property already exists

if (typeof Object.prototype.myMethod != = function) {
    Object.protoype.myMethod = function () { // implementation
    }
}

`switch`

align each case with switch
indent code within each case
always end case with break;
avoid fallthroughs (no break)
end the switch with default:

avoid implied typecasting

JavaScript implicitly typecasts variables when you compare them
always use === and !=== as they check types as well

eval() is evil

executing any String as JavaScript, seriously?
use [] to access dynamic properties
use JSON.parse for AJAX responses
always use functions with setTimeout and setInterval (instead of Strings)
try not to use new Function() as it's similar to eval

specify radix `parseInt()` (?)

parseInt() gets a numeric value from a String
has an optional radix parameter which shouldn't be omitted (in ES3)
ES3 parseInt('08') gets confused and treats numbers starting with 0 as octals

code conventions

more important to agree and consistently follow than what the exact details are
indent everything within curly braces
always use curly braces (even when optional: for, if)
avoid errors or confusion by automatic semicolon insertion
- always put opening curly braces on the same line as the previous statement
- always use semicolons
generic and consistent use of spaces makes code more readable
use vertical spacing too - blank lines to separate units of code

naming conventions

Capitalize constructor functions to differentiate them
use camelcase in function and variable name to separate words
all caps for constants (not expected to change even though this can't be enforced until ES6 const)
underscore (_ or __) prefix (and/or suffix) for private API

write to be read

keep comments up to date if you write them
jsDoc and YUIDoc can generate API docs from comments

minify in production

any code delivered to the browser should be minified to improve performance
Uglify, Closure Compiler, YUI Compressor

Run JSLint/JSHint

on edit/save

3. Literals

{},[] and // is preferable
instead of using new Array(), new Object(), new RegExp()
more concise, less error-prone

Object literal

object are simple maps or key value pairs
properties: values that are primitives or other objects
methods: values that are functions
custom objects (or user defined native objects) are mutable at any time
you can add/remove functionality as you go

var test = {};
test.message = 'hello';
test.hello = function(){ console.log('hello'); };
delete test.hello;

but you're not required to start with an empty object

var test = { message: 'hello' };

note that empty object also inherit everything from Object.prototype
object literal notation emphasises that objects are just mutable hashes
no need for classes
also there's no need for scope resolution like with constructor
(scope resulotion is required to look for constructor with same name in the scope chain)

Object constructor catch

there's no reason to use new Object() but legacy code might rely on an additional 'feature'
Object constructor accepts a parameter
and might delegate to another builtin constructor depending on the passed in value

Custom constructor functions

just a function
when invoked with new:
- an empty object is created referenced by this
- this inherits the prototype of the function
- properties and method are added to this
- the newly created object referenced by this is returned
reusable members such as methods should go to the prototype
this is not really initalized with an empty object
but this actually is a result of Object.create() called with prototype
return value can be changed by explicitly returning a different object
non-Object return values are silently ignored and this is returned

enforcing new

when a constructor is called without new this points at the global object
above is no longer true in strict mode, this won't point at the global object
always uppercase the first letter of constructor functions (and lowercase function names)
also when not using the prototype you can just return a new object literal (that)

self-invoking constructor

another pattern to enforce new
calls itself with new if not called with new

function Waffle(){
    if(!(this instanceof Waffle)){
        return new Waffle();
        //...
    }
}

alternative to above not hardcoding constructor name (not in ES5 strict mode!)

if(!(this instanceof arguments.callee)){
    return new arguments.callee();
}

`arguments`

inside every function an object called arguments is created
containing all the parameters passed to the function when it was invoked
arguments has a property named callee which points back at the called function
arguments.callee is not allowed in ES5 strict mode

Array literal

[] is preferred to new Array()
unexpected Array constructor behaviour:
- called with single number, uses the number as length
- if number is a float, results in RangeError as it's not valid array length
- hack for repeating strings: new Array(256).join(' '); //255 spaces

checking Array-iness

typeof with array operands returns object
before ES5 - checking for length or slice property
ES5 introduced .isArray method
also Object.prototype.toString() returns "[object Array]" (instead of "[object Object]")

JSON

combination of object and array literal notation
but property names and Strings have to be wrapped in double-quotes
no functions or regex literals
ES5 JSON.parse and JSON.stringify

Regex literal

// is preferred to new RegExp()
shorter and no need to escape quotes or double-escape backslashes
/<regex>/<flags> - flags (g)lobal, (m)ultiline, case (i)nsensitive
use new RegExp() if the pattern is not known, and constructed runtime as a String
before ES5 the literal created only one object even when called repeatedly
(same object is a problem as it has properties like lastIndex set)
starting from ES5 regex literal returns new object

primitive wrappers

JS primitives: number, string, boolean, null and undefined
number, string and boolean have primitive wrapper
primitive wrapper objects come with useful methods like .toFixed() or substring()
these methods work on primitive (variables) as well, converted temporarily
only use wrapper object when you need to augment a value and persist state (do you really need to?)
attempting to augment primitive value doesn't result in error but won't persist state
new wrapper constructor converts argument to primitive value

Error object

JS has built-in Error constructors to be used with throw
Error(), SyntaxError(), TypeError()
these error object have name and message properties
Error constructors work the same way when called with or without new
throw works with any object - you can come up with custom error objects

`new Date()`

one of the only builtin constructors you actually want to use

4. Functions

functions are first class objects

can be created dynamically at runtime
can be assigned to vars, have their references copied to other vars
can be augmented and deleted (except for some special cases)
can be passed as arguments to other functions or returned by them
can have their own properties and methods
they's just another object with a special feature: they're executable
(but don't use new Function(arguments, code) as it's bad as eval)

functions provide scope

in JS there's no curly braces local scope
blocks don't create a scope
there's only function scope
any var defined within function is only visible in that function
any war within an if block or for loop is local only to the wrapper function
if there's no wrapper function then it becomes global

terminology

named function expression

var add = function add (a,b) { ... }

if you skip the name: (unnamed) function expression or anonymous function

var add = function (a,b) { ... }

using anonymous function won't affect definition or invocations etc.
but the name property of the function object will be undefined
careful, that's what's shown in stacktraces
(the name property isn't (wasn't?) part of the ES standard)
function declaration:

function (a,b) { ... }

no semicolon required for function declarations
can only appear in program code: inside bodies of other functions or global space

name property

use named function expression or declaration as it sets name property
allows function name to be displayed properly in debugger

literal and using a different var name

function literal is an ambiguous term and should be avoided
giving a function a name and assigning it to a var with a different name might not work in older browsers

function hoisting

for function declarations the function definition also gets hoisted
for function expressions it's only the variable that gets hoisted
function expressions are not callable before their definitions

callback pattern

function reference (callback) can be passed into another function
the other function can execute (call back) the passed in function when appropriate

callback method vs function

careful with using this if callback function is a method of an object
as callback is not called as method but a function this points at either global or the callers this
a workaround is to pass to object in a second parameter, then callback_function.call(obj, args)
or pass object and method name as string then var callback_function = obj[callback_name]

callback examples

async event handlers in the browser accept callbacks (addEventListener)
setTimeOut and setInterval also accepts callbacks

returning functions

functions are objects so they can be used as return values
a function can return another more specialized function or create one on demand

self defining function pattern

var selfDefining = function(){
    //e.g. do some prep you only got to do once
    selfDefining = function(){
        // new function body to overwrite old one
    }
}

another name for this is lazy function definition
any properties previously set are cleared when redefining
also if function used with a different name (assigned to another var)
the var with the different name will use the non-redefined function

immediate function

execute function as soon as it's defined

(function(){
    //...
}());

wrapped in parens so it's clear it's not a function declaration (but expression)
scope sandbox for initialization code
not leaking any variables
global objects can be passed as parameters
so don't have to use window inside immediate function
but don't pass too many vars to keep it readable
scope of the immediate function can be used to store private data
and then an object with public methods can be returned
can be used to implement self-contained modules
other names: self-invoking, self-executing

immediate Object initialization

({
    property: 'value'
    method: function(){ ... }
    init: function(){ ... }
}).init();

wrapped in parens so that it's clear it's not a code block but object
same purpose as immediate function above but more structured
private helper methods are clearly distinguishable
might not be trivial for minifiers to shorten inner helper method names
no reference to the object is available after init
unless you do return this; in init

init-time branching

also known as load-time branching
if a condition is not going to change (e.g. browser feature)
only check it once in your program in your init code

function properties and memoization

functions are objects and can have properties
all functions have a length property (number of arguments it accepts)
memoization: caching the return value of a function
you can add a property named cache - object
cache object: keys - argument, values - return value
multiple arguments - serialize them (e.g. JSON.stringify) to get a single value

options/configuration object

when a function needs to be called with many parameters just use an object
parameter or doesn't matter, optional parameters can be skipped
easier to read, add remove parameters
but you need to remember parameter names, older minifier might not shorten names properly

function application

var hello = function(message){ ... };
hello.apply(null, ['hey!']);

a function can be applied using Function.prototype.apply
first argument is an object to bind this to
second argument is an array of arguments
in non-strict mode if first argument is null then it'll point at the global object
Function.prototype.call is just syntactic sugar over apply
call expects parameters as normal parameter list instead of an array

function binding

Function.prototype.bind has the same signature as .call
creates a new function bound to the object and optional parameters passed in

partial application / currying

call a function with less than all of it's arguments
and return a function expecting the rest of the arguments
this transformation of function is called currying or schonfinkelizing
use when find yourself calling a function with same arguments

// basic curry example
function curriedAdd(x,y) {
    if(y === undefined) {
        return function(y) {
            return x+y;
        }
    }
    return x + y;
}

// currying with bind
var curried = add.bind(undefined, 10);
curried(5);

5. Object creation patterns

namespace pattern

reduce number of globals and name collisions (without excessive prefixing)
create a single global object for your app/lib
change all your functions and variables to become a property of that object

var myApp = myApp || {}; // prevent overwriting if namespace split across files
myApp.myFunc = function(){ ... }

prevent overwriting

prevent overwriting if namespace split across files

var myApp = myApp || {};

namespace function

can create a function to turn a dot separated string to nested objects

myApp.namespace = function namespace(ns){
    var parts = ns.split('.').slice(1); // split on dot, skip first item
    var parent = myApp;
    parts.forEach(part, i){
        if(typeof parent[part] === 'undefined') {
            parent[part] = {};
        }
        parent = parent[part];
    }
}

myApp.namespace('myApp.this.is.nested') === myApp.this.is.nested;

declare dependencies at the top

function myFunction(){
    var dom = myApp.utils.dom;
    var event = myApp.utils.event;
}

shorter to type module names afterwards
deps in one place
some minifiers won't shorten global var names

private members with closures

constructor function create a closure
any variables part of constructor closure are not visible outside of it

function Person() {
    var secret = 'hey';
    return {
        doIt: function (){
            // can see secret
        }
    }
}

var me = new Person();
me.secrect === undefined;
secret === undefined;
me.doIt(); //does it

privileged methods are the ones declared within the constructor
privileged methods have access to private members
old versions of Firefox allowed access to private scope
internal arrays/objects are still modifiable via reference
make sure you return a new object with only the properties needed by caller
or copy your objects/arrays (with utility methods)

private properties on prototype

properties are re-created every time an object is initialized
shared properties of prototype can also be made private with the same pattern

Person.prototype = (function(){
    //all person sharing the same secret
    var secret = 'hey';
    return {
        doIt: function (){
            // can see secret
        }
    }
}());

revealing module pattern

revealing private methods by assigning them to properties of the returned object
can name the property differently to the internal function
can expose internal function under more than one names

Person.prototype = (function(){
    function sayHello() {}
    return {
        greeting: sayHello
    }
}());

module pattern

combination of above:
1. define a namespace
2. assign an immediate function to it
3. which declares dependencies at the top
4. has private methods
5. and returns an object revealing public API of the module
6. globals can be passed in parameters to the immediate function
a module can create a constructor as well
if you return the constructor function instead of an object

sandbox pattern

addresses some namespace drawbacks: single global var, long dotted names

new SandBox('dependencies', 'here', function(box){
  // your code here
});

you have a single global constructor
passed in callback function is you isolated environment
you initiate multiple Sandbox object and even nest them
you can name the constructor appropriately (instead of Sandbox)
YUI (now dead) used this

implementing the sandbox pattern

as the Sandbox function is an object we can add a modules (object) property to it
add required modules to this
then call callback with this
the callback is the users sandbox and get populated with the requested functionality

static members

just add property to constructor function - as that's an object as well
(normal methods are added to the prototype or the returned object)
you can't call static methods on instance unless you add an alias to prototype
when aliasing static method on prototype - careful if you use this within the method

private static members

return constructor function via an immediate (self invoking) function
variables within the immediate function are invisible outside (as usual)

constants

no real way to do it in ES5
just naming convention: all caps, and also worth making sure they're static
const keyword coming in ES6

chaining

methods (that may not have a meaningful return value) returning this
allows calling methods in a chain in a single expression
pros: save some typing, more concise, small and focused methods
cons: may get a bit harder to debug - lot happening on a single line
JQuery uses it

`method()` method

making JavaScript a bit more class-like (which is probably a bad idea)
some syntactic sugar to add functions to the prototype property of the constructor

var Person = fucntion(){...}.method('methodName', function(){ ... });

6. Code reuse patterns

Prefer composition over inheritance.

classical inheritance

play on the word 'class', nothing to do with the word classical
JavaScript has no classes but constructor functions make same people think that
use the term constructor function
probably a bad idea but worth knowing about

the prototype chain

can think of objects as blocks of memory
all objects from the same constructor point at same prototype object
can think of it as if they were pointing at it via a __proto__ property
__proto__ is actually available in some JavaScript environments
properties are looked up by walking through this prototype chain:
if an object doesn't have a property it's __proto__ is consulted

prototypal inheritance

modern classless pattern
no classes, objects inherit from objects

function object (parent) {
    function F() {}
    F.prototype = parent;
    return new F();
}

var parent = { ... }
var child = object(parent);

children get parent methods and properties via __proto__ link
parent can be created via constructor as well (not just literal)

Object.create

prototypal inheritance is built-in since ES5
Object.create(parentObject, ownPropertiesObject)

inheritance by copying properties

//shallow copy
function extend (parent, child) {
    var key;
    child = child || {};
    for(key in parent){
        if(parent.hasOwnProperty(key)){
            child[key] = parent[key];
        }
    }
    return child;
}

shallow copy just copies references of arrays and object
children can modify parent properties :(
deep copy is when array elements and object properties are copied as well

mixins

just deep copy all properties from multiple objects and mix in to a new Object
not like mixins in other languages, here: no link to parent

borrowing methods

sometimes you want to use one or two methods of an existing Objects
you don't want a parent-child relationship with that Object
can be done with call and apply
pass in your object to bind this to within the function

notMyObject.doStuff.call(myObject, param1, param2);
//or
notMyObject.doStuff.apply(myObject, [param1, param2]);

example: borrowing from Array

function example(){
    return [].slice.call(arguments, 1, 3);
    //or
    //Array.prototype.slice.call(arguments, 1, 3)
}

one typical example is borrowing Array methods for the arguments object

borrow and bind

with call/apply this reference has to be passed in when called
sometimes it's better to locked/bound to specific object in advance
bind function binds a method to an object

//simple bind function
function bind (object, method) {
    return function() {
        return method.apply(object, [].slice.call(arguments));
    }
}

`Function.prototype.bind`

ES5 has bind builtin, it also accepts partial argument list

//basic example implementation handling partial application
Function.prototype.bind = Function.prototype.bind || function(thisArg) {
    var fn = this;
    var slice = Array.prototype.slice;
    var args = slice.call(arguments, 1);

    return function () {
        return fn.call(thisArg, args.concat(slice.call(arguments)))
    }
}

7. Design patterns

as made famous by the GoF book
language independent but mainly for Java/C++ like strongly typed languages
most of them are really easy to implement in JavaScript

singleton

only one instance of specific class
JS: no classes, when you create a new object there's no other like it
(in JS some people mean Chapter 5. module pattern by singletons)
you might want singletons when using new:
- store instance as a (static) property on constructor function
- but static property is public
- can also protect instance as a private static member (via closure)
- (be careful not to wipe out prototype properties)

var IAmSingleton;

(function(){
    var instance;
    IAmSingleton = function() {
        if (instance) {
            return instance;
        }
        instance = this;

        //... all the functionality
        this.whatever = true;
    }
})();

factory

performs repeating operations when setting up similar objects
built-in Object() constructor is an example, returns Number, String, etc based in argument

other patterns

all easily implemented in Javascript
iterator - processing aggregate data
decorator - dinamically add functionallity to an object at runtime
strategy - select algorithm at runtime
facade - alternative interface to an object - combining method
proxy - alternative interface, sitting in front of object
mediator - separate object providing communication instead of loose coupling
observer - publish/subscribe to aid loose coupling, widely used in JavaScript

8. DOM and browser patterns

separation of concerns

content - HTML, presentation - CSS, behaviour - JS
progressive enhancement - basic HTML should work, too
no inline JS (onclick) or CSS (style attribute)
JS - capability detection instead of browser sniffing

DOM access

DOM access is expensive and should be kept to minimum
avoid DOM access in loops
assign DOM references to local variables and work with those
use selectors API (since IE8)
cache length when iterating over HTML collections (old IE versions)
using ids is the fastest way to access DOM elements

//var it up
var hey = document.getElementById('hey');
//use selectors API
document.querySelector('.hello');
document.querySelectorAll('.hello');

DOM manipulation

in addition to accessing you often want to add/remove/modify DOM elements
updates to DOM can be really expensive, fewer the better
can cause a browser to repaint the screen
can also cause a reflow - recalculating the elements geometry

batch DOM additions

do batch additon to DOM, and try doing them outside of the live tree

//create elements outside of live tree
var paragraph = document.createElement('p');
var text = document.createTextNode('some text');
paragraph.appendChild(text);
//add it at the end
document.body.appendChild(paragraph);

use a document fragment if no parent element otherwise

//create a fragment if the elements you're adding don't have a parent
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement('p'));
fragment.appendChild(document.createElement('p'));
//add fragment at the end
document.body.appendChild(fragment);

batch DOM updates

you can make a clone of the root of the subtree you're changing
then swap your clone with the original

var oldNode = document.getElementById('result');
var clone = oldNode.cloneNode(true);
//... make your changes
//then replace
oldnode.parentNode.replaceChild(clone, oldNode);

event handling

no onclick in HTML (seriously :)
usually via framework but worth knowing the basics
EventTarget.addEventListener(eventType, listener, useCapture) adds an event handler
event type - String representing event type to capture
listener - object implementing EventListener interface, or simply a function
useCapture - all events will events dispathed to this listener first before other listeners beneath this in the DOM tree
addEventListener is not available in IE8 and before
useCapture - optional (with default=false) in recent browser
just always pass useCapture in for broadest compatibility
handler is called with event object
e.stopPropagation() - prevents event from bubbling up to document root
e.preventDefault() - prevents default action (if required)

event delegation

events are bubbling up to parent elements
can reduce the number of event listeners by attaching one only to the parent
event properties can be used to filter out the events we care about
drawback: slightly more complex code but there are JS libraries to make this easy

web workers

javascript runs on a single thread in the browser
web workers: background thread support by the browser
only in modern browsers (from IE 10)
you put worker code in a separate file
worker can use postMessage to send messages to the caller
caller can subscribe to messages using Worker.onMessage

var worker = new Worker('my_worker.js');
worker.onMessage(function(event) {
    console.log(event.data);
});
//my_worker.js: postMessage('hello there');

XMLHttpRequest

special constructor function available in most browsers
allows sending HTTP requests
libraries wrap this - e.g. Jquery.ajax

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function handleResponse() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.open('GET', 'page.html', true);
xhr.send();

JSONP

JSON with padding
not restricted by same origin policy (but really you should just setup CORS properly)
callback parameter in URL specifies the JS function handling the response
server should return data passed into the callback function as parameter

Image beacons

even without javascript, data can be sent to the server
include an img tag (typically 1x1 transpatrent PNG)
actually better to respond with 204 No Content (old IE version might not like this)
browser makes a request when the page is being loaded

combining scripts, minification, caching

concatenate scripts to reduce number of HTTP requests
loosing some of the granular caching benefits
have to come up with versioning scheme
minify and gzip to reduce script size
use source maps to still allow easy debugging
use cache headers properly (browsers don't cache for too long by default)

script tag location and attributes

don't use language or type attribute as browsers assume JS anyways
script tags (by default) block page loading until they're downloaded, parsed and run
put your script tags at the bottom of the page or use HTML5 async script (since IE10)

HTTP chunking

sending HTTP response in chunks, browser can deal with this
possible to send page header first, then page content, the script tags at the bottom
these can be sent in different chunks, browser will progressively render

dynamic script tag example

//create script tag
var script = document.createElement('script');
script.src = 'my_script.js';
//append to head
document.documentElement.firstChild.appendChild(script);

careful with multiple files (if they depend on each other)
careful with what you append to (make sure it exists or use the script tag running the append)

lazy loading

dynamically loading (page-enhancing) JS on page onload

preloading

dinamically create object tag (to prevent execution)
set src to js file, and width, height to 0
next page will get that JS file from cache

csabapalfi/javascript-patterns

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Error
Looks like something went wrong!

Packages