JavaScript编程开发中的五个实用小技巧


Posted in Javascript onJuly 22, 2010

真是五个很quick的小提示:

只在<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的一个拖拽到指定区域内的效果
Sep 21 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
Javascript浅谈之this
Dec 17 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
浅谈React之状态(State)
Sep 19 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
关于javascript DOM事件模型的两件事
Jul 22 #Javascript
JavaScript 事件系统
Jul 22 #Javascript
(function($){...})(jQuery)的意思
Jul 22 #Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 #Javascript
一个简单的js动画效果代码
Jul 20 #Javascript
dess中一个简单的多路委托的实现
Jul 20 #Javascript
js 返回时间戳所对应的具体时间
Jul 20 #Javascript
You might like
Yii实现简单分页的方法
2016/04/29 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
JavaScript闭包和回调详解
2017/08/09 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
vue观察模式浅析
2018/09/25 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python编程实现归并排序
2017/04/14 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
前台接待员岗位职责
2014/01/02 职场文书
给学校的建议书
2014/03/12 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
软件项目实施计划书
2014/05/02 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
授权委托书
2014/07/31 职场文书
化学工程专业求职信
2014/08/10 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
用Python实现Newton插值法
2021/04/17 Python