无屏闪的黑夜模式实现
DNXRZL
2022年06月27日 · 阅读 1,157
小说一下
黑夜模式是我一直想要实现的功能，但之前写的黑夜模式在刷新时会有短暂的切换过程，会导致屏闪，所以，我就一直没有加入这个功能，今天捣鼓了一下，发现了一个方法实现的黑夜模式近乎完美，下面就来讲解一下。
原理分析
常规做法：等文档加载完成再执行js代码切换黑夜模式，有屏闪。
我的做法：加载到body标签后立即执行js代码，为其添加黑夜模式的类，无屏闪。
网页的加载是从上往下的，并且遇到<script>标签包裹的js代码会立即执行，然后接着加载下面内容，这样的话，我们就可以在<body>标签下面放<script>包裹的黑夜模式代码，执行后，会给<body>标签添加一个class=“类”，这个类就是黑夜模式的css样式，这样，一个完美的黑夜模式就实现了
一个例子
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--黑夜模式的核心代码-->
<script src="darkMode.js"></script>
</head>
<body>
<script>
//判断之前有没有开启过黑夜模式，有则恢复之前的状态
if(darkMode.getFlag('darkmode') != null){
darkMode.firstDark();
}
<script>
............
</body>
</html>
黑夜模式Js
const darkMode = {
//下面三个函数分别是设置、移除、获取黑夜模式标志量的函数
setFlag: function () {
localStorage.setItem("darkmode", "yes");
},
removeFlag: function () {
localStorage.setItem("darkmode", "no");
},
getFlag: function (key) {
return localStorage.getItem(key);
},
setDark: function () {
$("body").addClass("darkMode"); //为body添加类darkMode类
},
removeDark: function () {
$("body").removeClass("darkMode"); //移除body的darkmode类
},
firstDark: function () { //每次刷新页面时对黑夜模式状态的判断和恢复
if (this.getFlag("darkmode") == "yes") {
this.setDark();
} else {
this.removeFlag();
this.removeDark();
}
},
clickDark: function () { // 按钮点击切换黑夜模式
$(".darkButton").on("click", () => {
if (this.getFlag("darkmode") == "no") {
this.setFlag();
this.setDark();
} else {
this.removeFlag();
this.removeDark();
}
});
},
};
!(function () {
document.addEventListener("DOMContentLoaded", () => {
darkMode.clickDark();
});
})();