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 20 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 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/09/28 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python测试模块doctest使用解析
2019/08/10 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
新法人代表任命书
2014/06/06 职场文书
质量整改报告范文
2014/11/08 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
高考升学宴主持词
2019/06/21 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
golang elasticsearch Client的使用详解
2021/05/05 Golang
Python中的变量与常量
2021/11/11 Python