JavaScript代碼最佳化實戰之一：緩衝變數，關鍵字過濾

　　無意中看到某網站的一段JS代碼：

 1 function clearSearchText(){ 2      var searchtext = document.getElementById("searchwordl").value 3      document.getElementById("searchwordl").value=""; 4 } 5 function replaceALL(){ 6     var replaceTxt = document.getElementById("searchwordl").value; 7     var relTxt = replaceTxt.replace(/^\s+|\s+$/g,""); 8     if(typeof(document.getElementById("searchwordl"))=="undefined"||relTxt==""){ 9         alert("請輸入檢索條件");10         document.getElementById("searchwordl").focus();11          return false;12     }13  if(typeof(document.getElementById("searchwordl"))!="undefined"){14   var searchwordl = document.getElementById('searchwordl').value;15 16   var sig = 0;17   if(searchwordl.indexOf("'") > -1 || searchwordl.indexOf("\"") > -1 || searchwordl.indexOf("%") > -1 || searchwordl.indexOf("#") > -1 || searchwordl.indexOf("&") > -1 || searchwordl.indexOf("*") > -1 || searchwordl.indexOf("(") > -1 || searchwordl.indexOf(")") > -1 || searchwordl.indexOf("@") > -1 || searchwordl.indexOf("`") > -1 || searchwordl.indexOf("/") > -1 || searchwordl.indexOf("\\") > -1 || searchwordl.indexOf(",") > -1 || searchwordl.indexOf(".") > -1 || searchwordl.indexOf("=") > -1 || searchwordl.indexOf("<") > -1 || searchwordl.indexOf(">") > -1)18   sig = 1;19 20   searchwordl=searchwordl.replace("'","");  21   //searchwordl=searchwordl.replace(" ","");22   searchwordl=searchwordl.replace("%","");23   searchwordl=searchwordl.replace("#","");24   searchwordl=searchwordl.replace("&","");25   searchwordl=searchwordl.replace("*","");26   searchwordl=searchwordl.replace("(","");27   searchwordl=searchwordl.replace(")","");28   searchwordl=searchwordl.replace("@","");29   searchwordl=searchwordl.replace("`","");30   searchwordl=searchwordl.replace("/","");31   searchwordl=searchwordl.replace("\\","");32   searchwordl=searchwordl.replace(",","");33   searchwordl=searchwordl.replace(".","");34   searchwordl=searchwordl.replace("=","");35   searchwordl=searchwordl.replace("<","");36   searchwordl=searchwordl.replace(">","");37   if(searchwordl == '請輸入搜尋條件'){38       alert("請輸入搜尋條件");39       return false;40   }41   if(searchwordl == ''){42       alert("請正確輸入搜尋條件");43       return false;44   }45   if(sig == 1){46       alert("請正確輸入搜尋條件");47       return false;48   }49   document.getElementById('searchword').value=searchwordl;50   return true;51   //document.fmsearch.submit();52   }53 }

　　情境是網頁上有一個搜尋方塊，輸入框的onfocus事件調用了clearSearchText方法，提交前調用了replaceALL方法。

　　以上代碼主要存在以下問題：

　　1、邏輯不對：onfocus事件直接把內容清空是不合理的。

　　2、常用到的變數沒有緩衝：多次用到了document.getElementById("searchwordl")

　　3、變數沒有集中聲明

　　4、JavaScript中的replace方法只替換一次，上面的代碼中原意應該是全部替換

　　5、代碼臃腫

　　由於最近正在看JavaScript代碼最佳化方面的書，所以一時手癢就對這段代碼進行了一個最佳化，現在分享出來，歡迎大家點評。

function clearSearchText(){    var search=document.getElementById("searchwordl");    search.value= search.value == search.defaultValue ? "":search.value;}function replaceALL(){    var search=document.getElementById("searchwordl"),        searchword = search.value.replace(/ /g,"");    if(searchword == ""){        alert("請輸入檢索條件");        search.focus();        return false;    }    searchword=searchword.replace(/['%#&\*\(\)@`\/\\,\.=<>]/g,"");    if(searchword == search.defaultValue || searchword == ''){        alert("請正確輸入搜尋條件");        search.focus();        return false;    }    search.value=searchword;    return true;}

　　另外，頁面中用了jQuery，所以上面的代碼如果用jQuery會更簡潔。

　　歡迎大家給出更好的最佳化方案。