JavaScript开发时的五个注意事项_javascript技巧

只在<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(' ');

时间: 2024-10-02 07:01:07

JavaScript开发时的五个注意事项_javascript技巧的相关文章

JavaScript文本框脚本编写的注意事项_javascript技巧

在HTML中,有两种方式来表现文本框: 一种是使用input元素的单行文本,另一种是使用textarea的多行文本框. 使用input方式,必须添加type,设置为"text". size特性,可以指定文本框内能够显示的字符数. value属性可以设置文本框的初始值. maxlength特性则是用于指定文本框内可以接受的最大字符数. textarea的初始值则必须放在开始和结束标签之内. cols是文本框字符行数: rows是文本框字符列数: 另外,不能在HTML中给textarea指

现代 JavaScript 开发编程风格Idiomatic.js指南中文版_javascript技巧

你为项目所择风格都应为最高准则.作为一个描述放置于你的项目中,并链接到这个文档作为代码风格一致性.可读性和可维护性的保证. 一.空白 1.永远都不要混用空格和Tab.2.开始一个项目,在写代码之前,选择软缩进(空格)或者 Tab(作为缩进方式),并将其作为最高准则.a).为了可读, 我总是推荐在你的编辑中设计2个字母宽度的缩进 - 这等同于两个空格或者两个空格替代一个 Tab.3.如果你的编辑器支持,请总是打开 "显示不可见字符" 这个设置.好处是:a).保证一致性b).去掉行末的空格

javascript开发中因空格引发的错误_javascript技巧

废话不多说,先上代码给大家看看 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

JavaScript数据类型转换的注意事项_javascript技巧

1.字符串的不可变性  字符串定义了后,会一直占据内存空间,企鹅该处内存空间(栈)不可被重新赋值. 2.短路运算 ||.&& 二元运算符,返回参与运算的操作数的原值(原数据类型和原数据), 运算结束后,返回导致运算结束的那个操作数. 3.三元运算符 code1?code2:code3;   与if-else 不同: 返回code2或code3的值----code2,code3   都可以空的{}代替:       不能写break,continue. 4.NaN NaN !=NaN, 任何

PHP Header用于页面跳转时的几个注意事项_php技巧

前言 本文介绍的是在PHP中用header("location:test.php")进行跳转要注意以下几点,有助于解决一些新手经常遇到的问题 一.location和":"号间不能有空格,否则会出错. 二.在用header前不能有任何的输出. 三.header后的PHP代码还会被执行. 下面是和asp中重定向response.redirect的比较: 例1: response.redirect "../test.asp" header("

JavaScript事件学习小结(二)js事件处理程序_javascript技巧

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解_javascript技巧

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.很早就接触过闭包这个概念了,但是一直糊里糊涂的,没有能够弄明白JavaScript的闭包到底是什么,有什么用,今天在网上看到了一篇讲JavaScript闭包的文章(原文链接),讲得非常好,这下算是彻底明白了JavaScript的闭包到底是个神马东东以及闭包的用途了,在此写出来和大家分享一下,希望不理解JavaScript闭包的朋友们看了之后能够理解闭包!以下内容大部分是来自原文,我在原文的基础

JavaScript中的定时器之Item23的合理使用_javascript技巧

在javascritp中,有两个关于定时器的专用函数,它们是:  1.倒计定时器:timename=setTimeout("function();",delaytime);  2.循环定时器:timename=setInterval("function();",delaytime);  1.定时器概述 window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval.其中前者可以使一段代码在指定时间

Javascript笔记一 js以及json基础使用说明_javascript技巧

JavaScript中的代码只体现为一种形式,就是function. 注意:以上单词都是小写的,不要和Number, String, Object, Function等JavaScript内置函数混淆,JavaScript语言是区分大小写. typeof(null)返回object,但null并非object. JavaScript的代码就只有function一种形式,function就是函数的类型.函数的写法有"定义式"和"变量式". 定义式的函数语句会优先执行.