Unobtrusive JavaScript是一种正在浮现的技术，它能将JavaScript从HTML标记语言中分离开来。这非常类似于上世 纪90年代CSS的诞生所带来的页面样式和HTML的分离。比如，唐突的JavaScript写法会直接为某个文本框添加onClick事件处理器，就像这样：

<input id="field" onclick="alert('hello')" />

而低调的JavaScript会一直等到页面全部加载完毕，才会把事件处理器跟文本框连接上：

<script type="text/javascript">
  Event.observe(window, 'load', function() {
    Event.observe($('field'), 'click', function() {
      alert('hello');
    };
  });
</script>

<input id="field" />

这样写能够使HTML代码（在这个例子中就是我们的input标签）保持干净，并为开发者提供单一引用点来调试 JavaScript代码。Unobtrusive JavaScript提倡将代码存储在外部的.js文件中，反对将其嵌入在HTML页面内的<script> 标签中。虽然这个范例占用了多行代码，但稍微大块点的JavaScript可以带来更加清晰和简洁的结构。

unobtrusive JavaScript的其他一些好处包括：

• 关注点分离：将行为层从内容和展现层分离开来
  
• 更易于处理浏览器的不一致性
  
• 更易于阅读的简洁的代码
  

当与像Prototype这样的开源库结合使用时，会更加容易创建Unobtrusive JavaScript。甚至有一些现成的框架专门设计用来将唐突的JavaScript转换成低调的JavaScript。

比如Low Pro，为Prototype添加了一些有用的帮助函数，可以显著地改善对浏览器事件模型的访问，并提供一个行为库来方便地连接Unobtrusive JavaScript触发器。我们上面的示例使用Low Pro可以写成这样：

<script type="text/javascript">
  Event.addBehavior({
    'input#field:click' : function(e) {
      alert('hello');
    }
  });
</script>

<input id="field" />

这样，行为在页面完成加载后就自动连接在一起。还可以使用CSS选择器来添加其他的行为，比如为触发选择元素。

随着AJAX网站数量的稳步增长，JavaScript在web应用开发中变得更加重要。保持JavaScript低调可以更加简单的开发出炫目的特性。它也使得维护这些网站变得更加容易，成本更少。

查看英文原文：AJAX developers continue migrating to unobtrusive JavaScrip
来自：http://www.infoq.com/cn/news/2008/06/unobtrusive

分类： 网页设计 站长经验 Web开发 交互设计 艺术设计