用外行人的话说,什么是 Unobtrusive Javascript?

IT技术 javascript unobtrusive-javascript
2021-02-20 01:18:23

用外行人的话说,什么是 Unobtrusive Javascript?一个例子会很好地帮助我理解。

1个回答

查看维基百科文章:

“Unobtrusive JavaScript”是在网页中使用 JavaScript 的通用方法。虽然该术语没有正式定义,但其基本原则通常被理解为包括:

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

所以它基本上是将行为或 javascript 与演示或 html 分开。

例子:

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

这不是不引人注目的 javascript,因为行为和演示是混合的。onclick不应该出现在HTML,应该是JavaScript的本身不是HTML的一部分。

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

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

JavaScript:

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

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

笔记:

可以在维基百科文章中查看更多不引人注目的 javascript。

感谢一个很好的例子,但为什么在 html 中有 onclick="alert('Test') 不好?
2021-04-21 01:18:23
@Imran:如果您考虑一下,原因有很多。便于携带、便于他人查找、可扩展性等。
2021-04-28 01:18:23
这不是一个很好的例子,因为它无法提供“渐进增强”。如果 JS 不起作用,那么您有一个按钮,单击时什么也不做。为了不显眼,该按钮应该使用 JS 添加到 DOM(如果它提供的功能不需要页面工作),或者它应该是一个带有服务器端代码的提交按钮,以生成消息作为新页面加载,如果JS 失败。
2021-05-07 01:18:23