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 数组详解
Oct 10 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
Angular8基础应用之表单及其验证
Aug 11 Javascript
node使用request请求的方法
Dec 20 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 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
一个取得文件扩展名的函数
2006/10/09 PHP
用session做客户验证时的注意事项
2006/10/09 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php精度计算的问题解析
2019/06/21 PHP
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
python中循环语句while用法实例
2015/05/16 Python
浅析python中的分片与截断序列
2016/08/09 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
详解用python写一个抽奖程序
2019/05/10 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
Linux如何压缩可执行文件
2014/03/27 面试题
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
思想政治自我鉴定
2013/10/06 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
田径运动会通讯稿
2014/09/13 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL