什么是平稳退化:
如果正确地使用了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>
- window.open()方法来创建新的浏览器窗口
对应的3个参数分别是 新窗口的url地址、新窗口的名字、新窗口的其他属性(如宽、高) - 用window.onload的目的:让以上代码在HTML文档全部加载到浏览器之后马上开始执行。