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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
如何在JS文件中获取Vue组件
Sep 16 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
php使用sql数据库 获取字段问题介绍
2013/08/12 PHP
php上传excel表格并获取数据
2017/04/27 PHP
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
python将ansible配置转为json格式实例代码
2017/05/15 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python看某个模块的版本方法
2018/10/16 Python
python中类的属性和方法介绍
2018/11/27 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
Collection和Collections的区别
2016/05/02 面试题
咖啡馆创业计划书
2014/01/26 职场文书
超市商业计划书
2014/05/04 职场文书
技校毕业生自荐书
2014/05/23 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android