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图片处理示例代码
May 12 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
js实现省市级联效果分享
Aug 10 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
JavaScript实现省市区三级联动
Feb 13 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写杨辉三角实例代码
2011/07/17 PHP
javascript 循环调用示例介绍
2013/11/20 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
学习node.js 断言的使用详解
2019/03/18 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python之super的使用小结
2018/08/13 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
详解Python中is和==的区别
2019/03/21 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
如何用PHP实现邮件发送
2012/12/26 面试题
通信工程专业毕业生推荐信
2013/12/25 职场文书
学员自我鉴定
2014/03/19 职场文书
合伙协议书范本
2014/04/21 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
销售合作意向书范本
2015/05/08 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Python max函数中key的用法及原理解析
2021/06/26 Python
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL