JavaScrtip之JS最佳实践
一、JavaScript之平稳退化
这边使用一个当用户点击某个页面内某个链接弹出一个新窗口的案例：
JavaScript使用window对象的open()方法来创建新的浏览器窗口;
window.open(url,name,features);
这个方法有三个参数:
url:新窗口里打开的网页的url地址。如果省略这个参数(这个参数为空),屏幕上将弹出一个空白的浏览器窗口。
name:新窗口的名字。
featrues:这个参数是以逗号分隔的一个字符串,他的内容是新窗口的各种属性,如新窗口的宽,高,以及新窗口被启用或禁用的各种浏览器的各种浏览功能(工具条、菜单条、初始显示位置等等)；
open()方法是使用BOM的一个好案例,BOM在前面的JavaScript之对象学习随笔中的宿主对象已有介绍http://www.cnblogs.com/GreenLeaves/p/5685524.html
他的功能对文档的内容没有任何的影响(那是DOM的地盘)这个方法只于浏览环境(window对象)有关。下面是一段关于window.open()的代码:
<body>
<script type="text/javascript">
function popUp(){
window.open("", "popup", "width=320,height=360");
}
</script>
</body>
这个函数将打开一个320像素宽、360像素高的新窗口"popup",因为我在这个函数已为新窗口命名,所以把新的url地址传给此函数时,这个函数将把新窗口的现有文档替换成新url地址处的文档,而不是去新创建一个窗口!我们将这个函数存入一个外部文件,当需要在某个网页里使用这个函数时,只要导入这个外部文件即可.倒入外部文件后:
1.使用"javascript:"伪协议使用popUp()方法
"真"协议用来在因特网上计算机之间传输数据包.如http协议、ftp协议等、伪协议则是一种非标准化的协议。"javascript:"伪协议让我们通过一个链接来调用JavaScript函数
下面是通过"javascript:"伪协议调用popUp()函数的具体方法:
<body> <a href="javascript:popUp('http://www.baidu.com')">Example</a> <script type="text/javascript"> function popUp(winUrl){ window.open(winUrl, "popup", "width=320,height=360"); } </script> </body>
这条语句在支持"javascript:"伪协议的浏览器中正常运行,但在较老的浏览器则回去尝试打开那个链接但总是失败,支持这种伪协议但仅用了JavaScript功能的浏览器什么也不会做，总之,在html文档里通过"javascript:"伪协议来调用javascript代码的做法非常不好。
2.使用内嵌的事件处理函数
事件处理函数将通过onclick方法来调用popUp()具体实现方式和我之前在JS图片库的第一版一样http://www.cnblogs.com/GreenLeaves/p/5691797.html
代码如下:
<a href="#" onclick="popUp('http://www.baidu.com'); return false">Example</a>
上面这段代码使用了return false语句(在老版本的浏览器中有用),这个链接不会真的打开。"#"符号指向当前文档的开头,实际工作全部由onclick属性负责完成。
很遗憾,上面介绍的两种方法都不能平稳退化,因为如果用户禁用了浏览器的JavaScript功能,这样的超链接将毫无用处。
或许,大家都对反复强调"平稳退化"有些不解;让那些不支持或禁用了JavaScript功能的浏览器也能顺利访问你的浏览器真的这么重要吗?
但是假设用户是一个搜索机器人(只有极少数的搜索机器人能够理解JavaScript代码),他们浏览网页的目的是为了把各种网页添加到搜索引擎的数据库里,如果你的JavaScrip网页不能平稳退化,那么他们在搜索引擎上的排名就可能大受损害。
在具体到popUp()函数,给其中的JavaScript代码预留出退路很简单:在链接里把href属性设置为真实存在的URL地址,让他成为一个有效的链接。如下代码所示:
<a href="http://www.baidu.com" onclick="popUp('http://www.baidu.com');return false;">Example</a>
说实话,上面的代码都是超链接,显得有有点冗长,我们可以利用this和getAttribute()方法来进行改进,代码如下所示:
<a href="http://www.baidu.com" onclick="popUp(this.getAttribute('href'));return false;"></a>
this.getAttribute('href')->this.href perfect;
到目前为止,这个例子实现了真正的平稳退化,即使浏览器禁用了JavaScript或者JS失效,这个链接都能正常打开;
关于平稳退化这一点,CSS做的很好,即使css加载失败或者被禁用,网页的内容正常显示。
二、JavaScript之JS与Html代码的分离
第一点，已经解决在浏览器禁用JS的情况下,JS平稳退化的问题,但是代码任然存在一点瑕疵,上面的代码如果只是少数几个超链接,倒没什么问题,但是如果有很多超链接,我们不可能一个个的去加，
而且将JS代码写在html标签里也十分的不合适,这点css已向我们证明,所以我们对上面的代码在做进一步的改进:
window.onload=prepareLinks; //window.onload="";这段代码的作用主要是为了让JS代码在htmk文档加载完毕后,在加载,这样var links=document.getElementsByTagName("a");
就能正常运行
function prepareLinks(){
var links=document.getElementsByTagName("a"); for(var i=0;i<links.length;i++){ if(links[i].getAttribute("class")=="popUp"){ links[i].onclick=function(){ popUp(this.getAttribute("href")); return false; } } }
function popUp(winUrl){
window.open(winUrl, "popup", "width=320,height=360");
}
}
二、JavaScript之浏览器向后兼容之对象检测
不同浏览器对JavaScript的支持程度也不一样。绝大多数浏览器都能或多或少地支持JavaScript，绝大多数现代浏览器对DOM的支持都非常不错,但是还是有极少数古老的浏览器可能无法理解，所以这种情况下,即使这类用户使用的是支持JavaScript的浏览器某些脚本也不一定能正常工作。
所以针对上述浏览器，为了确保JS代码能够正常运行,我们必须检测浏览器对JavaScript的支持程度，代码如下:
window.onload = alert1; function checkCompatibility() { if (document.getElementById || document.getElementsByTagName) return false; } function alert1() { return checkCompatibility(); //检测浏览器是否支持DOM方法 alert("测试浏览器的兼容性!是否向后兼容!"); }
三、JavaScript之JS代码的运行性能
访问DOM的方式对脚本性能会产生非常大的影响。看如下代码:
if(document.getElementsByTagName("a").length>0){ var links=document.getElementsByTagName("a"); for(var i=0;i<links.length;i++){ 处理单个超链接 } }
上面这段代码可以运行,但他不能保持最优的性能,因为不管什么时候,只要查询DOM中的某些元素,都会搜索整个DOM树,从中查找可能匹配的元素，这段代码使用了getElementsByTagName()
去执行了相同的操作,浪费了一次搜索，更好的办法是把第一次搜索的结果保存到一个变量里面。
四、JavaScript之合理的合并和放置脚本
1.使用JavaScript脚本的最佳方式是使用外部文件,因为外部文件能与html标签清晰的分离开来,最重要的是浏览器也能对站点中的多个页面重用缓存过的相同脚本。但是一下这种情况最好也不好出现：
<script src="script/a.js"></script> <script src="script/b.js"></script> <script src="script/c.js"></script> <script src="script/d.js"></script>
推荐的做法是把这四个文件合并到一个脚本中。这样可以减少加载页面时发送的请求数量。而减少请求数量通常都是在性能优化时首先要考虑的！
2.合理的合并脚本固然重要,脚本在html文档中的放置位置同样重要,因为每款浏览器都有他的"并发请求数",意思是同一时间针对同一域名的请求有数量限制，超过限制数目后，其余的请求会被阻止,如果我们将脚本文件放到<head></head>标签内,那么在脚本的下载期间内,浏览器不会下载其他任何文件,所有的其他资源都会等到脚本下载完毕之后才会下载。网页设计需要遵循"内容就是一切"的准则,所以我们应该将JS脚本放到</body>之前这样页面(内容)就会变得更快！window对象的load事件依然可以执行对文档进行的操作。
五、脚本压缩
在写完了脚本,做了优化，而且将他放到文档中的合适位置后,还有一件事可以加快下载速度:压缩脚本文件；
所以我们开发应该至少有两个版本,一个是开发中用的包含注释的,另一个是运行用的压缩版。
