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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/409545.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html.parser python_python模块之HTMLParser

HTMLParser是python用来解析html的模块。它可以分析出html里面的标签、数据等等&#xff0c;是一种处理html的简便途径。 HTMLParser采用的是一种事件驱动的模式&#xff0c;当HTMLParser找到一个特定的标记时&#xff0c;它会去调用一个用户定义的函数&#xff0c;以此来通知程…

php 5.4 aws,使用 Amazon EC2 管理 AWS SDK for PHP 实例 - 适用于 PHP 的 AWS 开发工具包

AWS 文档中描述的 AWS 服务或功能可能因区域而异。要查看适用于中国区域的差异&#xff0c;请参阅中国的 AWS 服务入门。本文属于机器翻译版本。若本译文内容与英语原文存在差异&#xff0c;则一律以英文原文为准。使用 Amazon EC2 管理 AWS SDK for PHP 实例以下示例演示如何&…

python图片分类毕业设计成果报告书_毕业设计成果报告书模板.doc

毕业设计成果报告书成 果&#xff1a;姓 名&#xff1a;学 号&#xff1a;专 业&#xff1a;区 队&#xff1a;指导老师&#xff1a;二〇XX年X月目  录TOC \o "1-3" \h \z \u HYPERLINK \l "_Toc432664597" 一、选题背景 PAGEREF _Toc432664597 \h 1HYPE…

常用正则表达式例子

1。^\d$  //匹配非负整数&#xff08;正整数 0&#xff09; 2。^[0-9]*[1-9][0-9]*$  //匹配正整数 3。^((-\d)|(0))$  //匹配非正整数&#xff08;负整数 0&#xff09; 4。^-[0-9]*[1-9][0-9]*$  //匹配负整数 5。^-?\d$    //匹配整数 6。^\d(\.\d)?$  //…

msf生成php,使用msfpayload生成后门(asp,aspx,php,jsp,exe)等

msfpayload与msfencode参数说明执行msfpayload -h查看都有哪些参数执行msfencode -h查看都有哪些参数生成backdoor类型可以生成asp、aspx、php、jsp、war、exe等多种类型,下面介绍的使用方法就不一一测试了.msfpayload生成linux backdoor目标机器运行linux2,本机监听下端口,使用…

概括ADO.NET数据库连接的所有形式(基础)

概括ADO.NET数据库连接的所有形式(基础&#xff09; 可能大家进来会喷笔者&#xff0c;这么基础的知识还放在首页。那么笔者就要问问大家了&#xff0c;你可能熟悉其中部分数据库读取的形式&#xff0c;但是熟悉全部的估计很少&#xff0c;或者你完全忘记了&#xff0c;因为这些…

python 进程池不足_python 进程池pool简单使用

平常会经常用到多进程&#xff0c;可以用进程池pool来进行自动控制进程&#xff0c;下面介绍一下pool的简单使用。需要主动是&#xff0c;在Windows上要想使用进程模块&#xff0c;就必须把有关进程的代码写if __name__ ‘__main__’ :语句的下面&#xff0c;才能正常使用Wind…

php opendir 不能用,PHP opendir() 函数

打开一个目录&#xff0c;读取它的内容&#xff0c;然后关闭&#xff1a;$dir "/images/";// Open a directory, and read its contentsif (is_dir($dir)){if ($dh opendir($dir)){while (($file readdir($dh)) ! false){echo "filename:" . $file . &q…

程序集

程序集 在C#中&#xff0c;我们要使用反射&#xff0c;主要有三个方面&#xff1a; 第一&#xff0c;反射程序集&#xff0c;模块&#xff0c;类的成员以及成员的一些信息&#xff1b; 第二&#xff0c;接下来就是动态调用类的成员方法&#xff1b; 第三个方面就动态产生程序集…

从像素坐标到相机坐标_【视觉知识】机器视觉几何坐标概论

作者&#xff1a;林青春来源&#xff1a;知乎一、机器视觉几何坐标概论机器视觉系统有三大坐标系&#xff0c;分别是&#xff1a;1、世界坐标系&#xff0c;2、摄像机坐标系&#xff0c;3、图像(像素)坐标系。1、世界坐标系世界坐标系(Xw&#xff0c;Yw&#xff0c;Zw)是目标物…

php 对象 数量,php – Symfony2 / Doctrine如何在实体中存储相关对象的数量

我已经设置了一个包含测试对象的包,该对象包含许多testQuestion对象,每个对象都是一个问题和给定的答案(如果没有答案则为0).从树枝上我希望能够从测试对象中获取信息,说明有多少问题以及已经回答了多少问题.我创建了一个查询来将其从数据库中拉出来,在测试实体中我创建了2个新…

GNU make manual 翻译( 一百六十)

继续翻译 The only restriction on this sort of use of nested variablereferences is that they cannot specify part of the name of a functionto be called. This is because the test for a recognized function nameis done before the expansion of nested references.…

vb如何嵌套chrome_译丨如何为开源软件做出贡献

原文&#xff1a;How to Contribute to Open Source Software作者&#xff1a;Matt Eland译者&#xff1a;博轩为保证文章的可读性&#xff0c;本文采用意译&#xff0c;转载请保留原文链接前段时间参加了2020年1月11日Node party线下分享&#xff0c;justjavac 大佬分享的主题…

反转一个单链表,分别以迭代和递归的形式来实现

迭代法&#xff1a; 1 // 反转单链表.cpp : 定义控制台应用程序的入口点。2 3 #include "stdafx.h"4 #include <stdlib.h>5 6 typedef struct node7 {8 int data;9 struct node *next; 10 }linknode,*linklist; 11 12 linknode *reverse(linknode *he…