这是我参与「第四届青训营 」笔记创作活动的第4天
前三节课讲了一些html和css的基础，更深入的需要靠自己再去学习。这次课跟着月影老师学了用户的行为————JavaScript。
众所周知，JS是能不能学好前端的重中之重了，JS的基础一定要打的牢固再言其他。
那么要想学好JS，就要知道如何正确规范地写JavaScript。
首先JavaScript需要遵循三个原则：、
- 各司其职
- 组件封装
- 过程抽象
写好JS —— 各司其职
什么叫“各司其职”，通俗易懂：html/css/js分开，各自负责各自的部分，比如页面内容的事情交给html，样式的事情交给css，交互行为交给js。
例子：深夜食堂
写一段代码，来控制页面的模式：
深夜模式 -> 日间模式：点击月亮图标，图标由月亮变为太阳，背景由黑色变为白色，字体由白色变为黑色；日间模式变为黑夜模式则相反。
模式1：
先获取到button按钮，给它添加一个监听事件，判断body元素，利用JS去修改页面的样式及表现，这样能够实现效果：
// 获取按钮
const btn = document.getElementById("modeBtn");
// 给按钮添加点击监听
btn.addEventListener("click", (e)=>{
// 获取body元素
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做了css的事情。很多时候我们的惯性思维也是这么去做，这种方法所造成的后果会比较麻烦：比如如果突然要增加一些新的样式需求的时候，代码太多就显得过于糅杂。
模式二：
根据类去判断：先默认为白天状态，在css里提前写好夜晚的class属性night，当点击按钮时去判断body元素中是否有nigth这个类名，若没有的话则为他添加一个class属性night；若有则删除night属性。
// 获取按钮
const btn = document.getElementById("modeBtn");
// 给按钮添加点击监听
btn.addEventListener("click", (e)=>{
// 获取body元素
const body = document.body;
if(body.className !== 'night'){//判断是否有night类
body.className = 'night';// 没有night类名，则是白天，添加night类
}else{
body.className = '';// 当前是是晚上，去除night类
}
});
结论：这种方法就对应了“各司其职”这个原则，JS做着监听事件、添加类名等事情，样式全部由css负责。
总结：
月影老师讲的js课程很好，他一开始不是从js的一些语法结构说起，而是说了如何写js，也就是写js的原则。我们常常在写需求时都会忽略这一些东西，像今日“各司其职”的例子，虽说以模式一也能很好的实现需求，但是却给之后的维护或者开发都会造成一定的影响，若采用第二种写法，想要其他模式还可再为页面css添加一个class属性作为一种模式。之后我会更加注重这一方面的细节，争取成为一个能写出优质代码的人！！！！！
