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 相关文章推荐
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
捕获未处理的Promise错误方法
Oct 13 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
基于Python实现文件大小输出
2016/01/11 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python实现mean-shift聚类算法
2020/06/10 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
Python 代码调试技巧示例代码
2020/08/11 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
职业技术学校毕业生推荐信
2013/12/03 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
三好生演讲稿
2014/09/12 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