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方法。

相关阅读  空间换时间,把递归的时间复杂度降低到O(2n)

  以上代码主要存在以下问题:

  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会更简洁。

  欢迎大家给出更好的优化方案。


AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年

AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年

本文来自一日成建站教程网https://www.yiricheng.cn/),为广大编程爱好者提供零基础快速搭建博客网站的方法,分享计算机网络、HTML、CSS、JavaScript、PHP、响应式设计以及Python自动化办公的博客文章,另有各类小工具、电子书、免费教程。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。