[关闭]
@hotlp 2017-02-27T08:26:04.000000Z 字数 3961 阅读 839

js书写小技巧

未分类

加华PC端的代码比较浅的审查了一下，发现了一些问题，顺便说一下。

1.注释问题

去掉无用的注释，写有用的注释，可以用jsDoc的方式，详见jsDoc
idea中只要输入 /** 在按回车就可以了，自动的补充变量等信息。

另外，console.log 都要去掉！！

2.公用选择器提取

jq选择器的性能

ID > Tag > Class
ID 选择器是速度最快的，这主要是因为它使用 JavaScript 的内置函数 getElementById()；
其次是类型选择器，因为它使用 JavaScript 的内置函数 getElementsByTag()；
速度最慢的是 Class 选择器，其需要通过解析 HTML 文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。

选择器性能优化建议

尽量使用 ID 选择器
少直接使用 Class 选择器，尽量结合 Tag 使用，如 input.myclass
多用父子关系，少用嵌套关系
缓存 jQuery 对象
链式调用

性能分析
1 > 2 > 3 > 4 > 5 > 6

  1. var $parent = $('#parent')
  3. $parent.find('.child')       //   1  
  4. $('.child', $parent)         //   2  
  5. $('.child', $('#parent'))    //   3  
  6. $parent.children('.child')   //   4  
  7. $('#parent > .child')        //   5  
  8. $('#parent .child')          //   6
  1. 这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快。
  2. 给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成，这会导致一定的性能损失。它比最快的形式慢了内部会将这条语句转成('#parent').find('.child')，比最快的形式慢了23%。
  3. 这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%
  4. jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%。
  5. 这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。

现在的代码里通篇的$('body')或者其他的公用选择器，完全可以提出来。

3函数的提取

当一段代码出现了两次时，他就应该被提取成一个函数了~

4分号，逗号问题

开头是 括号，方括号，正则开头的斜杠，加号，减号 时，如果这行代码之前没有分号是会报错的，当然还有return后分号的字段补全。其他情况分号完全可以不加。
但是，我们要按照jsLint的规范来执行——————加！
idea也有个提示的功能，缺少分号逗号时（其实是有不合理，可优化的地方时）会有个黄色的提示，写完代码后，自己过一遍，该加的该调的都调整一下就可以了~

5.统一

编码规范的愿景：不管有多少人共同参与同一项目，每一行代码都像是同一个人编写的。
PC端是由5个人一起实现完成的，所以统一的规范尤为重要。

比如，js里你把数据整成了这样：

  1. var itemData = {
  2.                 vars: vars,
  3.                 xData: data.data.ecMemberIdCardAuth,
  4.                 cardNo:data.data.ecMemberIdCardAuth.cardNo,
  5.                 name:data.data.ecMemberIdCardAuth.name,
  6.                 frontImg:data.data.ecMemberIdCardAuth.frontImg,
  7.                 inverseImg:data.data.ecMemberIdCardAuth.inverseImg,
  8.                 status: data.data.ecMemberIdCardAuth.status
  9.             };

模板里是这样：

  1. <%=cardNo%>

那么，改bug的时候看到这么一行，还需要去js里看看cardNo是什么
甚至还有，js里已经费劲整成那样了，模板里还不用。。。。

  1. <%=xData.cardNo%>

模板里写代码是不会缩进的，比如：

  1. <%if(xData.orderStatus == 30){%>
  2. <a href="<%=vars.clientRoot%>/mbr/order_logi_info.html?id=<%=xData.id%>" class="main_c">查看物流</a>
  3. <a class="main_c getGood" href="javascript:;" data-id="<%=xData.id%>">确认收货</a>
  4. <%}else if(xData.orderStatus == 20){%>
  5. <a class="main_c alertSend" href="javascript:;" data-id="<%=xData.id%>">提醒发货</a>
  6. <%}else if(xData.orderStatus == 0){%>
  7. <a href="javascript:;" class="main_c cancelOrder" data-id="<%=xData.id%>">取消订单</a>
  8. <a href="<%=vars.clientRoot%>/mbr/order_pay.html?ordersNoStr=<%=xData.no%>," class="main_c">去付款</a>
  9. <%}else if(xData.orderStatus == 40){%>
  10. <%if(isCommented){%>
  11. <a class="main_c">已评价</a>
  12. <%}else{%>
  13. <a class="main_c" href="<%=vars.clientRoot%>/mbr/order_comment.html?id=<%=xData.id%>">去评价</a>
  14. <%}%>
  16. <%}%>

看的头都大了。。。如果在写的时候就整理好：

  1. <%if(xData.orderStatus == 30){%>
  2.     <a href="<%=vars.clientRoot%>/mbr/order_logi_info.html?id=<%=xData.id%>" class="main_c">查看物流</a>
  3.     <a class="main_c getGood" href="javascript:;" data-id="<%=xData.id%>">确认收货</a>
  4. <%}else if(xData.orderStatus == 20){%>
  5.     <a class="main_c alertSend" href="javascript:;" data-id="<%=xData.id%>">提醒发货</a>
  6. <%}else if(xData.orderStatus == 0){%>
  7.     <a href="javascript:;" class="main_c cancelOrder" data-id="<%=xData.id%>">取消订单</a>
  8.     <a href="<%=vars.clientRoot%>/mbr/order_pay.html?ordersNoStr=<%=xData.no%>," class="main_c">去付款</a>
  9. <%}else if(xData.orderStatus == 40){%>
  10.     <%if(isCommented){%>
  11.         <a class="main_c">已评价</a>
  12.     <%}else{%>
  13.         <a class="main_c" href="<%=vars.clientRoot%>/mbr/order_comment.html?id=<%=xData.id%>">去评价</a>
  14.     <%}%>
  15. <%}%>

还有：

  1. <p class="goods_price el">
  2.     <span>￥</span>
  3.     <%=moneyFormat(xData.minPrice)%>
  4. </p>

同一句话，全是文字时，不要换行，换行会出现2~3个空格










其他

平时用不大到的try catch：

  1. try {  
  2.     //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行    
  3.     //也可以用throw 抛出一个异常 0,错误号  'error',描述
  4.     //  throw new Error(0,"error") 
  5. }  
  6. catch (e) {  
  7.   // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。  
  8.   //e是一个局部变量，用来指向Error对象或者其他抛出的对象  
  9. }  
  10. finally {  
  11.   //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。  
  12.  }

try…catch…finally…语法中除了try以外catch和finally都是可选的（两者必须要有一个）
e是一个Error对象，具有下面一些主要属性：

1.description: 错误描述 (仅IE可用).
2.fileName: 出错的文件名 (仅Mozilla可用).
3.lineNumber: 出错的行数 (仅Mozilla可用).
4.message: 错误信息 (在IE下同description)
5.name: 错误类型.
6.number: 错误代码 (仅IE可用).
7.stack: 像Java中的Stack Trace一样的错误堆栈信息 (仅Mozilla可用).

PS:没事多翻翻之前的培训文档，这样就不会犯低级的错误，被审查代码的时候都提心吊胆的说。。。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注