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利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
关于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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
PHP XML数据解析代码
2010/05/26 PHP
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
国际经济贸易专业推荐信
2013/11/06 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
房屋维修协议书范本
2014/09/25 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
公司酒会主持词
2015/07/02 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
python状态机transitions库详解
2021/06/02 Python
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python