added general patterns

chuanxshi · chuanxshi · commit 58d925f7ea54 · 2012-01-11T02:03:17.000+08:00
diff --git a/general-patterns/for-in-loops.html b/general-patterns/for-in-loops.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+// the object
+var man = {
+  hands: 2,
+  legs: 2,
+  heads: 1
+};
+
+// somewhere else in the code
+// a method was added to all objects
+if (typeof Object.prototype.clone === 'undefined') {
+  Object.prototype.clone = function () {};
+}
+
+// 1.
+// for-in loop
+for (var i in man) {
+  if (man.hasOwnProperty(i)) { // filter
+    console.log(i, ":", man[i]);
+  }
+  /*
+  result in the console
+  hands : 2
+  legs : 2
+  heads : 1
+  */
+  
+// 2.
+// antipattern:
+// for-in loop without checking hasOwnProperty()
+for (var i in man) {
+  console.log(1, ":", man[i]);
+}
+/*
+result in the console
+hands : 2
+legs : 2
+hands : 1
+clone: function()
+*/
+
+for (var i in man) {
+  if (Object.prototype.hasOwnProperty.call(man, i)) { // filter
+    console.log(i, ":", man[i]);
+  }
+}
+
+var i,
+    hasOwn = Object.prototype.hasOwnProperty;
+for (i in man) {
+  if (hasOwn.call(man, i)) P // filter
+    console.log(i, ":", man[i]);
+  }
+}
+</script>
+</body>
+</html>
diff --git a/general-patterns/for-loops.html b/general-patterns/for-loops.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+// sub-optimal loop
+for (var i = 0; i < myarray.length; i++) {
+  // do something with myarray[i]
+}
+
+for (var i = 0, max = myarray.length; i < max; i++) {
+  // do something with myarray[i]
+}
+
+function looper() {
+  var i = 0,
+      max,
+      myarray = [];
+      
+  // ...
+  var i, myarray = [];
+  
+  for (i = 0, max = myarray.length; i < max; i += 1) {
+    // do something with myarray[i]
+  }
+  
+  for (i = myarray.length; i--;) {
+    // do something with myarray[i]
+  }
+  
+  while (i--) {
+    // do something with myarray[i]
+  }
+ 
+}
+</script>
+</body>
+</html>
diff --git a/general-patterns/globals.html b/general-patterns/globals.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+function sum(x, y) {
+  // antipatten: implied global
+  result = x + y;
+  return result;
+}
+
+function sum(x, y) {
+  var result = x + y;
+  return result;
+}
+
+// antipattern, do not use
+function foo () {
+  var a = b = 0;
+  // ...
+}
+
+function foo() {
+  var a, b;
+  // ...
+  a = b = 0; // both local
+}
+
+var global = (function () {
+  return this;
+}());
+
+</script>
+</body>
+</html>
diff --git a/general-patterns/hoisting.html b/general-patterns/hoisting.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+// antipattern
+myname = "global"; // global variable
+function func() {
+  alert(myname); // "undefined"
+  var myname = "local";
+  alert(myname); // "local"
+}
+func();
+
+myname = "global"; // global variable
+function func() {
+  var myname; // same as -> var myname = undefined;
+  alert(myname); // "undefined"
+  myname = "local";
+  alert(myname); // "local"
+}
+func();
+
+</script>
+</body>
+</html>
diff --git a/general-patterns/single-var-pattern.html b/general-patterns/single-var-pattern.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+function func() {
+  var a = 1,
+      b = 2,
+      sum = a + b,
+      myobject = {},
+      i,
+      j;
+      
+  // function body...
+}
+
+function updateElement() {
+  var el = document.getElementById("result"),
+      style = el.style;
+  // do something with el and style...
+}
+</script>
+</body>
+</html>
