Sparta Yew

－Js方法名和变量串相同引发的问题

sparta-紫杉 10/10/14 11:18

一、背景

    处理某一个项目的“成本管理系统”的“成本录入”的问题中，需要有一个对列表中的成本业务进行“批量删除”的功能按钮。

    为了阻止用户误删除，通常的做法是通过页面的js来控制，当用户未对任何的成本业务进行选中时，会提示用户首先选中后删除。

    具体代码如下：

//提示用户是否删除，并检查用户是否已经选中待删除的业务。 
  function check(){
   var count = 0;
   var tonextIds = document.forms[0].tonextIds;

   if( tonextIds +"" == "undefined" || 
     ( tonextIds +"" != "undefined" && tonextIds == "") ) {
           tonextIds = document.forms[0].id ;
   }

   //判断待删除业务是否被选中
   if(tonextIds != null) {
    if(tonextIds.length != null ) {
     for(i = 0 ; i < tonextIds.length ; i ++ ) {
      if(tonextIds[i].checked == true) count++;
           }
       }else {
        if( tonextIds.checked == true ) count++;
       }
   } 

   //若待删除业务未选中，则阻止用户的删除操作。
   if( count == 0 ) {
    alert( "您未选中任何待删除的成本业务！\n\r请选中待删除的成本业务再进行“批删除”操作！" );
       return false;
   }

   //若用户取消删除，则阻止用户的删除操作。
   if( !confirm("业务删除后不能恢复，您确定要删除选中的业务吗？ ")){
    return false;
   }
  }

  
    代码比较简单。 通过“成本统计人员”进入后执行“批删除”，代码运行正常。 但是通过“成本核算人员”进入操作，却始终不能成功，脚本错误提示为“对象不支持此属性和方法”。

二、分析

    js的方法中通常若是下面的代码不正确，可能会影响到整个方法的运行，也通常会发生其他js方法不正确，会导致另外的js方法不能正常运行。
    首先从此处入手，进行分析和试验，切掉其中的若干代码，仅保留一个最普通的alert("msg");，仍然是“成本统计人员”能正常运行该方法代码，而“成本核算人员”不能正常执行该方法。

    问题出在哪里呢？ 解决过程似乎陷入了僵局，通过IE8的js调试功能，仅能够定位到相关的出错位置，但该位置是普通的HTML代码，根本没有错误的可能。

    还是使用老办法吧！ 将“成本统计人员”进入后能正常执行的页面源码文件、“成本核算人员”进入后不能正常执行的页面源码文件均拷贝下来分别放入两个文本文件中进行对比，找找其中的差距到底在哪里！

    除了下面的几行之外，两个文件没有任何区别！ 参见如下：

    1、“成本核算人员”进入后的页面源码文件（不能正常执行）：

    <input type="button" name="check" value="入  帐" class="ButtonQuery" onclick="isChecked('check');" />
    <!-- 增加删除按钮，以批处理各项成本业务。 sparta 10/10/14 10:43 -->
    <input type="submit" name="BatchDelete" value="批删除" onclick="return check();" class="ButtonQuery" />

    2、“成本核算人员”进入后的页面源码文件（能正常执行）：
   
    <input type="submit" name="new"   value="新  建"  class="ButtonQuery"/>
    <!-- 增加删除按钮，以批处理各项成本业务。 sparta 10/10/14 10:43 -->
    <input type="submit" name="BatchDelete" value="批删除" onclick="return check();" class="ButtonQuery" />

  呵呵，我相信，除了JS经验丰富的程序员，可能谁都会认为这里面没有基本没有什么区别，另外不会对这两套代码能否正常运行持反对态度。但似乎我们都错了，问题的确就出在那短短两行看似正常的代码里面。

三、结论

   还是找不出原因吧？ 大家不妨看看下面红色的部分，也许会得到一点点启发：
    <input type="button" name="check" value="入  帐" class="ButtonQuery" onclick="isChecked('check');" />
    <!-- 增加删除按钮，以批处理各项成本业务。 sparta 10/10/14 10:43 -->
    <input type="submit" name="BatchDelete" value="批删除" onclick="return check();" class="ButtonQuery" />

   呵呵，或许你已经猜到答案了，是的，的确，就是因为Js的方法名和其中一个Js的方法中的参数变量相同才导致我们花费了2个小时的时间寻找答案。
   于是我把check()的JS方法名修改为DeleteCheck()，然后再修改上述两行导致出错的代码为下面：
   <input type="button" name="check" value="入  帐" class="ButtonQuery" onclick="isChecked('check');" />
   <!-- 增加删除按钮，以批处理各项成本业务。 sparta 10/10/14 10:43 -->
   <input type="submit" name="BatchDelete" value="批删除" onclick="return DeleteCheck();" class="ButtonQuery" />

  当再次运行代码，分别通过“成本录入人员”和“成本核算人员”进入试验，屏幕上响亮的给出正确的结论，呵呵，我们成功了。

  对于这个问题的解决，不免生出一些感慨： JS的开放性、简单和易用性的确值得称赞，但是不允许方法名和方法内的变量串同名也的确令人震惊。
  这在Java和其他语言中是不会有这种问题，这是不是开放的有些过头了？ 或许只是JS的发明者独特的处理方式？ 有待于各位读者达人给出答案。