AJAX开发者继续向低调（unobtrusive）JavaScript迁移

作者 Matthew Bass 译者 张凯峰 发布于 2008年6月30日 上午1时14分

社区

Java

主题

JavaScript

标签

AJAX

低调（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

1. 返回顶部

   内容的代码没有过滤

   2008年6月30日 上午2时42分 发表人 R Lee

   如题，请参考英文原文，InfoQ的编辑要把好质量关呀！

   回复

2. 返回顶部

   翻译小问题

   2008年6月30日 上午3时9分 发表人 慧然 陈

   unobtrusive翻译成“低调”不太适合。这个单词应该不是简单的直译。推荐翻译成“无入侵”。意为“javascript脚本和html保持相对的独立”，符合web标准的“结构与行为分离”。

   回复

3. 返回顶部

   Re: 内容的代码没有过滤

   2008年6月30日 下午8时25分 发表人 cao yunfei

   谢谢批评指正！

   回复

4. 返回顶部

   Re: 翻译小问题

   2008年6月30日 下午8时30分 发表人 cao yunfei

   unobtrusive包含无入侵的意思，结构与行为分离是它的部分含义，但是不止是无入侵。我的理解，它还有让JavaScript尽量的跨平台，尽量不“打扰”页面的意思。就是说不能因为JavaScript代码中的错误让页面无法显示。这样看，低调似乎更接近它的意思。

   回复

5. 返回顶部

   Re: 翻译小问题

   2008年6月30日 下午9时33分 发表人 James Zhang

   维科英汉词典 unobtrusive adj. 不打扰的, 不多嘴的, 不带侵略性的, 不冒犯的, 谦虚的, 客气的 严重同意翻译为“无入侵” “无入侵”已经是一个大家都公认接受、容易理解词汇了。为什么还要另外发明呀。 想起来传闻很久的徐某翻译的《UML精粹》了

   回复

6. 返回顶部

   jQuery 最简单了

   2008年6月30日 下午10时23分 发表人 james qiu

   $(function() { $('field').click(function() { ... }); })

   回复

7. 返回顶部

   Re: 翻译小问题

   2008年7月1日 上午1时3分 发表人 tony yao

   觉得不光是“无入侵”，还有让用户体验更好的意思！

   回复

8. 返回顶部

   Re: 翻译小问题

   2008年7月1日 下午10时2分 发表人 ShiYong Wang

   支持用“无入侵”，虽然原文这种分离会带来用户体验更好等好处，但本质而言，这种把html和js分离的方式是其实就是传统意义上的“无入侵”。而其它的优点可以视为由“此（无入侵）”所带来的。所以没有必要另外发明一个词汇，来表达这个事件本身及其优点。这会带来困扰。技术界莫名的词汇已经太多了。

   回复

9. 返回顶部

   这个有点片面了

   2008年7月2日 上午12时45分 发表人 zhimeng wangzm

   这个有点片面。分离的本意是对的。无入侵的原则也是对的。 但是用事件这个例子却不合适。 因为用ie等浏览器的原生事件支持，可以节省大量的脚本初始化时间，如果用脚本事后加事件，当面临着大量数据的时候（例如，你给页面搞个200行表格，然后给每行价格鼠标悬停事件，看看效果），会造成页面加载完毕后卡顿一下的。分离式趋势

   回复

10. 返回顶部

    Re: 这个有点片面了

    2008年7月2日 上午3时9分 发表人 benk chou

    你不知道什么是事件冒泡吗？用得着给每行加事件吗？给表格加一个事件就可以了。而且，比内联方式省下大量字节。 而且ie分析html时没有大量js会大大加快表格显示速度。

    回复

• 更早的 >