Javascript 最佳实践 (2)
标签: JavaScript, 实践JavaScript
说在前面的话：
这是Javascript 最佳实践 (1)的后续篇，同时，这两篇文章都是非常值得推荐的。来自于Javascript Toolbox，翻译这篇文章，自己获益良多。分享出来，给各位准备、正在和已经学习了Javascript的同学。
- 在锚点中使用 "onclick" 替代 "javascript: Pseudo-Protocol"
- 使用一元 ‘+’ 号运算符使类型转向Number
- 避免 document.all
- 不要在脚本代码块中使用HTML注释
- 避免乱用全局命名空间
- 避免同步的 ‘Ajax’ 调用
- 使用 JSON
- 使用正确的 <script> 标签
1. 在锚点中使用 "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>
2. 使用一元 ‘+’ 号运算符使类型转向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
}
3. 避免 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) { }" 来查看是否支持.
4. 不要在脚本代码块中使用HTML注释
在 Javascript 的旧日子（1995）里，诸如 Netscape 1.0 的一些浏览器并不支持或认识 <script> 标签。所以，当 Javascript 第一次被发布，需要有一个技术来让实些代码不被当做文本显示于旧版浏览器上。有一个"hack" 是在代码中使用 HTML 注释来隐藏这些代码。
使 HTML 注释并不好：
<script language="javascript"> <!-- // code here //--> </script>
在今天，没有任何一个常用的浏览器会忽略掉 <script> 标签。因此，再没必要隐藏 Javascript 源代码。事实上，它还可以因为下面的理由，被认为是无益的：
- 在 XHTML 文档中，源代码将向所有浏览器隐藏并被渲染成无用的（内容）；
- – 在 HTML 注释并不允许 ，这个会让任何递减操作将失效。
5. 避免乱用全局命名空间
一般很少需要全部变量和函数。全局使用将可能导致 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中。
6. 避免同步的 ‘Ajax’ 调用
当使用"Ajax"请求时，你要么选择异步模式，要么使用同步模式。当浏览器行为可以继续执行，异步模式将请求放在后台执行，同步模式则会等待请求完成后才继续。
应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器，直至请求返回。一旦服务器忙，并需要一段时间来完成请求，用户的浏览器（或者 OS）将不能做任何其他的事，直至请求超时。
如果你觉得自己的情况需要同步模式，最大的可能是你需要时间来重新想一下你的设计。很少（如果有的话）实际上需要同步模式的 Ajax 请求。
7. 使用 JSON
当需要将数据结构存储成纯文本，或者通过 Ajax 发送/取回数据结构，尽可能使用 JSON 代替 XML。JSON (JavaScript Object Notation) 是一个更简洁有效的数据存储格式，并且不依赖任何语言（and is a language-neutral）。
8. 使用正确的 <script> 标签
不造成在 <script> 中的使用LANGUAGE 属性。一个合适的方式是创建如下的 Javascript 代码块：
<script type="text/javascript"> // code here </script>
2009.11.06 9:21 pm
2009.11.06 10:11 pm
2009.11.06 11:15 pm
2009.11.06 11:20 pm
2009.11.07 8:50 am
2009.11.07 9:27 pm
2009.11.07 10:18 pm
2009.11.08 3:05 pm
2009.11.09 3:33 pm
2009.11.10 11:09 am
2009.11.10 11:33 pm
2009.11.12 1:48 am
2009.11.18 3:12 pm
2009.12.06 12:45 am
2010.01.23 2:54 am
2010.02.07 11:36 am