如何将渐进增强应用到javascript脚本

如果带着渐进增强的想法，为了完成上面同样的需求，可以将基本的表格包含在HTML标记中。大部分情况下依旧需要后台程序来生成，但是需要直接嵌入在页面中而不是通过Ajax来加载。你仍然需要编写脚本，在DOM中找到表格，使其具有交互性，生成排序链接，并在它们的onclick事件中绑定Ajax调用，最后打造出一个可排序的表格。

用这种方式完成挑战，不但满足了需求，还为搜索引擎爬虫和没有JavaScript的用户提供了一个“低保真”的体验。

再考虑远些，甚至还可以给表格头部手动添加一些排序链接，通过传递排序表格的相应参数，让它们能刷新页面。这使得没有JS的用户也能重新对数据排序，虽然响应速度稍微慢些，但仍然是功能齐全的“高保真”体验。

在脚本中加入些简单的小调整，还可以通过hijack技术让上面的排序链接依旧像以前一样执行Ajax请求，将最好的体验带来大部分有能力的用户。最后，你拥有了一个渐进增强实战的完美例子。

到这里，已经拥有了对JavaScript渐进增强的基本理解，我们能够讨论一些可以立刻使用的技巧了。

让脚本可控

有效集成渐进增强的一个关键是为脚本的管理建立规划。为了做到这一点，首先要熟悉“无侵入式JavaScript”的概念。无侵入式JavaScript是渐进增强在客户端脚本世界的基础。

“做到无侵入”最明显的办法是去掉所有行内的事件处理器，因为它们可以很简单地通过DOM来注册：

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

接下来，将所有脚本移动到外链的文件中，而不是嵌入在script元素中：

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

这可以让维护变得更轻松同时让你拥有一些代码库。（坦率地说，这两个变化可能需要不少工作量，因为这么多所见即所得编辑器和web应用程序开发框架生成可怕的侵入式JavaScript代码。值得庆幸的是，很多系统已经有补丁和插件用来克服它们的坏习惯。）

要使得脚本无侵入，接下来的步骤是决定何时以及如何包含它们。在最简单的层次上，这意味着检查，调用方法前先测试是否支持此方法，以确保脚本能在用户浏览器上运行：

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

你可能还想测试所有需要的对

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!