这是我参与「第四届青训营」笔记创作活动的第4天
前言
基础不用看，直接上来做就行。——JiaFeiMiao
众所周知作为一名coder，你不能所有东西都等着人来教你，所以如果你不会JS基础的话，直接移步JavaScript 教程 | 菜鸟教程 (runoob.com)就可以了。
让前端的各种组件各司其职
众所周知前端是有三件套的。那么对于这三件套的协调就成了在实际工作中非常重要的内容。JS只是做脚本的，所以你最好不要直接用JavaScript去控制样式表，这是非常不好的习惯。假设我们现在有一个切换页面的昼夜模式的脚本：
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 = '🌞';
}
});
你会发现我们是通过脚本的代码直接改变了颜色，这样的习惯其实是很不好的。我们可以优化一下：
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(body.className !== 'night') {
body.className = 'night';
} else {
body.className = '';
}
});
现在我们是通过修改body元素的class属性，并且在样式表中根据对应的类名调整页面的样式。不过还可以进一步优化，因为我们根本不需要用JS脚本就可以达到我们想要的效果：
<input id="modeCheckBox" type="checkbox">
<div class="content">
这里是正文
</div>
<style>
#modeCheckBox:checked + .content {
background-color: black;
color: white;
}
</style>
所以我们可以做出以下的总结：HTML/CSS/JS应该各司其责，应当避免不必要的由JS直接操作样式，可以用class来表示状态，纯展示类交互寻求零JS方案。
组件封装
如果我们想做一个首页的轮播图，我们应该怎么弄呢？那么最简单的一个思路是：我们用一个无序列表把所有的图片先展示出来，然后通过CSS把所有图片定位在一个位置，每隔一段时间切换相关图片的透明度。主要流程是：结构设计、展现效果、行为设计。
你会发现我们的代码耦合度太高，比如我想调整图片的地址或者调整每次轮换的时间之类，我们都需要去修改源代码，并且你需要三个部分一起动，这是不好的。
我们需要解耦，可以把各部分之间通过依赖注入的方式建立联系；也可以将HTML模板化，变的更利于扩展；也可以将组建的通用模型抽象出来。
过程抽象
JS作为一门函数式编程语言，我们可以对函数进行很多非常有用的操作。比如说我们在页面中有很多“只做一次”的操作，我们就可以把所有只做一次的操作剥离出来，放到一个对应的函数里，我们称其为过程抽象。
function once(fn) {
return function(...args) {
if(fn) {
const ret = fn.apply(this, args);
fn = null;
return ret;
}
}
这种东西叫做高阶函数，它的特点是：以函数作为参数、以函数作为返回值。一般被用来做函数装饰器（函数中调用其他的函数）。这就属于软件工程学科的话题了，感兴趣的同学可以自己搜索一下相关的知识。
总结
因为这期课程抽象性和理论性更加的高，所以还是建议大家系统学习一下设计模式和软件工程，就可以在自己的实际工作中应用了。