【经验总结】编写JavaScript代码时应遵循的14条规律

本文讲述了编写JavaScript代码时应遵循的14条规律。分享给大家供大家参考，具体如下：

1. 总是使用 ‘var'

在javascript中，变量不是全局范围的就是函数范围的，使用”var”关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function-level）的变量，需总是前置”var”关键词，下面的例子将强调不这样做潜在的问题。

不使用 Var 造成的问题

var i=0; // This is good - creates a global variable
function test() {
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
test();
alert(i); // The global variable i is now 10!

因为变量函数中变量 i 并没有使用 var 使其成为函数级的变量，在这个例子中它引用了全局变量。总是使用 var 来声明全局变量是一个很多的做法，但至关重要的一点是使用 var 定义一个函数范围的变量。下面这两个方法在功能上是相同的：

正确的函数

function test() {
var i=0;
for (i=0;i<10; i++) {
alert("Hello World!");
}
}

正确的函数

function test() {
for (var i=0; i<10; i++) {
alert("Hello World!");
}
}

2. 特性检测而非浏览器检测

一些代码是写来发现浏览器版本并基于用户正使用的客户端的对其执行不同行为。这个，总的来说，是一个非常糟的实践。更好的方法是使用特性检测，在使 用一个老浏览器可能不支持的高级的特性之前，首先检测（浏览器的）是否有这个功能或特性，然后使用它。这单独检测浏览器版本来得更好，即使你知道它的性 能。你可以在 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html找到一个深入讨论这个问题的文章。

例子：

if (document.getElementById) {
var element = document.getElementById('MyId');
} else {
alert('Your browser lacks the capabilities required to run this script!');
}

3. 使用方括号记法

当访问由执行时决定或者包括要不能用”.”号访问的对象属性，使用方括号记法。如果你不是一个经验丰富的Javascript程序员，总是使用方括号是一个不错的做法

对象的属性由两种固定的方法来访问：”.”记法和”[ ]“方括号记法：

“.”号记法：

MyObject.property

“[ ]“方括号记法：

MyObject["property"]

使用”.”号，属性名是硬代码，不能在执行时改变。使用”[ ]“方括号，属性名是一个通过计算属性名而来的字符串。字符串要以是硬代码，也可能是变量，甚至可以是一个调回一个字母串值的函数。 如果一个属性名在执行产生，方括号是必须，如果你有 “value1″, “value2″, 和 “value3″这样的属性，并且想利用变量 i=2来访问

这个可以运行：

MyObject["value"+i]

这个不可以：

MyObject.value+i

并且在某些服务器端环境（PHP、Struts等）下，Form 表单被附加了 [ ] 号来表示 Form 表单在服务器端必须被当作数组来对待。如此，用”.”号来引用一个包含 [ ] 号的字段将不会执行，因为 [ ] 是引用一个 Javascript 数组的语法。所以，[ ] 号记法是必须的：

这个可以运行：

formref.elements["name[]"]

这个不可以：

formref.elements.name[]

推荐使用”[ ]“方括号记法是说当其需要时（明显地）总是使用它。当不是严格需要使用它的时候，它是一个私人的偏好和习惯。一个好的经验原则是，使用”.”号记法访问标准的对象属性，使用”[ ]“方括号记法访问由页面定义的对象属性。这样，document["getElementById"]() 是一个完美可行的”[ ]“方括号记法用法，但 document.getElementById() 在语法上是首选，因为 getElementById 是一个 DOM 规范中定义的一个标准文档对象属性。混合使用这两个记法使哪个是标准对象属性，哪个属性名是由上下文所定义的，在代码中显得清晰明了：

document.forms["myformname"].elements["myinput"].value

这里，forms 是 document 的一个标准属性，而表单名 myformname 则是由页面所定义的。同时，elements 和 value 属性都是由规范所定义的标准属性。而 myinput 则是由页面所定义的。这页是句法让人非常容易理解（代码的内容），是一个推荐遵循的习惯用法，但不是严格原则。

4. 避免 ‘eval'

在Javascript中，eval()功能是一个在执行期中执行任意代码的方法。在几乎所有的情况下，eval 都不应该被使用。如果它出现在你的页面中，则表明你所做的有更好的方法。举一个例子，eval 通常被不知道要使用方括号记法的程序员所使用。

原则上，”Eval is evil（Eval是魔鬼）”。别使用它，除非你是一个经验丰富的开发者并且知道你的情况是个例外。

5. 正确地引用表单和表单元素

所有的 html 表单都应该有一个 name 属性。对于 XHTML 文档来说，name 属性是不被要求的，但 Form 标签中应有相应有 id 属性，并必须用 document.getElementById() 来引用。使用像 document.forms[0] 这样的索引方法来引用表单，在几乎所有情况下，是一个糟糕的做法。有些浏览器把文档中使用 form 来命名的元素当作一个可用的 form 属性。这样并不可靠，不应该使用。

下面这个例子用使用方括号和正确的对象引用方法来展示如何防止错误地引用一个表单的input：

正确引用表单 Input：

document.forms["formname"].elements["inputname"]

糟糕的做法:

document.formname.inputname

如果你要引用一个函数里的两个表单元素，较好的做法是先引用这个form对象，并将其储存在变量中。这样避免了重复查询以解决表单的引用：

var formElements = document.forms["mainForm"].elements;
formElements["input1"].value="a";
formElements["input2"].value="b";

当你使用 onChange 或者其他类似的事件处理方法，一个好的做法是总是通过一个引来把 input 元素本身引用到函数中来。所有 input 元素都带有一个对包含其在内的Form表单有一个引用：

<input type="text" name="address" onChange="validate(this)">

function validate(input_obj) {  // 引用包含这个元素的form
var theform = input_obj.form;  // 现在你可以不需要使用硬代码来引用表单自身
if (theform.elements["city"].value=="") {
alert("Error");
}
}

通过对表单元素的引用来访问表单的属性，你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。这是一个非常好的做法，因为函数变得可重用。

避免 ‘with'

Javascript 中的 with 声明在一个作用域的前端插入一个对象，所以任何属性/变量的引用将会倚着对象被首先解决。这通常被用作一个避免重复引用的快捷方法：

使用 with 的例子：

with (document.forms["mainForm"].elements) {
input1.value = "junk";
input2.value = "junk";
}

但问题在于程序员并没有方法来验证 input1 或 input2 实际上已经被当作 Form 元素数组的属性来解决。它首先会以这些name值来检测属性，如果找不到，它将会继续（向下）检测这个作用域。最后，它在全局对象中尝试把input1 和 input2 作为一个全局对象来对待，而这以一个错误作为结尾。

变通的方法是：创建一个引用来减少引用的对象，并使用它来解决这些引用。

使用一个引用：

var elements = document.forms["mainForm"].elements;
elements.input1.value = "junk";
elements.input2.value = "junk";

7. 在锚点中使用 “onclick” 替代 “javascript: Pseudo-Protocol”

如果你想在 <a> 标签中触发Javascript 代码，选择 onclick 而非 JavaScript: pseudo-protocol；使用 onclick 来运行的 Javascript 代码必须返回 ture 或者false（or an expression than evalues to true or false [这句要怎么翻译呢? 我是这样理解的：一个优先性高于true 或 false 的表达式]）来返回标签本身：如果返回 true，则锚点的 href 将被当作一个一般的链接；如果返回 false，则 href 会被忽略。这就是为什么”return false;” 经常被包含在 onclick 所处理代码的尾部。

正确句法：