这是我参与「第四届青训营 」笔记创作活动的的第3天

前言

这篇文章是我跟着青训营学习js初步理解内容

写好js的一些原则

1. 各司其职。 Html css js各部履行各部的职责。\
2. 组件封装。
   好的ui组件具有正确性，扩展性。复用性
3. 应用函数式思想.

例子:

例一

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 = '';
}
})

第1个就是黑背景，白文字，把它变成一个太阳的标志。然后就是相互，转换一个白天和晚上的模式。

例二

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
})

把css和js分开，使他们各是其职，让让后面的人更容易看懂，且更易修改

例三

  <input id="modeCheckBox" type="checkbox">
<div class="content">

<label id="modeBtn" for="modeCheckBox">

深夜食堂

<div class="pic">
<img src="p2.ssl.qhimg.com/t0120cc2085…       
<div class="description">

这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。

#modeCheckBox {
display: none;
}

#modeCheckBox:checked + .content {
background-color: black;
color: white;
transition: all 1s;
}
单纯的样式行为也可以单用css和html组成。

总结

写好js的基础就是搞清楚各个职能部门所分别负责的是什么任务