【青训营】月影老师告诉我写好JavaScript的四大技巧——封装函数

告诉我写好JavaScript的四大技巧——封装函数"/>

【青训营】月影老师告诉我写好JavaScript的四大技巧——封装函数

如何写好JavaScript是每一个前端工程师一直以来在思考的问题，月影老师告诉我们一些写好JavaScript的原则，同时也教了一些我们如何写好JavaScript的技巧，今天来继续跟着月影老师学JavaScript吧~~

起步

今天我们来讨论函数封装，我们要把JavaScript代码写好，那一定要考虑代码的封装性，我们通过一个案例来学习学习函数封装的思想。

来看一个状态切换交通灯案例

案例：异步状态切换(交通灯)

这个例子的具体需求是，模拟交通灯信号，每隔一段时间，显示不同的颜色，循环切换状态

未封装：菜鸟版

这个拿给我们新手菜鸟，可能会这样写：

const traffic = document.getElementById('traffic');(function reset(){traffic.className = 's1';setTimeout(function(){traffic.className = 's2';setTimeout(function(){traffic.className = 's3';setTimeout(function(){traffic.className = 's4';setTimeout(function(){traffic.className = 's5';setTimeout(reset, 1000)}, 1000)}, 1000)}, 1000)}, 1000);
})();

上面的这段菜鸟版代码虽然实现了我们的需求，但是它在设计上有很大的缺陷

第一个缺陷：reset函数访问了外部环境traffic，而它在函数内部不具有意义
这么做有两个问题：

1. 如果我们修改了HTML代码，元素不叫做traffic了，这个函数就不工作了。
2. 如果我们想把这个函数复用到其他地方，我们还得在那个地方重建这个traffic对象。

第二个缺陷是 回调地狱，我们要手写那么多次回调套回调，如果要增加或者减少状态，会很麻烦

出现这些问题的原因就是我们没有做到对函数进行封装！！！

所以，我们要封装函数，不能直接将traffic这个对象直接写在函数中，也不能将状态切换的具体数据直接写在函数中

封装数据：数据抽象版

我们先对数据进行抽象，或者可以说将数据从函数中解耦出来~

首先，我们将traffic变量作为函数的参数传入我们的start函数中，这样函数体内部就没有完全来自