JavaScript开发规范



1. 使用var声明变量

在javascript中， 变量不是全局范围的就是函数范围的，使用var关键词将是保持变量简洁明了的关键。当声明一个或者是全局或者是函数级（function- level）的变量，需总是前置 var关键词

2. 变量命名规范

命名应该由26个大小写字母(A .. Z, a .. z)，10个数字(0 .. 9)和_(下划线)组成。使用规范有意义的变量名，第一个单词首字母小写，其他单词首字母大写，比如userName

3. 方法声明 

所有的方法应该在它们使用前声明。内部方法应该位于var语句后面。这让哪些变量包含在它的scope里更清楚。

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 name=”address” type=”text” />

function validate(input_obj) {
// 引用包含这个元素的form
var theform = input_obj.form;
// 现在你可以不需要使用硬代码来引用表单自身
if (theform.elements["city"].value=="") {
alert("Error");
}
}
通过对表单元素的引用来访问表单的属性，你可以写一个不包含硬代码的函数来引用这个页面中任何一个有特定名的表单。这是一个非常好的做法，因为函数变得可 重用。

6. 避免 ‘with’

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

使用 with 的例子：

with (document.forms["mainForm"].elements) {
input1.value = "junk";
input2.value = "junk";
}
但问题在于程序员并没有方法来验证 input1 或 input2 实际上已经被当作 Form 元素数组的属性来解决。它首先以为这些名来检测属性，如果找不到，它将会继续（向下）检测这个作用域。最后，它在全局对象中尝试把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 所处理代码的尾部。

正确句法：
<a οnclick="doSomething(); return false;" href="javascript_required.html">go</a>
在这个实例中，”doSomething()” 函数(定义于页面的某个角落)将在被点击时调用。href 将永远不会被启用了Javascript 的浏览器访问。在你可以提醒Javascript 是必须的、而用户未启用之的浏览器中，文档 javascript_required.html 才会被加载。通常，当你确保用户将会开启 Javascript 支持，为尽量简化，链接将只包含 href=”#”。 而这个做法是不被鼓励的。通常有一个不错的做法是：可以提供没用启用 javascript 一个返回本地的页面。

有时，众多想要分情况来访问一个链接。例如，当一个用户要离开你的一个表单页面，而想先验证来确保没有东西被改变。在这个情况下，你的 onclick 将会访问一个返回询问链接是否应该被遵循的函数：

有条件的链接访问:

<a οnclick="return validate();" href="/">Home</a>

function validate() {

return prompt("Are you sure you want to exit this page?");

}

在这个实例中，validate() 函数必须只返回 ture 或 false。ture 的时候用户将被允许问题 home 页面，或 false 的时候链接不被访问。这个例子提示确认（其行为），以访问 ture 或 false，这完全由用户点击”确实”或者”取消”决定。

下面是一些”不应该”的例子。如果你在自己的页面中看到下面这样的代码，这是不正确的，需要被修改：

什么是不应该做的：
<a href="javascript:doSomething()">link</a>
<a οnclick="doSomething()" href="#">link</a>
<a οnclick="javascript:doSomething();" href="#"<link>/a>
<a οnclick="javascript:doSomething(); return false;" href="#">link</a>

8. 使用一元 ‘+’ 号运算符使类型转向Number

在Javascript中，”+”号运算符同时充当数学加号和连接符。这会在form表单的域值相加时出现问题，例如，因为Javascript是 一个弱类型语言，form 域的值将会被当作数组来处理，而你把它们”+”一起的时候，”+”将被当成连接符，而非数学加号。

有问题的例子:
<form action="[url]"><input name="val1" type="text" value="1" />
<input name="val2" type="text" value="2" />
</form>
function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // 这个将会弹出 "12", 但你想要的是 3!
}
解决这个问题，Javascript 需要一个提示来让它把这些值当做数字来处理。你可以使用”+”号来把数组转换成数字。给变量或者表达式前置一个”+”号将会强制其当作一个数字来处理，而 这也将使得数学”+”得以成功应用。

修改好的代码：

function total() {

var theform = document.forms["myform"];

var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);

alert(total); // This will alert 3

}

9. 避免 document.all

document.all 是由Microsoft 的 IE 所引进的，并不是一个标准的 Javascript DOM 特性。尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码，（而）还有很多浏览器是不支持的。

并没有理由其他方法都不适用，而一个老的IE浏览器（<5.0）需要支持，而在Javascript中使用 document.all 作为一个折衷方法。 你并不需要使用 document.all 来检测其是不是IE浏览器，因为其他浏览器现在一般都支持。

只把 document.all 当做最后的选择：

if (document.getElementById) {

 var obj = document.getElementById("myId");

}

else if (document.all) {

 var obj = document.all("myId");

}

一些使用 document.all 的原则：

同尝试其他方法
当其作为最后的选择
当需要支持 5.0 版本以下的 IE 浏览器
总是使用 “if (document.all) { }” 来查看是否支持.

10. 避免乱用全局命名空间

一般很少需要全部变量和函数。全局使用将可能导致 Javascript 源文件文档冲突，和代码中止。因此，一个好的做法是在一个全局命名空间内采用函数性的封装。有多个方法可以完成这个任务，有此相对比较复杂。最简单的方法 是创建一个全局对象，并把属性和方法指派给这个对象：

创建一个命名空间：

var MyLib = {}; // global Object cointainer

MyLib.value = 1;

MyLib.increment = function() { MyLib.value++; }

MyLib.show = function() { alert(MyLib.value); }

 

MyLib.value=6;

MyLib.increment();

MyLib.show(); // alerts 7

命名空间也可以使用 Closures（闭包?） 来创建，并且 Private Member Variables （私有变量?） 也可以伪装于 Javascript中。

11. 避免同步的 ‘Ajax’ 调用

当使用”Ajax”请求 时，你要么选择异步模式，要么使用同步模式。当浏览器行为可以继续执行，异步模式将请求放在后台执行，同步模式则会等待请求完成后才继续。

应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器，直至请求返回。一旦服务器忙，并需要一段时间来完成请求，用户的浏览器（或者 OS）将不能做任何其他的事，直至请求超时。

如果你觉得自己的情况需要同步模式，最大的可能是你需要时间来重新想一下你的设计。很少（如果有的话）实际上需要同步模式的 Ajax 请求。

12. 使用 JSON

当需要将数据结构存储成纯文本，或者通过 Ajax 发送/取回数据结构，尽可能使用 JSON 代替 XML。JSON (JavaScript Object Notation) 是一个更简洁有效的数据存储格式，并且不依赖任何语言（and is a language-neutral）。

13. 使用正确的 <script> 标签

不造成在<script>中的使用LANGUAGE 属性。一个合适的方式是创建如下的 Javascript 代码块：

<script type="text/javascript">
// code here
// ]]></script>