JavaScript编程开发中的五个实用小技巧


Posted in Javascript onJuly 22, 2010

真是五个很quick的小提示:

只在<form>元素上使用submit事件
如果要在form中绑定事件处理程序时,应该只在<form>元素上绑定submit事件,而不是给提交按钮绑定click事件。
March:这个方式固然很好,但是,公司开发时使用了Web Flow,一个页面就一个大form,而里面可能有若干个提交按钮,所以不得不把部分事件处理程序绑定在了提交按钮的click事件上。

可点击的都应该是链接
不要给除锚元素(<a>)以外的元素绑定click事件。这一点对于键盘用户很重要,因为他们在仅通过键盘获取元素焦点时会遇到困难。
March:不过个人感觉锚元素还是应该只用作链接,而一些功能性的操作(比如Google Reader的Mark all as new),最好还是用<span>来标注,accessibility的问题可以通过快捷键等方式解决。这样做可以更好的还原HTML元素的语义。

简单的for循环优化
在你写一个for循环时,有个很简单的技巧能够提高性能。

for ( var i = 0; i < elements.length; ++i )

使用下面的语句代替上面的:
for ( var i = 0, j = elements.length; i < j; ++i )

这样可以把元素的个数(elements.length的值)储存在一个变量j中,这样就不必在每次循环时都计算一遍元素的个数。

用匿名函数来作为事件处理程序
尤其是对于短小的函数,创建一个匿名函数会比使用一个命名函数的引用更具可读性。

anchor.onclick = function() { map.goToPosition( home ); return false; }

March:在较复杂的JavaScript开发时还是使用命名函数效率更高。

使用Array.join代替字符串连接(concatenating strings)
在将很多字符串、变量等连接成一个很长的字符串时,将所有字符串和变量放入一个数组,然后用join方法将他们组成一个长字符串,这样无论从代码可读性还是从性能上都更胜于字符串连接。

var text = 'There are' + elements.length + 'members in the elements array.'; 
var text = ['There are', elements.length, 'members in the elements array.'].join(' ');
Javascript 相关文章推荐
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
关于javascript DOM事件模型的两件事
Jul 22 #Javascript
JavaScript 事件系统
Jul 22 #Javascript
(function($){...})(jQuery)的意思
Jul 22 #Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 #Javascript
一个简单的js动画效果代码
Jul 20 #Javascript
dess中一个简单的多路委托的实现
Jul 20 #Javascript
js 返回时间戳所对应的具体时间
Jul 20 #Javascript
You might like
PHP下几种删除目录的方法总结
2007/08/19 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
jQuery 1.0.2
2006/10/11 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
详解Vue组件之作用域插槽
2018/11/22 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Django model update的多种用法介绍
2020/03/28 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
解决python3输入的坑——input()
2020/12/05 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
任命书怎么写
2014/06/04 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
交通事故代理词范文
2015/05/23 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
2015中秋祝酒词
2015/08/12 职场文书
详解Python中的进程和线程
2021/06/23 Python
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android