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

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

转载于:https://www.cnblogs.com/jscode/archive/2012/09/18/2691486.html

JavaScript代码优化实战之一：缓存变量，关键字过滤相关推荐

字符串多模式精确匹配（脏字/敏感词汇/关键字过滤算法）——TTMP算法之实战F模式...
前面那么多篇文章都太抽象,这次来一个稍微实际一点的.F模式是我实际上选用的模式,对该模式我做了不少实际的测试,因此代码也算是比较稳定的.不过由于实际上为了得到该算法的效率,算法本身做了一些优化,对于初 ...
cocos脏话过滤_字符串多模式精确匹配（脏字/敏感词汇/关键字过滤算法）——TTMP算法之实战F模式...
前面那么多篇文章都太抽象,这次来一个稍微实际一点的.F模式是我实际上选用的模式,对该模式我做了不少实际的测试,因此代码也算是比较稳定的.不过由于实际上为了得到该算法的效率,算法本身做了一些优化,对于初 ...
14 个 JavaScript 代码优化建议
14 个 JavaScript 代码优化建议 1. 删除不使用的代码和功能程序包含越多的代码,给客户端传递的数据就越多.浏览器也需要更多的时间去解析和编译代码. 有时,代码里也许会包含完全未使用到的 ...
经典JavaScript正则表达式实战
来源:http://www.cainiao8.com/web/js_note/js_regular_expression_blueidea.html 目录 1. 正则表达式实战...1 2. 匹 ...
5.JavaScript代码优化
代码优化我们的网页由结构层,表现层和行为层三部分组成,而每一层对应的实现代码分别为HTML(负责描绘出内容的结构),CSS(负责"如何显示有关内容"),JavaScript(负责 ...
JavaScript基础实战知识点记录及个人理解2
JavaScript基础&实战知识点记录(26-45集) 第二十六集-运算符的优先级第二十七集-代码块第二十八.二十九.三十.三十一.三十二集-if语句练习1 练习2 练习3 第三十三. ...
《JavaScript编程实战》
<JavaScript编程实战> 基本信息原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
javascript函数、对象及变量、正则表达式（7.19）
tips: 1.javascript中"()"是用来调用函数的: 2.javascript中"."和"[]"访问对象的属性: 例如:obje ...
Javascript代码优化的8个知识点
本篇文章给大家分享了关Javascript代码优化的8点总结松耦合当修改一个组件而不需要更改其他组件时,就做到了松耦合 1.将JS从CSS中抽离:不要使用CSS表达式 HTML复制全屏 //不好的 ...

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

JavaScript代码优化实战之一：缓存变量，关键字过滤相关推荐

最新文章

热门文章