原文：Progressive Enhancement with JavaScript

作者：Aaron Gustafson

翻译：Roc

如果你已经阅读了本系列的前两篇文章，对于渐进增强你应该游刃有余了。在本文中，我们要继续探讨的是如何理性地把渐进增强应用于客户端脚本技术上。你接下来要了解的无外乎两件事：有节制的和有计划的。

学会四两拨千斤

你或许听过“权利腐败”这种专业术语。这个词有很多想象的空间，但对我们而言，还是聊聊这两个词的本意吧。JavaScript绝对是能力非凡的一种工具，但却在很长一段时期内臭名远扬于网络界。它给在网络冲浪者制造各种麻烦，带来各种错误信息以及数不胜数的弹窗广告。正是由于对JavaScript的滥用，使其被深深的误解为一种罪恶之源。

JavaScript不光是弊大于利，更可怕的是它还会变得难以驾驭。事实上，它更像纵横交错的盘丝洞，让你在想要让它派上用场的时候才发现，该来的（效果）没来，不该来的（状况）全来了；维护这些不断纠结并且晦涩难懂的代码简直是噩梦。

在那段岁月中，JavaScript的在人们眼里毫无形象可言：浏览器还没有很好的支持标准化，开发者也正忙着往HTML里面不断掺入各自的特有代码。为了实现任何一个跨浏览器的兼容性，哪怕只是简单到家的图像翻转效果，JavaScript也只能揽下这些脏活。

值得欣慰的是，现在我们的处境好多了，JavaScript也干净许多。但是，我们必须要负责任的思考它的能力了。琢磨JavaScript能做什么，不如把更多精力放在思考如何合理使用JavaScript。千万别冲动。渐进增强法会助我们一臂之力，是它让我们把内容放在首位，然后从中衍生开去。

做到心有原则

利用渐进增强，在一个可用代码的基础之上构建站点。必须牢记在心的JavaScript核心精神是：在客户端不支持脚本的情况下，任何用户依然能够理解页面要传达出的目的。没错，我要说的就是这些。

例如：也许你要面对的是一个产品销售对照表。该站点的需求里写到，数据应当可以按纵列分类，你可能会想利用Ajax技术把这个表格加载到页面上，因为这样一来，你可以快速的在服务器端将其分类。听起来这方法完美极了？

大错特错！

当关闭了JavaScript的潜在用户光临本页的时候，会发生什么状况？如果内容是通过JavaScript技术载入页面的话，客户将一无所获（哪怕是处于未排序的最初内容）。谁会购买一件压根看不到的产品呢？

上述情景中还不包括搜索这个因素。搜索引擎不会加载运行JavaScript，也就是说，如果你在页面上使用JavaScript载入内容，搜索引擎将永远不去读取或索引你的内容。试想一个不被谷歌、微软和雅虎纳入索引的、永远搜不到的产品，又能有几个客户上门呢？

按渐进增强的思路去做同样的事，可以先将基础的表格写入HTML。绝大多数情况下该表格仍然由后台生成，但采用直接的嵌入页面要比通过Ajax加载好。你还需要编写一个通过DOM定位这个表格的脚本，使其拥有如下的交互：生成分类链接，把它们的onclick事件和Ajax调用绑定。一个可分类版的表格诞生了。

至此，你不仅满足了需求，并且提供给搜索引擎蜘蛛和禁用JavaScript用户一个“降级”的体验。

再深入一步，你甚至可以在表头手动添加一个分类链接，通过（点击）这些带有参数的链接，得到重新分类表格的刷新页。这样一来，禁用JavaScript的用户也同样可将数据分类，虽然没有那么炫的体验了，但功能上却保持完整。

脚本里再做一些细微调整，更可以让你拦截（这些手动添加的）链接，执行原有的Ajax请求，从而带给大多数有能力的用户以最佳体验。终于，你得到了一个完美的渐进增强案例。

你已经对JavaScript的渐进增强有了一个基本了解，接下来我们讨论一些入门的实用技术。

别让脚本失控了

有效融入渐进增强的关键一点就是建立有序的脚本规划。要做到这一点，你必须先对“非扰性JavaScript”^注1有一个清晰的认识。非扰性JavaScript技术乃是用于客户端脚本渐进增强的基石。

“非干扰”的第一步是去除所有的行内事件处理代码，这些都是可以轻而易举地通过DOM注册替代：

<a href="http://msdn.com" onclick="return newWin(this.href);">

接着是把所有的脚本移到外链JS文件里，这远远好于把代码都写在script元素中：

