Basic JavaScript Coding Patterns

no

Transcript

1. Basic JavaScript Coding Patterns @laserji 2012-05-16
2. Variable Definition  var a = 0, b=1, c=“xxx”; // shorter  var obj = {}; // faster  var arr = [];  var regex = /something/;
3. Default Value  arg = arg || „default‟; // fallback  e || e = window.event;  return a || „default‟
4. Condition  answer = obj && obj.xx && obj.xx. property  if( obj.xx ){ … } // don‟t: if(obj != null){}  if( a === b){ … } // always  if(document.getElementById){ … } // ability detect
5. Ternary  check ? value1 : value2;  var foo = (condition) ? value1 : value2;  return (condition) ? value1 : value2;  foo = predicate ? ”one” :  predicate ? ”two” :  ”default”;
6. Iteration  var name = value[i];  i++  var name = values[i++];
7. DOM Operation  el.style.display = „none‟; // offline  // operation  el.style.display = „block‟;  var fragment = document.createDocumentFragment();  innerHTML  // Be careful with NodeList  var imges = document.getElementsByTagName(„img‟);
8. Event Agent  attach event at a higher level  <div id=“highLevelElement”>  <div><ul><li> … </li></ul></div>  </div>  $(„#id‟).click(function(evt){ … });
9. Object as a Namespace  var MYAPP = {};  MYAPP.namespace(„event‟);
10. Chaining  var obj = new MYAPP.dom.Element(„span‟);  obj.setText(„hello‟)  .setStyle(„color‟, „red‟)  .serStyle(„font‟, „Verdana‟);  document.body.appendChild(obj);  // return this
11. Function  (function(){ … })(); // block scope  (function($){ … }(jQuery);
12. Configure Obj  function foo( conf ){ … }  foo ({  key1 : 1,  key2 : 2  })
13. Type Conversion  +‟010‟ === 10  Number(„010‟) === 10  parseInt(„010‟, 10) === 10  10 + “” === “10”
14. Prototype  Array.prototype.forEach = function(){ … }  // only for forward compatible
15. Loop  for ( var I = 0, j = xx.length; i<j; i++){ … } // cache  var I = 0, j = xx.lenght;  for (;i<j; i++){ … } // hoisting  for ( var I in foo ){  if( foo.hasOwnProperty(i) ){ // required  console.log(i)  }  }
16. New Feature  Array.forEach() // use it when possible  getElementsByClassName()  querySlectorAll()
17. Lazy Definition  function lazyDef(){  if(condition1){  lazyDef = function(){ … };  }else if(condition2){  lazyDef = function(){ … };  }  return lazyDef();  }
18. Private Functions as Public Methods  var MYAPP = {};  MYAPP.dom = (function(){  var _setStyle = function(el, prop, value){  console.log(„setStyle‟);  };  return {  setStyle: _setStyle  };  })(); // MYAPP.dom.setStyle = otherFunc
19. Design Patterns  Singleton  Factory  Decorator  Observer  ……
20. Thank You!