您的位置:首页 > Web前端 > JavaScript

JavaScript代码优化实战之一:缓存变量,关键字过滤

2012-09-18 21:12 441 查看
  无意中看到某网站的一段JS代码:

function clearSearchText(){
var searchtext = document.getElementById("searchwordl").value
document.getElementById("searchwordl").value="";
}
function replaceALL(){
var replaceTxt = document.getElementById("searchwordl").value;
var relTxt = replaceTxt.replace(/^\s+|\s+$/g,"");
if(typeof(document.getElementById("searchwordl"))=="undefined"||relTxt==""){
alert("请输入检索条件");
document.getElementById("searchwordl").focus();
return false;
}
if(typeof(document.getElementById("searchwordl"))!="undefined"){
var searchwordl = document.getElementById('searchwordl').value;

var sig = 0;
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)
sig = 1;

searchwordl=searchwordl.replace("'","");
//searchwordl=searchwordl.replace(" ","");
searchwordl=searchwordl.replace("%","");
searchwordl=searchwordl.replace("#","");
searchwordl=searchwordl.replace("&","");
searchwordl=searchwordl.replace("*","");
searchwordl=searchwordl.replace("(","");
searchwordl=searchwordl.replace(")","");
searchwordl=searchwordl.replace("@","");
searchwordl=searchwordl.replace("`","");
searchwordl=searchwordl.replace("/","");
searchwordl=searchwordl.replace("\\","");
searchwordl=searchwordl.replace(",","");
searchwordl=searchwordl.replace(".","");
searchwordl=searchwordl.replace("=","");
searchwordl=searchwordl.replace("<","");
searchwordl=searchwordl.replace(">","");
if(searchwordl == '请输入搜索条件'){
alert("请输入搜索条件");
return false;
}
if(searchwordl == ''){
alert("请正确输入搜索条件");
return false;
}
if(sig == 1){
alert("请正确输入搜索条件");
return false;
}
document.getElementById('searchword').value=searchwordl;
return true;
//document.fmsearch.submit();
}
}


  场景是网页上有一个搜索框,输入框的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会更简洁。

  欢迎大家给出更好的优化方案。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: