帮助我理解 Unobtrusive JavaScript 的基本原理答案

【问题标题】：Help me to understand basic priciples of Unobtrusive JavaScript帮助我理解 Unobtrusive JavaScript 的基本原理
【发布时间】：2011-08-14 07:33:02
【问题描述】：

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

功能（“行为层”）与网页的分离结构/内容和展示
避免传统 JavaScript 编程的问题（如浏览器不一致和缺乏可扩展性）
逐步增强到支持可能不支持高级 JavaScript 的用户代理功能

我可以很容易地理解第一个。我也能理解第二个的avoid the problems of lack of scalability。我想知道 Unobtrusive JavaScript 如何帮助避免浏览器不一致。相反，有时突兀的方式可以帮助避免浏览器的不一致。例如，要将事件添加到某个元素，我应该以不显眼的方式执行此操作：

<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 方式更简单，不需要关心浏览器的不一致。那么您能否向我解释或向我展示任何示例，不显眼的方式如何帮助避免浏览器不一致。

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

Unobtrusive JavaScript 如何帮助做到这些？

【问题讨论】：

Why is using onClick() in HTML a bad practice?的可能重复
@Rich 这并没有回答我的问题。这些只是我已经知道的。 browser inconsistencies 事物或 advanced JavaScript functionality 事物的解释在哪里？
它解释了为什么“如你所见，Obtrusive 方式更简单，不需要关心浏览器不一致”是一个错误的陈述，但对于新手来说，这是一个容易错误的观察。维基百科的文章写的很烂，我不会去那里学 JavaScript。
@Andy 我不认为 Unobtrusive JavaScript 不好。那只是解释某些情况的示例。而且，我不知道维基百科的文章写得不好。如果这是真的，我现在可以理解了。
我是第一个告诉人们 jQuery 并不总是答案的人，但在这种特殊情况下它是。上面的事件处理非常适合使用不需要知道它是 addEventListener 还是 attachEvent 的框架。在 jQuery 中，它只是 $("#button").click(...) 或 $("#button").bind("click",...)

标签： javascript unobtrusive-javascript

【解决方案1】：

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

<input disabled>

或

<input disabled="disabled">

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

<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>

【讨论】：