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.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
jquery 学习之二 属性相关
Nov 23 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
关于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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php伪静态之APACHE篇
2014/06/02 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
php如何获取文件的扩展名
2015/10/28 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
使用js获取地址栏中传递的值
2013/07/02 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
python web框架学习笔记
2016/05/03 Python
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python tkinter实现日期选择器
2021/02/22 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
顶岗实习计划书
2014/01/10 职场文书
保密普查工作实施方案
2014/02/25 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
会计求职简历自我评价
2015/03/10 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL