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兼容标准的表格变色效果
Jun 28 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
详解JavaScript常量定义
Jan 03 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
javaScript实现滚动条事件详解
Mar 24 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
python 循环while和for in简单实例
2016/08/16 Python
Django视图和URL配置详解
2018/01/31 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
python 实现汉诺塔游戏
2020/11/28 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
PHP面试题集
2016/12/18 面试题
岗位聘任书范文
2014/03/29 职场文书
医院营销工作计划
2015/01/16 职场文书
经理岗位职责范本
2015/04/15 职场文书
外出学习心得体会范文
2016/01/18 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
python运算符之与用户交互
2022/04/13 Python