[ JavaScript封装思想 | 青训营笔记]这是我参与「第五届青训营」伴学笔记创作活动的第 3 天写好Jav

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

js一直都是前端三件套中的一个重难点，有一个好的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 = '';
  }
});

那么上面这次呢？会比之前的好一点吧，可以看出改变了样式内容添加了一个新的样式night

所以之前的代码你发现了一些什么问题呢？
之前的代码频繁的使用了js去修改样式，但是我们知道js是处理程序逻辑的，css才是处理样式的，所以我们让js干了许多不属于它的工作。

所以让代码各司其职是我们第一个要注意的方面。

组件封装

轮播图我相信一个前端程序员都应该有写过吧

但是你是否有考虑有着封装性、正确性、扩展性、复用性的轮播图组件？
插件化轮播图例子地址：code.h5jun.com/weru/3/edit…
模板化轮播图例子地址：code.h5jun.com/zuve/3/edit…
组件化轮播图例子地址：code.h5jun.com/vata/4/edit…

我们可以看一下上述三个例子分别有什么区别可以看出到组件化其实就是利用了函数去抽离功能使得组件有更好的复用性，这是每一个程序员都应该掌握的思想。

高阶函数

高阶函数本质上其实就是操作其他函数的函数。简单点说就是，高阶函数就是一个将函数作为参数或者返回值的函数。

例如map, filter和reduce是都是原生JavaScript的高阶函数，当然还有很多很多高阶函数...

所以，我们如果想遍历打印一个数组中的所有值，我们不使用高阶函数可以使用循环去打印出来。如果我们使用高阶函数map就可以直接遍历打印出来，其中其实本质也是使用了循环，但你现在只用是用map就可以实现此功能。

总结：高阶函数和普通函数其实本质上是一样的，不过它的区就是接受函数作为参数，或者返回值是函数，那么这就是高阶函数。