無意中看到某網(wǎng)站的一段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 }

　　場景是網(wǎng)頁上有一個搜索框，輸入框的onfocus事件調(diào)用了clearSearchText方法，提交前調(diào)用了replaceALL方法。

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

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

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

　　3、變量沒有集中聲明

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

　　5、代碼臃腫

　　由于最近正在看JavaScript代碼優(yōu)化方面的書，所以一時手癢就對這段代碼進(jìn)行了一個優(yōu)化，現(xiàn)在分享出來，歡迎大家點評。

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會更簡潔。

　　歡迎大家給出更好的優(yōu)化方案。

轉(zhuǎn)載于:https://www.cnblogs.com/jscode/archive/2012/09/18/2691486.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript代码优化实战之一：缓存变量，关键字过滤的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。