<script type="text/javascript">  // my script</script><script type="text/javascript" src="myscript.js"></script>

此举将使维护变得更为容易，不过也要额外开销。（说老实话，以上两点改动需要费些精力，因为许多基于所见即所得模式工作的编辑和网络应用程序开发框架生成极其烦人的JavaScript会导致无法预测的结果，万幸的是，在许多系统里你可以利用补丁和插件去纠正他们的陋习。）

要使得脚本“非干扰”的接下来一步取决与何时以及如何把它们加进来。最简单来说就是，为了确保脚本能够在用户的浏览器中运行，在调用方法之前要先检查是否支持此方法：

if( document.getElementById ){  scriptUsingGetElementById();}

你或许还想测试你所需的任一对象，或许甚至想检查用作脚本挂钩（Hooks）的标识元素是否存在。对于你所使用的每一个脚本都按照这个流程处理下来，一种点单式的交互体验就创建成形了，只有那些用户浏览器可以识别处理的，且在当前页面HTML标记中运行的标记才会被执行。

关于非扰性JavaScript的更多信息，你可以访问专题中Jeremy Keith的文章。

样式分离

脚本的存在不能脱离实际的土壤，所以就像上面所说的脚本和标记应当分离，同理，脚本和样式之间也要分离。

总体而言，当你在DOM创建或试图控制某个元素时，你不应当再在里面添加行内样式了。取而代之的是使用类名，该类名和全局样式表或某一对应特定脚本的样式表相关联：

var el = document.getElementById( 'message' );el.style.color = '#f00';el.style.backgroundColor = '#ffcfcf';el.className = 'highlighted';

如果脚本需要许多样式才能交互起来，那么使用对应特定脚本的样式表会是个不错的选择。在使用样式表的脚本中这样的设置，使得我们可以独立于站点其它样式表之外去维护这些样式表。此外，它还可以让样式表只有在脚本被执行时才能被引用链接，因此，对于那些不使用或是不支持该脚本的浏览器来说，页面加载时间也得到了缩短。

一旦你决定将样式嵌入主样式表，必须确保一点，那就是采用上述方法给元素添加样式，以便让这些样式只有在脚本成功运行后才显示出来。

关于样式和脚本分离的更多信息，你可以阅读Scoll首发的这篇文章（现在只能在实体书上看到了）。

向着“渐进增强”进发吧

我们通篇回顾了在JavaScript中实现渐进增强的思路以及实践的一些技术。我们也涉及了一点“非干扰”脚本技术的概念，并从中学习到不少管理CSS和JavaScript内部关系的技巧。

我们关于渐进增强以及如何在CSS和JavaScript中使用渐进增强的一系列介绍就到本文为止了。希望这些文章能够引发你的思考，并且促使你最终在工作中使用渐进增强。

有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉，可是结果却失败了，得出的结论是：我们并不能隔着一层标签去控制子对象中的第一个字符。

由于这句存在误解的可能性（我就误解了他的意思），振之在第一时间就删除这句话。他的意思准确地说，是:first-letter这个伪类无法向下“继承”。例如：

   1:  <div id="demo">

   2:      <p>我要实现首字下沉</p>

   3:  </demo>

如果只定义#demo:first-letter，我们将看不到任何结果，必须使用#demo p:first-letter。和a:link这样的链接伪类不同，:first-letter（当然还有其他的）无法向下“继承”。之所以加上引号，是因为:first-letter的这种无法穿透子对象的特性和通常定义的继承有所区别。这一概念在《CSS权威指南》中是这样定义的：基于继承机制，样式不仅应用到指定元素，还会应用到它的后代元素。假设在上面的html代码中我们给外层定义一个边框：#demo { border： 1px solid #000; }，我们知道这里无法向下继承的是border属性，而:first-letter是一个伪类元素，换个说法，:first-letter中的任何属性均不向下继承。

   1:  #demo:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; 

   2:  line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 }

   3:   

   4:  #demo p:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; 

   5:  line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00 }

如果问题仅仅是这个，那么文章也到此结束了。但是在我测试:first-letter这个伪类元素的特质是否存在于各大浏览器的时候，我发现在IE8下，不论我如何设置我的css(如上)，效果都是不可见的。原谅我的孤陋寡闻，我竟然怀疑起IE Tester的性能，我第一想到的是它对IE8的渲染核心设置有误。接着我升级了我的IE7……直到我在崭新的IE8 beta1浏览器中打开测试页的时候，我还是没有怀疑IE8，因为即使是IE5.5也是支持:first-letter伪类的。

