JS编码技巧:翻译的14天JS编写技巧(3)
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 元素数组的属性来解决。它首先以为这些名来检测属性,如果找不到,它将会继续(向下)检测这个作用域。最后,它在全局对象中尝试把input1 和 input2 作为一个全局对象来对待,而这以一个错误作为结尾。
变通的方法是:创建一个引用来减少引用的对象,并使用它来解决这些引用。
使用一个引用:
var elements = document.forms["mainForm"].elements;
elements.input1.value = "junk";
elements.input2.value = "junk";