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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
关于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
超神学院:鹤熙已踏入神圣领域,实力不比凯莎弱
2020/03/02 国漫
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python和js交互调用的方法
2020/06/23 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
2013年员工自我评价范文
2013/12/27 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
铁路工务反思材料
2014/02/07 职场文书
财务工作失职检讨书
2014/11/21 职场文书
红色影片观后感
2015/06/18 职场文书
Python学习之包与模块详解
2022/03/19 Python