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 相关文章推荐
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
jQuery实现滚动效果
Nov 17 jQuery
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
关于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编程中八种常见的文件操作方式
2006/11/19 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php中curl使用指南
2015/02/05 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JavaScript使用cookie
2007/02/02 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
Python制作词云的方法
2018/01/03 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
材料化学应届生求职信
2013/10/09 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
房产协议书范本
2014/10/18 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2015入党个人自传范文
2015/06/26 职场文书