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 相关文章推荐
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
详解ES6中的let命令
Apr 05 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
JavaScript数组排序功能简单实现
May 14 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php的4种常见运行方式
2015/03/20 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP使用函数用法详解
2018/09/30 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
Python多线程爬虫简单示例
2016/03/04 Python
Python AES加密实例解析
2018/01/18 Python
Python线程同步的实现代码
2018/10/03 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
简述数据库的设计过程
2015/06/22 面试题
精彩的英文自荐信
2014/01/30 职场文书
《海底世界》教学反思
2014/04/16 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python