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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
PHP用户指南-cookies部分
2006/10/09 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php中使用GD库做验证码
2016/03/31 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
javascript 简练的几个函数
2009/08/29 Javascript
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
在python中画正态分布图像的实例
2019/07/08 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
一道SQL面试题
2012/12/31 面试题
业绩考核岗位职责
2014/02/01 职场文书
工作评语大全
2014/04/26 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
重阳节活动总结
2014/08/27 职场文书
酒店温馨提示语
2015/07/14 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers