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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 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
PHP新手上路(三)
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
php读取csc文件并输出
2015/05/21 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python错误处理操作示例
2018/07/18 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
django2笔记之路由path语法的实现
2019/07/17 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
英国最大的百货公司:Harrods
2016/08/18 全球购物
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
mysql脏页是什么
2021/07/26 MySQL