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 相关文章推荐
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
Jun 22 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
VUE使用draggable实现组件拖拽
Apr 06 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
分享php邮件管理器源码
2016/01/06 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python调用C++程序的方法详解
2017/01/24 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
python颜色随机生成器的实例代码
2020/01/10 Python
信号生成及DFT的python实现方式
2020/02/25 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
零件设计自荐信范文
2013/11/27 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
工会工作先进事迹
2014/08/18 职场文书
小平小道观后感
2015/06/09 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