JavaScript开发时的五个注意事项


Posted in Javascript onDecember 08, 2007

只在<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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
javascript 写类方式之十
Jul 05 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 #Javascript
javascript数组使用调用方法汇总
Dec 08 #Javascript
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 #Javascript
项目实践之javascript技巧
Dec 06 #Javascript
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 #Javascript
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 #Javascript
javascript 常用关键字列表集合
Dec 04 #Javascript
You might like
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
多引号嵌套的变量命名的问题
2014/05/09 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
vue实现登录功能
2020/12/31 Vue.js
利用Python实现网络测试的脚本分享
2017/05/26 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Python对象与引用的介绍
2019/01/24 Python
超简单的Python HTTP服务
2019/07/22 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
学校万圣节活动方案
2014/02/13 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
交通事故协议书范文
2014/10/23 职场文书
职工年度考核评语
2014/12/31 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python实现列表拼接和去重的三种方式
2021/07/02 Python
详解CSS中的特指度和层叠问题
2021/07/15 HTML / CSS
Python经常使用的一些内置函数
2022/04/11 Python
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL