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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
js实现多图左右切换功能
Aug 04 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
详解vue表单——小白速看
Apr 08 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
JavaScript控制台的更多功能
Apr 28 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与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python实现多人聊天室
2020/03/31 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python使用正则筛选信用卡
2019/01/27 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
5行Python代码实现图像分割的步骤详解
2020/05/25 Python
Python能做什么
2020/06/02 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
小班下学期评语
2014/05/04 职场文书
家长会欢迎标语
2014/06/24 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2014年团支书工作总结
2014/11/14 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
慰问信格式规范
2015/03/23 职场文书
Docker官方工具docker-registry案例演示
2022/04/13 Servers