JavaScript代码优化实战之一:缓存变量,关键字过滤
2012-09-18 21:12
441 查看
无意中看到某网站的一段JS代码:
场景是网页上有一个搜索框,输入框的onfocus事件调用了clearSearchText方法,提交前调用了replaceALL方法。
以上代码主要存在以下问题:
1、逻辑不对:onfocus事件直接把内容清空是不合理的。
2、常用到的变量没有缓存:多次用到了document.getElementById("searchwordl")
3、变量没有集中声明
4、JavaScript中的replace方法只替换一次,上面的代码中原意应该是全部替换
5、代码臃肿
由于最近正在看JavaScript代码优化方面的书,所以一时手痒就对这段代码进行了一个优化,现在分享出来,欢迎大家点评。
另外,页面中用了jQuery,所以上面的代码如果用jQuery会更简洁。
欢迎大家给出更好的优化方案。
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会更简洁。
欢迎大家给出更好的优化方案。
相关文章推荐
- C++中有关volatile关键字的作用--阻止编译器将其变量优化缓存到寄存器(和线程相关)(转自百度)
- Javascript高级程序设计——语法、关键字、保留字、变量、数据类型
- 理解 JavaScript 的 this 关键字(代码)
- OutputCache缓存优化asp.net代码 提高网页性能
- JavaScript 代码性能优化总结
- JavaScript声明变量时为什么要加var关键字
- JavaScript “跑马灯”抽奖活动代码解析与优化(二)
- 第43讲:Scala中类型变量Bounds代码实战及其在Spark中的应用源码解析
- PHP代码优化 成员变量获取速度对比
- 调试Javascript代码(浏览器F12及VS中debugger关键字)
- [编程技巧] 巧用CPU缓存优化代码:数组 vs. 链表
- Java语言基础(关键字、标识符、注释、常量与变量、进制、数据类型、类型转换、代码示例)
- 对于新上线的javascript与客户端缓存存在冲突,到时客户端执行的是老代码的问题解决
- 43.Scala中类型变量Bounds代码实战及其在Spark中的应用源码解析
- javascript优化--09模式(代码复用)02
- 【javascript】js中,巧妙运用 && 和 || 优化代码
- v8 引擎与javascript代码优化
- javascript 变量作用域 代码分析
- asp.net mvc4 使用 System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )
- javascript 关键字高亮显示实现代码