具有渐进增强功能的示例

Question

我想知道这个段落究竟是什么意思？

它是从网站上获取内联脚本的缺点

可访问性差：说到内联JavaScript代码，例如in 上面的例子，它适用于没有任何元素的元素内置后备交互处理程序

链接：https://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

Answer 1

具有渐进增强功能的示例

<a href="important-message.html" onclick="alert('Important message'); return false;">Click me</a>

此处，如果JavaScript失败，则链接正常工作，并通过从服务器加载新页面来显示重要消息。

（如果JavaScript成功，则取消单击默认行为并且不遵循链接）。

链接的内置交互处理程序是“转到URL”。通过将JavaScript 分层，我们可以将其用作后备。

没有渐进增强的示例

<button type="button" onclick="alert('Important message');">Click me</a>

在这里，如果JavaScript失败，那么根本没有任何事情发生。它只是一个没有做任何事情的按钮。

这实际上与内联的JavaScript没有任何关系。从脚本元素加载并与addEventListener绑定的现代JavaScript会出现同样的问题。

Answer 2

<div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
    <div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
        <span id="get-shit" onclick="callSomeFunction()">News</span>
    </div>
</div>

他说，在上面的函数中，如果callSomeFunction，将页面重定向到其他页面......但由于某种原因（由于网络错误无法加载）callSomeFunction未加载到页面中，那么它将是一个无效的死链接，所以应该以这样的方式实现，即没有javascript它也应该合理地工作......

甚至浏览器都提供了为用户禁用javascript的配置，因此在这种情况下，上面的链接将无效

所以他说使用下面的代码，

<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
<script type="text/javascript" src="js/base.js"></script>

<div id="container">
    <div id="navigation">
        <a id="get-news" href="news-proper-url">News</a>
    </div>
</div>


/*
    CSS code, in separate file (base.css)
*/
#container {
    width: 800px;
    margin: 1em auto:
    font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif;
}

#navigation {
    float: left;
    width: 400px;
    padding: 1em 2em;
    font-size: 0.9em;
}

/*
    JavaScript code, in separate file (base.js)
*/
window.onload = function () {
    document.getElementById("get-news").onclick = function () {
        // Get news through AJAX
    };
}

此处，如果未加载javascript，则点击“新闻”会将您重定向到新页面，

如果加载了javascript，他将发送一个AJAX请求并在同一页面加载新闻

有关javascript不可用的案例列在同一页面

现在不是每个人都有JavaScript吗？

第一：不，他们没有。第二：有些人故意将其关掉（因为   例如，NoScript Firefox扩展已经有3100万次下载   到这个日期）。第三，往往不是最终用户，而是   一些他们无法控制的外部环境   范围或其他，导致JavaScript不可用。这些因素   是：

防病毒程序和防火墙的版本有点过于苛刻   JavaScript安全判断。公司代理服务器过滤掉   代码（例如，阅读有关AJAX和   辅助功能）。其他公司互联网访问设置阻止   正确的JavaScript执行。

有内联JS的缺点

2 个答案:

具有渐进增强功能的示例

没有渐进增强的示例