added jquery patterns

chuanxshi · chuanxshi · commit a2b3e252283f · 2012-01-12T07:36:41.000+08:00
diff --git a/jquery-patterns/append.html b/jquery-patterns/append.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+// antipattern
+// appending inside
+$.each(reallyLongArray, function(count, item) {
+  var newLI = '<li>' + item + '</li>';
+  $('#ballers').append(newLI);
+});
+
+// documentFragment off-DOM
+var frag = document.createDocumentFragment();
+$.each(reallyLongArray, function(count, item) {
+  var newLI = '<li>' + item + '</li>';
+  frag.appendChild(newLI[0]);
+});
+$('#ballers')[0].appendChild(frag);
+
+// string concatenate and set innerHTML
+var myhtml = '';
+$.each(reallyLongArray, function(count, item) {
+  myhtml += '<li>' + item + '</li>';
+});
+$('#ballers').html(myhtml);
+</script>
+</body>
+</html>
diff --git a/jquery-patterns/requery.html b/jquery-patterns/requery.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+// antipattern
+// create and append your element
+$(document.body).append("<div class='baaron' />");
+// requery to bind stuff
+$("div.baaron").click(function(){});
+
+// preferred
+// swap to appendTo to hold your element
+$("<div class='baaron' />")
+    .appendTo(document.body)
+    .click(function(){});
+</script>
+</body>
+</html>
diff --git a/jquery-patterns/selector-optimization.html b/jquery-patterns/selector-optimization.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+<title>JavaScript Patterns</title>
+<meta charset="utf-8">
+</head>
+<body>
+<script>
+// antipattern
+$('.buttons > *')
+// preferred
+$('.buttons').children()
+
+// antipattern
+$('.gender :radio')
+$('.gender *:radio')
+// preferred
+$('.gender input:radio')
+</script>
+</body>
+</html>
