By

文章目录
  1. 1. 问题的根源
  2. 2. 优雅降级（Graceful degradation）
  3. 3. 渐进增强 （Progressive enhancement）
  4. 4. 实现

昨天记录了一下DOM的一些简单的操作和一些简单的实现方法，还有一点js的DOM操作，然后提到一个概念，优雅降级,与之对应的是渐进增强，其实他们都是兼容问题。

#兼容

问题的根源

其实吧，我觉得两者是从不同的角度和方向来解决同一个问题。如何对待浏览器大战留下来的坑，以及如何照顾不同受众群体。这个问题的根源其实是http协议本身的无状态。以及计算机网络的不确定性，我们只能将很大一部分代码的基础构建在一个假设上面，而这个假设本身并不能被很好的印证。这样话，其实就有一个很根本的问题了，如果，宿主对象不存在，该如何处理。曾经的想法是优雅降级， 后来我们把想法更新成了渐进增强。
对于不同浏览器的支持可以点这里进行查询。

优雅降级（Graceful degradation）

又叫平稳退化，wiki上有比较详细的解释，英文好的同学可以点击去看看，嗯，说一下自己的理解，其实就是当程序运行在一个非完整环境下，对该不完整环境做的自我阉割，从而使得在该不完整情况下使用的用户能够基本完成所有交互动作。

渐进增强 （Progressive enhancement）

淘宝UED的一篇译文写的极好，这里直接引用。

“渐进增强”观点则认为应关注于内容本身。请注意其中的差别：我甚至连“浏览器”三个字都没提。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
原文请点我

##区别

从不同层面和起点去看同一个问题，往往会有不同的答案，就像，我们看到这两个兼容处理。

当我们站在完整浏览器的角度而言，我们所面对的受众都是会自行更新最新浏览器的年轻受众而言，保持网页最酷炫，最丰满的状态往往会得到更大的收益，这时候，建立在最新浏览器支持下的优雅降级，就有其独特的优势。以最好的呈现效果为出发点，当我的呈现效果无法得到宿主环境的支持的时候，我主动阉割，用来实现交互的延续。

当我们站在内容表现的出发点，以最大限度的传递内容信息为依归的去思考问题的时候，我们往往会发现从老旧浏览器出发的向上表现增强，是更好的实现方法。

并没有什么东西是一成不变就能放之四海而皆准的，具体问题具体分析，根据业务环境的选择才是正途。正如这篇博文所说，二者之间，其实并没有什么本质上的区别，更多的是思想观念和具体操作流程上的区别。

实现

说了半天理论，我们来说说怎么做，其实这两种兼容方式。

1
<div>
    <input type="text" id="text" /> 
    <a class="button" id="submit">提交</a>
</div>
<script type="application/javascript">
    ;(function(){
        $("submit").click(function(){
            var text = $("text").val();
            $.post('url',{'text':text,function(d){
                // do something
            }});
        })
    })()
</script>

嗯，上面的代码其实在大多数浏览器下并不会有很大的兼容问题，而且书写起来简单方便，很容易被大家贴来贴去。但是，如果一旦宿主端停止了对js的支持，或者停止了对ajax的支持，上面这个程序就GG啦~！一点挽回的余地都没有啦~！嗯，我们看一下下面的写法。

1
<form action="url" method="post" class="form"  >
    <input type="text" id="text" />
    <input type="submit" value="提交" id="submit" />
</form>

<script type="application/javascript">
    ;(function(){
        $("#submit").click(function(){
            var text = $("text").val();
            $.post('url',{'text':text,function(d){
                // do something
            }});
            return false;//拦截事件，使得事件不会冒泡。则不会触发onsubmit事件
        })
    })()
</script>

从功能上而言，新版的和旧的是一样，使用ajax实现一个异步的登入请求，如果你可以使用ajax的话，如果，并不支持js，则会使用一般的form表单实现同步登入。这样，就算用户无法享受高级的ajax服务，也是能够完成提交表单的这一交互行为。
再看下面这个例子

1
<button id="show" >click me~!</button>
<img src="path\to\image" id="image" />
<script type="application/javascript">
    ;(function(){
        $("#show").click(function(){
            $("#image").attr('src','new\path\to\image')；
        });
    })()
</script>

这段代码应该来说超级常见，很多地方都能用到。点击更换或者出现一张图片。但是，上面的操作都大量的依靠于javascript，当宿主环境不支持的时候，我们已经完全无法进行下一步的交互，从用户体验的角度来说，这会让用户有很强的挫败感，而这种挫败感会直接导致用户的流逝。。。嗯，我们可以用一下方法来解决这个问题。

1
<a href="path\to\image" id="show" >click me~!</>
<script type="application/javascript">
    ;(function(){
        $("#show").click(function(){
            var image = document.createElement("IMG");
            $(image).attr('src','new\path\to\image')；
            $(this).parent().append(image);
            return false;
        });
    })()
</script>

嗯，新的代码，在支持js的环境下与上一段代码无异，运行在不支持js环境下的时候，会用一个a标签代替button，我们可以通过设置a的样式来使得a长的像一个button。这样的话，就算js不能使用，也不会莫名其妙的出现张图片。不会影响体验和使用逻辑，用户依然可以通过点击来判断是否查看图片。

嗯这里使用了jquery库，所以，我们并没有对DOM操作本身进行校验，这个，如果有需要，我们还是要做的。嗯，这里提供一个js库，用来校验宿主是否兼容。Modernizr ，我们可以通过这个库来校验浏览器是否支持一些属性，然后来判断，如何优雅的实现优雅兼容。看下面这个例子

1
<script type="text/javascript" src="Scripts/modernizr-2.0.6.min.js"></script>
        <style>
            article  
            {
                background: lightblue;
                margin: 20px;
                padding: 5px;                
                width: 350px;
                border-radius: 10px;
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
            }
            article h1 { font-size: 12px; }
        </style>
        <article>
            <header><h1>我的标题</h1></header>
            <p>我的内容</p>
        </article>
    <script>
        Modernizr.load([{
            load: 'Scripts/jquery-1.6.1.min.js',
            complete: function () {
                if (!window.jQuery) {
                    Modernizr.load('Scripts/jquery-1.6.1.min.js');
                }
            }
        },
        {
            test: Modernizr.borderradius || Modernizr.boxshadow,
            nope: 'Scripts/PIE.js',
            callback: function () {
                $('article').each(function () {
                    PIE.attach(this);
                });
            }
        }]);
    </script>

但浏览器支持圆角属性的时候，会自动应用css属性，但是，当属性并不支持的时候，我们使用pie.js的脚本来动态实现，如果，连js都不兼容的话，就只能展示最基本的信息了。。。。
嗯，今天就说这么多，明天处理如何新建html节点，html-DOM DOM-core，和事件处理。

文章目录
  1. 1. 问题的根源
  2. 2. 优雅降级（Graceful degradation）
  3. 3. 渐进增强 （Progressive enhancement）
  4. 4. 实现