Question

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

从网页中分离功能（“行为层”）结构/内容和介绍
避免这种情况的最佳做法传统JavaScript编程的问题（如浏览器不一致和缺乏可扩展性）
逐步增强支持可能不支持高级JavaScript的用户代理功能

我很容易理解第一个。我也能理解第二个avoid the problems of lack of scalability。我想知道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方式更简单，不需要关心浏览器的不一致性。那么你能解释或向我展示任何不引人注目的方式可以帮助避免浏览器不一致的例子。

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

Unobtrusive JavaScript如何帮助完成这些操作？

Answer 1

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

之类的东西

<input disabled>

或

<input disabled="disabled">

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

Answer 2

您可以使用HTML属性，例如Arash说，但它不是W3c有效。如果您将通过W3c验证，最好使用Javascript

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

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

3 个答案: