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 相关文章推荐
js验证表单大全
Nov 25 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
原生JavaScript实现换肤
Feb 19 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结合飞信 免费天气预报短信
2009/05/07 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python如何根据时间序列数据作图
2020/05/12 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
大学毕业典礼演讲稿
2014/09/09 职场文书
大二学生自我检讨书
2014/10/23 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python