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

所有的 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" 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 所处理代码的尾部。

正确句法:

复制代码 代码如下:

<a href="https://www.jb51.net">go</a>

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

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

有条件的链接访问:

<a href="https://www.jb51.net/">Home</a>

function validate() { return prompt("Are you sure you want to exit this page?"); }

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

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

什么是不应该做的:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzsffs.html