JavaScript Pattern Roundup – Issue 1

Posted on January 19, 2012 by Shi Chuan
Tweet

spacer

A week since the release of JS Patterns – a JavaScript pattern and antipattern collection, the response has been overwhelming. There has been many updates in terms of pattern addition, pattern enhancement, overall improvement and bug fixes.

Pattern enhancement

1) Access to the Global Object

Access to the Global Object pattern has been updated, there has been a couple of ways to access the global object without hard-coding the identifier window.

The traditional way of doing so is:

var global = (function () {
   return this;
}());

The problem with the above pattern is that it no longer works under ES5-strict mode. To counter the issue, another pattern was introduced as below:

var global = Function('return this')();

The above pattern works under ES5-strict and others. The only issue is that performance wise, this method is costly. The below pattern works cross-environment and the performance is significantly improved.

var global = (function () {
   return this || (1,eval)('this');
}());

Performance analysis of various methods (jsperf.com/globalx)

Code:
spacer

Result:
spacer

2) memoization
Another enhancement is in the memoization pattern, the enhancement isn’t anything new. Basically in the old example, the code was written as below:

var myFunc = function (param) {
  if (!myFunc.cache[param]) {
    var result = {};
    // ... expsensive operation ...
    myFunc.cache[param] = result;
  }
  return myFunc.cache[param];
};

The above pattern works fine in most cases, but if param is e.g. “toString”, then this will cause problems:

({})['toString'] // function toString() { [native code] }

The solution is to use “hasOwnProperty”.

o = new Object();
o.prop = 'exists';
o.hasOwnProperty('prop');             // returns true
o.hasOwnProperty('toString');         // returns false
o.hasOwnProperty('hasOwnProperty');   // returns false

The improved pattern looks like the one below:

var myFunc = function (param) {
  if (!myFunc.cache.hasOwnProperty(param)) {
    var result = {};
    // ... expsensive operation ...
    myFunc.cache[param] = result;
  }
  return myFunc.cache[param];
};

Pattern Addition
New pattern addition since the release is Literals and Constructors Patterns section.

Bug Fixes
Correct a typo on jquery append
Added missing curly brace in for in loops pattern
Replaced ‘P’ with ‘{‘ in for in loops pattern
Added comment to conditionals pattern to avoid being misleading
Error in jQuery append
Fix currying
Fixes two typos in memoization
Improved callback example, added an anonymous callback and removed the `while` that was unnecessary and confusing
Update jQuery context and find example
Add parameter form of setTimeout
Update event delegation example, as of jQuery 1.7, .delegate() has been superseded by the .on() method
Alignment correction

Overall Improvement
Title, description and reference has been updated in the code itself in the form of comments.

Thanks
Big thanks to aborjinos, Mathias Bynens, Charles Bonnissent, Dave Jeffery, Deric Crago, hitsthings, archaeron, Eric Ponce, Wynn Netherland, Pablo Fernandez, MATSUU Takuto, Alex Xu, Tolis Christomanos, Jeffrey Lo, David, John Polacek, cernalpanic for the support and help.

Tweet