javascript - 帮助我理解 Unobtrusive JavaScript 的基本原理

Question

我从 Wikipeia/Unobtrusive_JavaScript 找到了这些 Unobtrusive JavaScript 的基本原则:

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

我很容易理解第一个。我也可以理解第二个的避免缺乏可扩展性的问题。我想知道 Unobtrusive JavaScript 如何帮助避免浏览器不一致。相反，有时Obtrusive方式可以帮助避免浏览器不一致。例如，要向某个元素添加事件，我应该以不引人注目的方式执行此操作:

<div id="button">Button</div>
<script>
var button = document.getElementById('button');

function buttonClick() {
  // do something
}

if (button.addEventListener) 
  button.addEventListener('click', buttonClick, false);
else
  button.attachEvent('onclick', buttonClick);
</script>

如果我以强制的方式这样做:

<div id="button" onclick="buttonClick()">Button</div>
<script>
function buttonClick() {
  // do something
}
</script>

正如你所看到的，Obtrusive 方式更简单，不需要关心浏览器不一致。那么您能否解释或向我展示任何示例，Unobtrusive 方式可以如何帮助避免浏览器不一致。

还有第三个。我可以以强制的方式进行渐进增强。例如，我仍然可以使用 Modernizr以一种突兀的方式。

Unobtrusive JavaScript 如何帮助实现这些目标？

Answer 1

嗯，你说的是真的，但是还有一些其他 HTML 属性不那么标准。例如类似的东西

<input disabled>

或

<input disabled="disabled">

可以用不显眼的 JavaScript 更一致地处理。