1.最近在写js代码完成一个前段DOM操作的函数时，自己错误的使用了if..else..控制体。为什么是错误的呢？看看我的

代码你就明白了：

 1  document.getElementsByClassName('eButton')[0].οnclick=function(){
 2    var checked=document.getElementsByClassName('checked');
 3      var eButton=document.getElementsByClassName('eButton')[0];
 4    if(checked.length==0){
 5     alert('请选择要编辑的联系人！');
 6      }else{
 7          if(checked.length >2){
 8                 alert('每次编辑只能选择一条记录');
 9          }else{
10                 if(checked[0].childNodes[0].id=='check-all'){
11                     var email=checked[1].parentNode.nextElementSibling.nextElementSibling.innerHTML;
12                     var name=checked[1].parentNode.nextElementSibling.innerHTML;
13                     document.getElementsByClassName('edit_contact_name')[0].value=name;
14                     document.getElementsByClassName('edit_contact_email')[0].value=email;
15                     var group=checked[1].parentNode.nextElementSibling.nextElementSibling.nextElementSibling
16                     if(group.innerHTML !="default"){
17                         var group_id=group.getAttribute('group_id')
18                         document.getElementsByClassName('edit_contact_group_name')[0].value=id;
19                     }
20                     $('#edit_contact').modal();
21                 }else{
22                     if(checked.length ==2){
23                         alert('每次编辑只能选择一条记录');
24                     }else{
25                         var email=checked[0].parentNode.nextElementSibling.nextElementSibling.innerHTML;
26                         var name=checked[0].parentNode.nextElementSibling.innerHTML;
27                         document.getElementsByClassName('edit_contact_name')[0].value=name;
28                         document.getElementsByClassName('edit_contact_email')[0].value=email;
29                         var group=checked[0].parentNode.nextElementSibling.nextElementSibling.nextElementSibling
30                         if(group.innerHTML !="default"){
31                             var group_id=group.getAttribute('group_id')
32                             document.getElementsByClassName('edit_contact_group_name')[0].value=id;
33                         }
34                         $('#edit_contact').modal();
35                     }
36                 }
37        }
38    }
39     };

哈哈，看到自己写的这些代码，突然感觉这个函数一定很厉害。整个函数被if..else..搞得乱七八糟的，开始思考为什么当时要用if..else

，其实当时只是考虑到这个逻辑中有大概三四种不同的条件，要执行三四种运算，而且每次只能执行一种情况（执行完就到函数结尾），这些就是程序的执行流程。有了这个流程，自己开始考虑怎么把代码改改，改的一目了然，改的易于维护。这个时候自己自然而言的想到了"return"这个关键字，使用”return“后就有了下面的代码：

document.getElementsByClassName('eButton')[0].οnclick=function(){var checked=document.getElementsByClassName('checked');var eButton=document.getElementsByClassName('eButton')[0];if(checked.length==0){alert('请选择要编辑的联系人！');return;}if(checked.length ==1){var email=checked[0].parentNode.nextElementSibling.nextElementSibling.innerHTML;var name=checked[0].parentNode.nextElementSibling.innerHTML;document.getElementsByClassName('edit_contact_name')[0].value=name;document.getElementsByClassName('edit_contact_email')[0].value=email;var group=checked[0].parentNode.nextElementSibling.nextElementSibling.nextElementSiblingif(group.innerHTML !="default"){var group_id=group.getAttribute('group_id')document.getElementsByClassName('edit_contact_group_name')[0].value=id;}$('#edit_contact').modal();return;}if(checked.length ==2){if(checked[0].childNodes[0].id=='check-all'){var email=checked[1].parentNode.nextElementSibling.nextElementSibling.innerHTML;var name=checked[1].parentNode.nextElementSibling.innerHTML;document.getElementsByClassName('edit_contact_name')[0].value=name;document.getElementsByClassName('edit_contact_email')[0].value=email;var group=checked[1].parentNode.nextElementSibling.nextElementSibling.nextElementSiblingif(group.innerHTML !="default"){var group_id=group.getAttribute('group_id')document.getElementsByClassName('edit_contact_group_name')[0].value=id;}$('#edit_contact').modal();return;}alert('每次编辑只能选择一条记录');return;}if(checked.length >2){alert('每次编辑只能选择一条记录');}
};

下面这些条件罗列起来代码就清晰多了：

1.checked.length ==0

2.checked.length ==1

3.checked.length ==2

4.checked.length > 2

接下来把重复的代码封装到函数中（去除重复）得到代码：

function get_edit_modal_content(node_num,checked){var email=checked[node_num].parentNode.nextElementSibling.nextElementSibling.innerHTML;var name=checked[node_num].parentNode.nextElementSibling.innerHTML;var contact_id=checked[node_num].parentNode.nextElementSibling.getAttribute('contact_id')var regular_name=/[\u4E00-\u9FA5\uF900-\uFA2D\w]*/;name=regular_name.exec(name)[0];document.getElementsByClassName('edit_contact_id')[0].value=contact_id;document.getElementsByClassName('edit_contact_name')[0].value=name;document.getElementsByClassName('edit_contact_email')[0].value=email;var group=checked[node_num].parentNode.nextElementSibling.nextElementSibling.nextElementSiblingif(group.innerHTML !="default"){var group_id=group.getAttribute('group_id')document.getElementsByClassName('edit_contact_group_name')[0].value=group_id;}}document.getElementsByClassName('eButton')[0].οnclick=function(){var checked=document.getElementsByClassName('checked');if(checked.length==0){alert('请选择要编辑的联系人！');return;}if(checked.length==1){get_edit_modal_content(0,checked);$('#edit_contact').modal();return;}if(checked.length==2){if(checked[0].childNodes[0].id=='check-all'){get_edit_modal_content(1,checked);$('#edit_contact').modal();return;}alert('每次编辑只能选择一条记录');return;}if(checked.length >2){alert('每次编辑只能选择一条记录');return;}};