叼着烟斗的名侦探说过：“除掉所有不可能的，留下来的，无论多么不合理，但它就是真相......！”是的，真相就是IE8 beta1不支持:first-letter（还有:first-line）。我希望这是beta1版本中的一处来不及修复的bug，因为在微软官方的IE5~IE8 CSS兼容表中，明确的标明了出去IE5不支持:first-letter外，其他版本一律支持。这一点，在许多博客中都被提及，例如怿飞的IE8 beta1 中的 CSS 属性。

如果你的兼容性检查列表中还没有IE8的名字，如果你觉得诸如首字下沉这样的额外视觉效果可有可无，那么你可以在这一行结束浏览了。但，如果你执着于此，希望IE8的用户也可以在你的网页上看到类似于报刊文章上的效果，你可以往下看。

在多次努力之后，我放弃折腾那可怜的css，IE8b1对于:first-letter的不支持，不是在css hack层面能解决的。我们只能求助于js。我们需要找到一个页面中第一个段落开始的地方，找到这个段落第一个字，让js将其处理为特殊样式：

   1:  window.onload = initial;

   2:  function initial() {

   3:      var letter = document.getElementsByTagName('p')[0];

   4:      var word = letter.firstChild.nodeValue;

   5:      var num = word.substring(0,1);

   6:      var other = word.substring(1,word.length);

   7:      document.getElementsByTagName('p')[0].innerHTML= 

           "<span id='first-letter-plus'>" + num + "</span>" + other;

   8:  }

原谅我的js水平，我始终无法直接定义num的方法，我只能给其添加一些标记，以至于代码如此臃肿，我相信一定有更简单、更强大的js方法。

接下来，我们只需要在css中这样定义：

   1:  #demo #first-letter-plus { font-size:40px; font-family:"楷体_GB2312"; 

   2:  font-weight:bold; font-style: normal; line-height:1.2em; float:left; 

   3:  padding:5px 2px 0 0; color:#c00; }

查看效果页面1，所有的浏览器都搞定了，这一切都建立在不关闭js的前提下。但是对于一些完美者来说，考虑到有人会关闭js运行浏览器时，我们需要再额外添加一些代码：

   1:  #demo p:first-child:first-letter { font-size: 40px; font-family:"楷体_GB2312";

   2:   font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00; }

这样在关闭js的情况下，FF、Opera以及Safari都可以正常显示应有的首字下沉效果，不过IE们就有些混乱，IE8b1天生不支持，无效果；IE7正常；IE6不识别:first-child:first-letter这样的用法；IE5.5神奇的识别了:first-letter，但是它忽略了:first-child，这导致了所有段落p都会有一个首字下沉的效果，这可不是我们排版上希望看到的。并且当你回复使用js的时候，在Opera中会产生一个有趣的现象，段落的前两个字都有了效果，查看效果页面2。这是因为在Opera中，第一个字包含在<span></span>中，效果由js实现，Opera认为p的:first-letter应该在<span></span>之后开始。

因此，我们需要改动一下css:

   1:  #demo p > *:first-child:first-letter { font-size: 40px; font-family:"楷体_GB2312"; 

   2:  font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00; }

这样以来，Opera中的奇怪现象也消失了。查看这个效果页面3。

说实话，我并不推荐使用如此繁复的代码（效果页面2和3）实现一个首字下沉。就好像在html中不推荐使用<q></q>那样。直接使用效果页面1的代码，让js去做这个在IE中找不到平衡点的事情——js开启，大家都有同样的效果；js关闭，效果也一起消失。因为它不仅使得IE8可以应用首字下沉的效果，也避免了其他版本IE在对:first-child:first-letter这样的一个css应用上的处理差异（直接使用:first-letter会让每个段落开头都有一个首字下沉效果，这也是为什么振之在他的博客正文中不使用这个效果的原因）。

上帝保佑，IE8正式推出的时候可以支持:first-child（还有:first-line）。

JavaScript部分：

<script type="text/javascript">
function SetCwinHeight(iframeObj){
if (document.getElementById){ 
  if (iframeObj){
    if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
      iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
      } else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){  iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
      }
    }
  }
}
</script>

html部分：

<iframe name="frameContent" src="*" frameborder="0" width="100%" onload="SetCwinHeight(this)"></iframe>

标记*号的地方填入iframe页面的地址。需要注意的是，src地址必须是在同一网站下，否则会出现“权限被禁止”的错误。

以上只是一个简单的iframe高度自适应版本，口碑网UED小组有一篇专门讨论iframe高度的文章，那里有更强壮的Js脚本。