JS编码技巧:翻译的14天JS编写技巧(4)

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="javascript_required.html" onclick="doSomething(); return false;">go</a>

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

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

有条件的链接访问:

<a href="/" onClick="return validate();">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 href="#" onClick="doSomething()">link</a>
<a href="#" onClick="javascript:doSomething();">link</a>
<a href="#" onClick="javascript:doSomething(); return false;">link</a>

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

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

有问题的例子:

<form name="myform" action="[url]">
<input type="text" name="val1" value="1">
<input type="text" name="val2" 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
}