最终代码变得简洁易于维护了，看着也赏心悦目了，嘎嘎.......

转载于:https://www.cnblogs.com/haohaodehao/p/6026667.html

if...else..的错误用法相关推荐

  1. 8 种常见的SQL错误用法

    点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | db匠 来源 | http://yq.aliy ...

  2. select into from 用法_年轻同事不讲武德，直接怼上MySQL常见SQL的七大错误用法

    今天来分享几个MySQL常见的SQL错误(不当)用法.我们在作为一个初学者时,很有可能自己在写SQL时也没有注意到这些问题,导致写出来的SQL语句效率低下,所以我们也可以自省自检一下. 常见SQL错误 ...

  3. 你知道这 8 种 SQL 错误用法吗？

    点击上方"朱小厮的博客",选择"设为星标" 后台回复"书",获取 来源:r6d.cn/J2bw 简介 MySQL在2016年仍然保持强劲的数 ...

  4. 数据库优化：8 种常见的SQL错误用法

    作者 | db匠 来源 | http://yq.aliyun.com/articles/72501 前言 MySQL在2016年仍然保持强劲的数据库流行度增长趋势.越来越多的客户将自己的应用建立在My ...

  5. 避免常见的6种HTML5错误用法,如何避免常见的6种HTML5错误用法

    一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于 --具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样 ...

  6. 英语常见介词错误用法，你有犯过吗？

    英语常见介词错误用法,你有犯过吗? 1:错:come to here. 对:come here. 过来. here ,there,home之类的副词,前面不用介词in ,at,(但可以加from,比如 ...

  7. Java 多线程 —— 死锁与锁的错误用法

    引言 死锁状态的大致情况是:Thread_1在获得A对象的锁后,紧接着去请求B对象的锁 ,Thread_2在获得了B对象的锁后,紧接着又去请求A对象的锁,如下图: 一.模拟一个死锁 public cl ...

  8. 盘点 8 种最坑的 SQL 错误用法

    今天为大家搜集了几类SQL错误用法,纯纯纯纯干货,来了! 1.LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方.比如对于下面简单的语句,一般 DBA 想到的办法是在 typ ...

  9. 使用Redis作为分布式锁的错误用法

    前言 这段时间看到挺多人使用redis作为分布式锁来进行资源的控制,但是这种写法有挺多问题的,所以才特意写一篇文章让大家讨论一下. 锁的特性 安全性:当一个资源被占用后,其他线程不能占用 容错性:当一 ...

  10. MySQL 性能优化：8 种常见 SQL 错误用法！

    声明:转载自 MySQL 性能优化:8 种常见 SQL 错误用法! 1.LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方.比如对于下面简单的语句,一般 DBA 想到的办法是 ...

最新文章

  1. benchmark mysql_程序员的MySQL手册(二): 监控与benchmark
  2. atitit.设计模式（1）--—职责链模式(chain of responsibility)最佳实践O7 日期转换
  3. boost::iostreams模块实现具有64位大文件偏移量的测试程序
  4. 使用 plsql 时的配置信息（连远程数据库服务器 到 在本机安装 oracle ）
  5. Android之TrafficStats实现流量实时监测
  6. APIGEE：用于API代理的CI / CD管道
  7. python实现抢劵_用Python实现微信自动化抢红包，再也不用担心抢不到红包了
  8. mysql索引的增删_mysql索引的增删改查怎么实现？
  9. geoTools学习笔记001---(简介)
  10. 小程序入门学习09--云开发02
  11. 剑指offer——25.合并两个排序的链表
  12. 万智牌天使恩典oracle,#诡局#诡局机制
  13. DenseNet介绍
  14. Python爬虫反爬方法
  15. android开发者模式调试程序,Android用开发者模式进行调试时出现的问题及解决方案...
  16. vue 支付宝支付
  17. 简历中使用STAR法则
  18. SAP的物料编码分析
  19. 查看服务器总的物理内存
  20. java中接口学习总结

热门文章

  1. [Head First Java] - Swing做一个简单的客户端
  2. javascript --- 从数组中,找出比给定元素大一丁点的元素
  3. ES6-10 super、4种遍历方式、原型、symbol遍历
  4. python每天1道面试题(3)--字符串组合
  5. (五)：C++分布式实时应用框架——微服务架构的演进
  6. input和raw_input
  7. SQL Server安全（6/11）：执行上下文与代码签名（Execution Context and Code Signing）
  8. 计算机应用技术的创新
  9. Spring+Spring Security+JSTL实现的表单登陆的例子
  10. “捆绑”住用户，需要优秀的产品（经验分享）