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的發明者獨特的處理方式？ 有待于各位讀者達人給出答案。