Skip to content

Instantly share code, notes, and snippets.

@dd3141592

dd3141592/index.html

Last active January 6, 2016 21:19
Show Gist options
  • Save dd3141592/9291ce7319ef23d058b7 to your computer and use it in GitHub Desktop.
Save dd3141592/9291ce7319ef23d058b7 to your computer and use it in GitHub Desktop.
Download ZIP
crib notes and some examples from CH 2 "Javascript Patterns", by Stoyan Stefanov
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Javascript Patterns">
<meta charset="utf-8">
<title>JS Bin</title>
</headJavascript patterns
<body>
Javascript Patterns, by Stoyan Stefanov (O'Reilly). Copyright 2010 Yahoo!, Inc., 9780596806750.
<script id="jsbin-javascript">
//My crib notes from "JavaScript Patterns" by Stoyan Stefanov
//Chapter 2 Essentials
//includes some examples too
//you will need to buy the book - these notes are for review & reference only
"use strict";
//anti-pattern code below defines a global b
function foo(){
var a = b = 0;
}
foo();
console.log(this.b);
//accessing the global object
(function(){
//console.dir(this);
}(this));
// use one var declaration for all variabes at top of function
//eliminates some code and loads faster
//one place to look for all variables
//eliminates unintentional globals
//eliminates 'hoisting' problem - i.e. problems when using a variable
// before it's defined
//anti-pattern - hoisting example
problem = 'global';
function foo2(){
console.log(problem);
var problem = 'local';
console.log(problem);
}
foo2();
var myArray = [];
// for loops
//anti-pattern
// assume myArray is an HTMLCollection object
// myArray.length computed with every loop - and this is an expensive live query on the DOM
for(var i = 0; i < myArray.length; i++ ){
//.....
}
//better to 'cache' the myArray.length value like so
for(var i = 0, max = myArray.length; i < max; i++){
//.......
}
// for in loops - enumeration on object properties - often useful to use hasOwnProperty to avoid properties that are part of the prototype chain.
var man = {
hands:2,
legs:2,
heads:1
};
if(man.hasOwnProperty(i)){
console.log(i + ": " + man[i]);
}
//recommend not overriding prototype properties of constructors
// some exceptions - for example expected functionality in later versions
//switch pattern
// don't use fall-throughs
// indent as shown
// provide a default that is sane
var inspect_me = 0,
result = '';
switch(inspect_me){
case 0:
result = 'zero';
break;
case 1:
result = 'one';
break;
default:
result = 'unknown';
}
//avoid implied typecasting
var zero = 0;
//anti-pattern
if(zero == false){
//executed
}
if(zero === false){
//not executed
//because === and !=== check type and value
}
//eval is evil
//use consistent indentation - for example 4 spaces (default for jsLint)
//always use curly braces
// and always put the opening curly brace on the same line as the prev. //statement
//always use semicolons
//generous and consistent indentation
//naming conventions - consistency is important
//examples:
//upper camel casing constructors
//lower camel casing functions and variables
// constants all caps with underscores separating words
// using _prefix for private members
//comment code and keep comments up to date
//automatically generating api docs from comments
//see JSDoc Toolkit or YUIDoc
</script>
<script id="jsbin-source-javascript" type="text/javascript">//My crib notes from "JavaScript Patterns" by Stoyan Stefanov
//Chapter 2 Essentials
//includes some examples too
//you will need to buy the book - these notes are for review & reference only
"use strict";
//anti-pattern code below defines a global b
function foo(){
var a = b = 0;
}
foo();
console.log(this.b);
//accessing the global object
(function(){
//console.dir(this);
}(this));
// use one var declaration for all variabes at top of function
//eliminates some code and loads faster
//one place to look for all variables
//eliminates unintentional globals
//eliminates 'hoisting' problem - i.e. problems when using a variable
// before it's defined
//anti-pattern - hoisting example
problem = 'global';
function foo2(){
console.log(problem);
var problem = 'local';
console.log(problem);
}
foo2();
var myArray = [];
// for loops
//anti-pattern
// assume myArray is an HTMLCollection object
// myArray.length computed with every loop - and this is an expensive live query on the DOM
for(var i = 0; i < myArray.length; i++ ){
//.....
}
//better to 'cache' the myArray.length value like so
for(var i = 0, max = myArray.length; i < max; i++){
//.......
}
// for in loops - enumeration on object properties - often useful to use hasOwnProperty to avoid properties that are part of the prototype chain.
var man = {
hands:2,
legs:2,
heads:1
};
if(man.hasOwnProperty(i)){
console.log(i + ": " + man[i]);
}
}
//recommend not overriding prototype properties of constructors
// some exceptions - for example expected functionality in later versions
//switch pattern
// don't use fall-throughs
// indent as shown
// provide a default that is sane
var inspect_me = 0,
result = '';
switch(inspect_me){
case 0:
result = 'zero';
break;
case 1:
result = 'one';
break;
default:
result = 'unknown';
}
//avoid implied typecasting
var zero = 0;
//anti-pattern
if(zero == false){
//executed
}
if(zero === false){
//not executed
//because === and !=== check type and value
}
//eval is evil
//use consistent indentation - for example 4 spaces (default for jsLint)
//always use curly braces
// and always put the opening curly brace on the same line as the prev. //statement
//always use semicolons
//generous and consistent indentation
//naming conventions - consistency is important
//examples:
//upper camel casing constructors
//lower camel casing functions and variables
// constants all caps with underscores separating words
// using _prefix for private members
//comment code and keep comments up to date
//automatically generating api docs from comments
//see JSDoc Toolkit or YUIDoc
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment