提问人：Dorian Fabre 提问时间：1/30/2012 最后编辑：divibisanDorian Fabre 更新时间：8/31/2018 访问量：908
实现不显眼的 Javascript
Implementing Unobtrusive Javascript
问：
我正在重新设计一个旧网站，并专注于使 Javascript/jQuery 尽可能不显眼。我正在寻找有关项目一部分的一些建议：UJ 要求，如果在浏览器中关闭了 Javascript，用户仍然可以使用所有网站内容。我的网站的一部分有一大堆项目。列表中的每个项目都有自己的描述，默认情况下使用 CSS display：none 将其隐藏。单击该项目会使用 jQuery .toggle（）：切换描述的可见性，因此无法使用 Javascript 的人（无论出于何种原因）永远不会看到它。如果我使用 Javascript/jQuery 而不是 CSS 来隐藏描述，它们在页面加载时都是暂时可见的，这是我想避免的。那么最好的解决方案是什么呢？
答：
3赞
Fabrizio Calderan
1/30/2012
#1
基本上，您可以在元素中插入一个类“no-js”，如下所示html
<html class="no-js" lang="en">
如果在客户端上启用了 JavaScript，您很快就会删除该类（使用 modernizr 或更简单的代码片段，如
<head>
<script>
(function(d) {
d.className = d.className.replace(/(^|\b)no-js(\b|$)/, 'js');
}(document.documentElement));
</script>
...
</head>
通过这种方式，您可以避免 FOUC（无样式内容的闪光）只是在 css 规则中使用 和 类，如下所示：.no-js.js
.yourlistitems {
display: block;
}
.js .yourlistitems {
display: none;
}
H5BP 也使用这种方法
请注意，您实际上不需要在每条规则前面添加类：从“渐进式增强”和“不显眼的 JavaScript”的角度考虑，您将首先为一个在没有 JavaScript 的情况下也能工作的页面编写代码和样式，然后您将添加功能（和样式特异性，在类前面）.no-js.js
评论
0赞
Dorian Fabre
1/30/2012
谢谢 - 这很完美。您能否解释一下函数中的 /（^|\b） 和 （\b|$）/ 到底是做什么的？
0赞
Fabrizio Calderan
1/30/2012
该正则表达式查找不属于其他类的确切类“no-js”作为子字符串（如 xxxno-js 或 no-jsxxxx）
1赞
Sam Greenhalgh
1/30/2012
#2
你有没有想过使用一种类似于 Modernizr 实现的方法？
CSS 类通过脚本添加到 HTML 标记中，该脚本会导致不同的 CSS 选择器匹配。
<html>
<head>
<!--
Putting this script in the head adds the "js"
class to the html element before the page loads.
-->
<script type="text/javascript" language="javascript">
document.documentElement.className = "js";
</script>
<style type="text/css">
/*
Only apply the hidden style to elements within the HTML element
that has the js class
*/
.js .description {display:none;}
</style>
</head>
<body>
<span class="description">Example</span>
</body>
</html>
0赞
pong
1/30/2012
#3
由于潜在的异步操作，无法判断这是否真的有帮助，但您可以在前面添加一个，您可以使用纯 JS 而不是 jQuery 将所有相关显示切换到其中。<script><style> with display: (block|inline|whatever)none !important
因此，在 JS 的情况下，CSS 显示设置将被事先覆盖。
评论