第5章 最佳实践
平稳退化 和 渐进增强 让不支持或禁用了javascript浏览器也能顺利浏览网页。
一个简单例子:
function popUp(url){
window.open(url, "popUp", "width=320,height=480")
}
伪协议和onclick处理事件:也能完成打开弹出窗口的需求。但是在不支持JavaScript或禁用的JavaScript的浏览器,页面就无法正常打开。
<a href="javascript:popUp('http://www.qq.com/')">open1</a>
<a href="#" οnclick="popUp('http://www.qq.com');return false;">open2</a>
平稳退化的方法:即使在不支持JavaScript或禁用了JavaScript的浏览器,虽然不能弹出窗口打开,但还是能够正常打开想要的页面。
<a href="http://www.qq.com" οnclick="popUp(this.href);return false;">open3</a>
还是不够完美,没有做到样式文件,脚本文件和结构分离,继续往下看。
window.onload = function(){
// 检查对象和方法是否存在,如果方法不存在退出函数。
1 window.onload = function(){ 2 // 检查对象和方法是否存在,如果方法不存在退出函数。 3 if(!document.getELementsByTagName) return false; 4 var links = document.getElementsByTagName("a"); 5 for(var i = 0, l = links.length; i < l; i++){ 6 if(links[i].getAttribute("class") == "popup"){ 7 links[i].onclick = function(){ 8 popUp(this.getAttribute("href")); 9 return false; 10 } 11 } 12 } 13 }
性能优化,尽量少访问DOM;CSS和JS文件外联,CSS在head部分引入,JS在页面结构的最下面引入。合并多个CSS文件和多个JS文件,减少请求。压缩脚本。