平稳退化、渐进增强、分离js

时间:2022-06-15 21:46:14

什么是平稳退化

如果正确地使用了JavaScript脚本,就可以让访问者在他们的浏览器不支持js的情况下仍然能顺利地浏览该网站。就是说,虽然某些功能无法使用,但是最基本地操作仍能顺利完成。

什么是渐进增强

用一些额外的信息层去包裹原始数据。按这个规则创建出来的网页几乎都符合”平稳退化”的功能。

什么是分离JS

内嵌的事件处理函数(诸如在HTML文档中使用onclick之类的属性)是一种既没有效率又容易引发问题的做法。如果又一个「挂钩」,像CSS机制中的class或id属性那样,把js代码调用行为与HTML文档的结构和内容分离开,网页就会健壮得多。

举个例子:

<a href="http://www.example.com" class="popup"></a>
可以利用 element.event = action… 在外部的js文件中把一个事件添加到HTML文档中的a元素中。
keypoint:给谁添加事件?怎么添加?

例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/JavaScript">
//把行为和结构分离开

window.onload = function(){
var link = document.getElementsByTagName("a");
for (var i=0; i<lnks.length; i++) {
if (lnks[i].getAttribute("class") == "popup") {
lnks[i].onclick = function() {
popUp(this.getAttribute("href"));
return false;
}
}
}
}
function popUp(href){
window.open(href,"popup","width:400px;height:300px;")
}


</script>
</head>
<body>
<a href="http://www.example.com/" class="popup">Example</a>
</body>
</html>
  1. window.open()方法来创建新的浏览器窗口
    对应的3个参数分别是 新窗口的url地址、新窗口的名字、新窗口的其他属性(如宽、高)
  2. 用window.onload的目的:让以上代码在HTML文档全部加载到浏览器之后马上开始执行。
注意:如果js文件是从HTML文档的< head >部分用< script >标签调用的,它将HTML文档之前加载到浏览器中。同样,如果< script >标签位于文档底部< /body >之前,就不能保证哪个文件最先结束加载(浏览器可能一次加载多个)。
因为脚本加载时文档可能不完整,所以模型也不完整。没有完整的DOM,getElementsByTagName等方法就不能正常工作。