编写更合理的 JavaScript 代码

时间：2013年7月27日 北京
演讲类型：学生演讲
讲者：廖晗 - 来自黎松计算机科技
主要内容：编写更合理的 JavaScript 代码

Transcript

1. 编写更合理的JS代码   黎松团队·∙廖晗  
2. 有多少人接受过JS培训？  
3. 演讲大纲   l  更合理的JS代码的实质   l  更合理的代码注释   l  更合理的函数传参模式   l  更合理的DOM   l  更合理的编码模式(好书推荐)  
4. 更合理的JS代码的实质  
5. 合理：合乎道理或事理   l 代码更规范   l 编写更合理   l 更易理解   l 利于开发  
6. 开发更合理的JS代码的意义   l 改善代码可读性   l 提高团队效率   l 锻炼严谨的思维   l 减少开发成本
7. 更合理的注释   l  精练，防止多义性   l  使用规范的注释模式和英文   l  勤更新   l  用来解释的内容：   l  生涩的代码(算法)   l  一段代码想要达到的效果   l  函数的用途  
8. 精练的注释   不精练的注释   //Selector  the  Elements   var  _find  =  window._find  =  function(  exp  ){          .......................   }   //Selector  the  Elements  by  GetElementById  &  getElementsByTagN  ....   var  _find  =  window._find  =  function(  exp  ){          .......................   }  
9. 注释  ！=  字幕   好的     //  find  [ID  =  A]   var  oA  =  document.getElementById('A');   不好的     /*Found  through  the  document.getElementByID*/   var  oA  =  document.getElementById('A');  
10. 更合理的函数传参模式   好的：     //  op  is  JOSN  data     function  Ajax(  op  ){          ......   }   不好的：     function  Ajax(  type,url,......  ){          ......   }  
11. 更合理的DOM   l 缓存DOM对象   l innerHTML而不是createElement   l 检索元素选择的方式   l 中间变量对于DOM操作的优化  
12. 缓存DOM对象   好的   var  oDoms  =  {              oAs  =  document.getElementsByTagName('a'),              oUserImage  =  document.getElementById('userImage')   }   oDoms.userImages.src=  'http://a.com/u.png';   不好的   document.getElementByID('userImage').src  =  'http://a.com/u.png';  
13. createElement?   好的   var  oA  =  document.getElementsByTagName('a')[0];   oA.innerHTML  +=  '<a  href="http://a.com">demo</a>'   不好的   var  oNewA  =  document.createElement('a');   var  oA  =  document.getElementsByTagName('a')[0];   oA.appendChild(oA);   原因：innerHTML属于静态操作  
14. 检索元素的方式   方式大全：   getElementsByTagName   getElementById   getElementsByClassName   getElementsByName   querySelector     选择方式：   就近原则，匹配范围最小    
15. 中间变量对DOM操作的优化   好的   for(var  j  =  0;j<30;j++){              var  tmp  =  j+'<br/>';              oA.innerHTML  +=  tmp;             }   不好的   for(var  j  =  0;j<30;j++){              oA.innerHTML  +=  j+'<br/>';;             }  
16. 为什么要使用模块化开发   l 便于管理   l 加快开发速度   l 减少错改代码的次数   l 利于构建大型项目   l 减少项目的复杂性
17. 更合理的编码规范（好书推荐）   l 《编写可维护化的JavaScript代码》               l 《编码匠艺》             l 《编写高质量的代码》         ￥40.00     ￥46.75     ￥36.80  
18. END