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 图片轮播(5张图片)
Dec 30 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
JS前端加密算法示例
Dec 22 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
vue实现员工信息录入功能
Jun 11 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
js jquery数组介绍
2012/07/15 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Python快速排序算法实例分析
2017/11/29 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python字典遍历操作实例小结
2019/03/05 Python
python实现整数的二进制循环移位
2019/03/08 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
国贸专业的职业规划书
2014/03/15 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
培训师岗位职责
2015/02/14 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python