外行术语来说,什么是不显眼的 Javascript?[关闭]

What is Unobtrusive Javascript in layman terms? [closed]

提问人:Imran 提问时间:12/19/2010 最后编辑:Brian Tompsett - 汤莱恩Imran 更新时间:9/12/2020 访问量:15512

问:


想改进这个问题吗?更新问题,使其仅通过编辑这篇文章来关注一个问题。

3年前关闭。

外行术语来说,什么是不显眼的 Javascript?举个例子可以帮助我理解。

不显眼的 javascript

评论

10赞 Madhur Ahuja 12/19/2010
维基百科有好文章: en.wikipedia.org/wiki/Unobtrusive_JavaScript

答:

78赞 Sarfraz 12/19/2010 #1

查看维基百科文章:

“不显眼的 JavaScript”是一个通用的 JavaScript 的使用方法 网页。虽然这个词不是 正式定义,其基本原则 通常理解为包括:

  • 将功能(“行为层”)与网页的 结构/内容和呈现方式
  • 避免传统 JavaScript 问题的最佳实践 编程(如浏览器 不一致和缺乏 可扩展性)
  • 渐进式增强功能,以支持可能无法支持的用户代理 支持高级JavaScript 功能[2]

因此,它基本上是将行为或 javascript 与表示或 html 分开。

例:

<input type="button" id="btn" onclick="alert('Test')" />

这并不是不引人注目的javascript,因为行为和表现形式是混合的。不应该出现在 html 中,应该是 javascript 本身的一部分,而不是 html。onclick

通过上面的例子,你可以像这样不引人注目:

<input type="button" id="btn" />

JavaScript的:

var el = document.getElementById('btn');
el.onclick = function(){
  alert('Test');
};

那一次,我们用一个非常基本的例子将 javascript 与 html 分开。

注意:

不显眼的javascript还有更多内容,可以在维基百科文章中查看。

评论

1赞 Imran 12/19/2010
谢谢你提供了一个很好的例子,但为什么在 html 中使用 onclick=“alert('Test') 很糟糕?
7赞 Sarfraz 12/19/2010
@Imran:如果你仔细想想,原因有很多。便于携带,便于他人发现,可扩展性等。
0赞 Quentin 1/31/2020
这不是一个很好的例子,因为它无法提供“渐进式增强”。如果 JS 不起作用,那么你有一个按钮,点击时什么都不做。为了不显眼,要么应该将按钮添加到带有 JS 的 DOM 中(如果页面工作不需要它提供的功能),要么它应该是一个带有服务器端代码的提交按钮,以便在 JS 失败时将消息生成为新的页面加载。