逐步增强和优雅降级的例子,我不明白

时间:2016-02-06 10:55:04

标签: javascript progressive-enhancement graceful-degradation

我已经阅读了这两种不同的设计方法,我理解Prog.Enhancement和Graceful Degradation之间的理论差异,但是我没有得到你可以在这个链接上阅读的例子: Progressive enhancement and Graceful degradation example

G.D.他创建了一个通过Javascript打印页面的链接。 与P.E.做同样的事,但他使用“按钮”而不是“链接”。

这是P.E.使用的代码。过程:

    <p id="printthis">Thank you for your order. Please print this page for your records.</p>
<script type="text/javascript">
(function(){
  if(document.getElementById){
    var pt = document.getElementById('printthis');
    if(pt && typeof window.print === 'function'){
      var but = document.createElement('input');
      but.setAttribute('type','button');
      but.setAttribute('value','Print this now');
      but.onclick = function(){
        window.print();
      };
      pt.appendChild(but);
    }
  }
})();
</script>

他不能继续使用链接吗? 我的意思是即使在P.E.中,Javascript支持的问题仍然存在。并且完全像在G.D.中那样解决,告诉用户自己打印页面。

提前致谢

2 个答案:

答案 0 :(得分:1)

没有。在此示例中,没有链接。只需<p>。放入正常的<a>意味着任何有JS禁用的人和任何浏览器无法window.print()的人都会看到一个链接,它不会做任何事情或去任何地方(可能会如果浏览器足够大,则抛出一个错误框)。用户界面将明显被打破。为了以另一种方式增强页面,作者可以将<p>更改为<a>,但他选择使用<input type="button">。有很多选择。

但这个例子的重点是从一个不以任何方式破坏任何人的用户界面开始 - 包括已禁用JS的用户和不具备所需功能的浏览器 - 然后建立。这是PE的重点。另一方面,GD的方式是为主要受众构建页面,并找到隐藏破坏内容的方法,这样较少的浏览器仍可以获得一些不错的东西,而不会在整个地方看到大量破碎的东西。

我知道你没有问,但根据我的个人经验,PE和GD之间的区别是完全人为的,非常2009年。其中很多都与IE6(2001年不会死的浏览器)有关,但移动设备给了它一个新的紧迫感。

当时许多人认为移动设备是一个需要特殊处理的独立系统,所以这是一个重要的问题:你是为移动和桌面构建的,然后为核心桌面用户添加功能吗?或者,您是为核心桌面受众构建网站,然后重新审视可能在移动设备上破坏的内容。

答案 1 :(得分:0)

渐进增强和优雅降级通常看起来很相似,因为它们是。所有逐步增强的设计都会优雅地降级,但并非所有优雅降级的设计都会逐渐增强。这是关于透视的。正如安德鲁所说,渐进式增强是从一个普遍可用的核心体验开始,并尽可能地增强这种体验(使用HTML,CSS和JavaScript)。具有不同需求和能力的不同人将获得可用且适合他们的不同体验 - 并且没有问题。相反,优雅的降级将允许您阻止对站点的访问,因为该人没有使用您不想测试的浏览器,因为您没有抛出错误,您只是阻止他们访问网站(可能会推荐您测试过的其他浏览器)。

逐步增强的网站为人们提供了更多使用您的产品和阅读内容的机会,因为该理念认识到Web作为传递机制的固有可变性和脆弱性。设计师/开发人员采用纯粹优雅的降级方法可能无意中限制他们的受众并降低他们网站的稳定性,因为他们不会考虑这种可变性。

我已经在我的“自适应网页设计”一书中详细地写了这篇文章。第一版可在线免费获取。第二版于2015年底发布。