BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 Matthew Bass 关注 0 他的粉丝 ,译者 张凯峰 关注 1 他的粉丝 发布于 2008年7月1日. 估计阅读时间: 3 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!
低调(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

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

内容的代码没有过滤 by Lee R

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

翻译小问题 by 陈 慧然

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

Re: 内容的代码没有过滤 by 曹 云飞

谢谢批评指正!

Re: 翻译小问题 by 曹 云飞

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

Re: 翻译小问题 by Zhang James

维科英汉词典
unobtrusive
adj. 不打扰的, 不多嘴的, 不带侵略性的, 不冒犯的, 谦虚的, 客气的

严重同意翻译为“无入侵”
“无入侵”已经是一个大家都公认接受、容易理解词汇了。为什么还要另外发明呀。
想起来传闻很久的徐某翻译的《UML精粹》了

jQuery 最简单了 by qiu james

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

Re: 翻译小问题 by yao tony

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

Re: 翻译小问题 by Wang ShiYong

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

这个有点片面了 by wangzm zhimeng

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

Re: 这个有点片面了 by Z Flytwokites

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

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

10 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT