帮助我理解 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>

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

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

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

Answer 1

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

<input disabled>

or 这样

<input disabled="disabled">

的东西可以在不显眼的 javascript 中更一致地处理。

Answer 2

你可以使用 HTML 属性，就像 Arash 所说的那样，但它不是 W3c 有效的。
如果你要通过W3c验证，最好使用Javascript

Answer 3

我通常更喜欢使用简单而精确的 Polyfill。
对于您的示例，您可以只包含 addEventListener polyfill (https://gist.github.com/eirikbacker/2864711< /a>) 然后使用标准方法：

<div id="button">Button</div>
<script type="text/javascript" src="./polyfills/addEventListener-polyfill.js"></script>
<script>
    var button = document.getElementById('button');

    function buttonClick() {
        // do something
    }

    button.addEventListener('click', buttonClick, false);
</script>