zoukankan      html  css  js  c++  java
  • 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会更简洁。

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

  • 相关阅读:
    Leetcode Spiral Matrix
    Leetcode Sqrt(x)
    Leetcode Pow(x,n)
    Leetcode Rotate Image
    Leetcode Multiply Strings
    Leetcode Length of Last Word
    Topcoder SRM 626 DIV2 SumOfPower
    Topcoder SRM 626 DIV2 FixedDiceGameDiv2
    Leetcode Largest Rectangle in Histogram
    Leetcode Set Matrix Zeroes
  • 原文地址:https://www.cnblogs.com/jscode/p/2691486.html
Copyright © 2011-2022 走看看