AJAX 开发者继续向低调(unobtrusive)JavaScript 迁移

  • Matthew Bass
  • 张凯峰

2008 年 6 月 30 日

话题:JavaJavaScript语言 & 开发

低调(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 代码。低调 JavaScript 提倡将代码存储在外部的.js 文件中,反对将其嵌入在 HTML 页面内的 <script> 标签中。虽然这个范例占用了多行代码,但稍微大块点的 JavaScript 可以带来更加清晰和简洁的结构。

低调 JavaScript 的其他一些好处包括:

  • 关注点分离:将行为层从内容和展现层分离开来

  • 更易于处理浏览器的不一致性

  • 更易于阅读的简洁的代码

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

比如Low Pro,为 Prototype 添加了一些有用的帮助函数,可以显著地改善对浏览器事件模型的访问,并提供一个行为库来方便地连接低调 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

JavaJavaScript语言 & 开发