什么是平稳退化和渐进增强---- JavaScript DOM 编程艺术

程序员文章站 2022-06-10 10:02:27

...

平稳退化：确保网页在没有JavaScript的情况下也能正常的工作

网站的访问者可能是不支持JavaScript也可能是禁用了JavaScript，如果没有考虑这两种情况，这些用户访问你的网站会出新很多的问题。

所以在浏览器不支持JavaScript的时候也能浏览你的网站这就是所谓的平稳退化，就是说虽然某些功能不能使用但是最基本的操作热能完成。

下面举一个例子

===========================================================

如例子所示如果写成

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>平稳退化</title>
</head>
<body>
	<a href="#">点击</a>   <-------------------------------------------看着里
</body>
<script>
	var button = document.getElementsByTagName('a')[0];
	button.onclick = function () {
		window.open("http://www.baidu.com","popup","width=320,height=480");
		return false;
	}
</script>
</html>

<a href="#">点击</a> 链接设置为#只是创建了一个空链接，因为a标签的工作都由 onclick属性完成，但是如果JavaScript被禁用后链接便完全失效，这个链接也就毫无用处。

所以在链接中加入真实存在的url地址，让他成为一个有效的链接。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>平稳退化</title>
</head>
<body>
	<a href="http://www.baidu.com">点击</a>
</body>
<script>
	var button = document.getElementsByTagName('a')[0];
	button.onclick = function () {
		window.open("http://www.baidu.com","popup","width=320,height=480");
		return false;
	}
</script>
</html>

即使JavaScript被禁用了，这个链接任然可以用，虽然其功能上有些折扣但是并没有彻底失效，这就是一个经典的‘’平稳退化“的例子。

========================================================================

渐进增强就是用一些额外的信息层去包裹原始信息，按照渐进增强原则创建的网页基本度符合”平稳退化“原则