写好JS的一些原则：各司其责、组件封装、过程抽象
各司其责
例子：深夜食堂 写一段JS,控制一个网页，让它支持浅色和深色两种浏览模式。该怎么实现？
版本一：用JS直接操纵CSS，修改背景和字体颜色code.juejin.cn/pen/7108183…
`
深夜食堂 🌞深夜食堂
这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈 眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6] 。
`
body, html { width: 100%; height: 100%; padding: 0; margin: 0; overflow: auto; } body { padding: 10px; box-sizing: border-box; } div.pic img { width: 100%; } #modeBtn { font-size: 2rem; float: right; border: none; background: transparent; }
const btn = document.getElementById('modeBtn'); btn.addEventListener('click', (e) => { const body = document.body; if(e.target.innerHTML === '🌞') { body.style.backgroundColor = 'black'; body.style.color = 'white'; e.target.innerHTML = '🌜'; } else { body.style.backgroundColor = 'white'; body.style.color = 'black'; e.target.innerHTML = '🌞'; } });
这段代码的作用是切换页面的日夜模式，并实时更新按钮的显示内容和页面样式。
版本二：JS修改ClassName 更方便其他人员维护
`body, html { width: 100%; height: 100%; max-width: 600px; padding: 0; margin: 0; overflow: hidden; } body { padding: 10px; box-sizing: border-box; transition: all 1s; } div.pic img { width: 100%; } #modeBtn { font-size: 2rem; float: right; border: none; outline: none; cursor: pointer; background: inherit; }
body.night { background-color: black; color: white; transition: all 1s; }
#modeBtn::after { content: '🌞'; } body.night #modeBtn::after { content: '🌜'; }`
这部分代码使用伪元素选择器::after，表示在按钮元素后添加一个伪元素。然后使用content属性设置伪元素的内容为"🌞"，即按钮的内容默认显示为"🌞"。 这部分代码使用了复合选择器，选择具有class为"night"的body元素内的id为"modeBtn"的按钮后的伪元素。然后使用content属性设置伪元素的内容为"🌜"，即在夜间模式下按钮的内容显示为"🌜"。
通过这段代码，可以实现根据页面的"night" class的切换来更新按钮的内容，并且在CSS中通过content属性来显示不同的图标。注意，这段代码中的.night是一个自定义的class，可能是通过JavaScript脚本动态地添加或移除的，以切换夜间模式。 **
const btn = document.getElementById('modeBtn'); btn.addEventListener('click', (e) => { const body = document.body; if(body.className !== 'night') { body.className = 'night'; } else { body.className = ''; } });
版本三：纯CSS版本 （样式修改是CSS的工作，没有必要用JS）
`body, html { width: 100%; height: 100%; max-width: 600px; padding: 0; margin: 0; overflow: auto; }
body { box-sizing: border-box; }
.content { height: 100%; padding: 10px; transition: background-color 1s, color 1s; }
div.pic img { width: 100%; }
#modeCheckBox { display: none; }
#modeCheckBox:checked + .content { background-color: black; color: white; transition: all 1s; }
#modeBtn { font-size: 2rem; float: right; }
#modeBtn::after { content: '🌞'; }
#modeCheckBox:checked + .content #modeBtn::after { content: '🌜'; }`
body { box-sizing: border-box; }
这段代码设置body元素的box-sizing属性为border-box，这意味着元素的宽度和高度包括了边框和内边距的计算。
.content { height: 100%; padding: 10px; transition: background-color 1s, color 1s; }
这部分代码定义了一个类名为.content的元素的样式。它的高度设置为100%，内边距为10像素，并且具有一个过渡效果。当背景颜色或文字颜色变化时，过渡时间为1秒。
div.pic img { width: 100%; }
这段代码选择所有位于div元素下的pic类名的img元素，并将它的宽度设置为100%，以确保图片在其容器中自适应宽度。
#modeCheckBox { display: none; }
这段代码选择id为modeCheckBox的元素，并将其显示设置为none，即隐藏该复选框。
#modeCheckBox:checked + .content { background-color: black; color: white; transition: all 1s; }
这部分代码使用了复合选择器，选择被选中(:checked)的id为modeCheckBox元素后的.content类名元素，并为其设置背景颜色为黑色，文字颜色为白色，并带有1秒的过渡效果。
#modeBtn { font-size: 2rem; float: right; }
这段代码选择id为modeBtn的元素，并设置其字体大小为2rem，右浮动。
#modeBtn::after { content: '🌞'; }
这部分代码使用伪元素选择器::after，将在id为modeBtn的元素后添加一个伪元素，并设置其内容为"🌞"，即按钮的内容默认显示为"🌞"。
#modeCheckBox:checked + .content #modeBtn::after { content: '🌜'; }
这部分代码选择被选中的modeCheckBox元素后的.content元素下的id为modeBtn元素后的伪元素，并将其内容设置为"🌜"，即在夜间模式下按钮的内容显示为"🌜"。
以上是这段CSS代码的解释，它定义了基本的布局、页面样式以及根据复选框的选择来切换夜间模式的样式效果。
深夜食堂 结论：
- HTML,CSS,JS 各司其责 结构、表现、行为分离
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
补充：CSS position 相对定位和绝对定位CSS position 相对定位和绝对定位 | 菜鸟教程 (runoob.com)
CSS background-color 属性
