这是我参与「第五届青训营 」笔记创作活动的第2天，今天主要学习了JavaScript，相关知识点如下。 1.JavaScript编码原则之各司其责，比如课程中的深夜食堂切换白天/夜间模式的例子。如果直接在js中去修改css样式，虽然可以实现业务需求，但是违背了各司其责原则，让整个代码的可维护性变差；但是如果js只是控制添加css类名，而由css去控制页面样式，这样可以做到各司其职，整个页面的代码就显得简洁并且可维护性会更高；更好的解决办法就是用纯css来完成页面的切换，不涉及js交互，首先页面中有一个隐藏的选择框，把按钮用label代替，如果label的for属性值和选择框的id一样的话，那么点击label就相当于点击input选择框，结合伪类选择器来对content进行样式的修改。 2.JavaScript编码原则之组建封装，插件化，模板化，抽象化。 3.JavaScript编码原则之过程抽象，高阶函数就是接收一个函数并且返回一个函数，常见的高阶函数由once，debounce和throttle等等。 4.防抖函数的实现：
function debounce(fn,wait){
var timer = null;
return function(){
//保存一份this
var self = this, args = [...arguments];
//判断如果此时timer不为null，则清除timer
if(timer){
clearTimeout(timer);
timer = null
}
//设置定时器，让其在时间间隔后执行
timer = setTimeout(()=>{
fn.apply(self,args);
timer = null
},wait)
}
}
5.节流函数的实现
function throttle = (fn,wait){
let timeout = null;
return function(){
let self = this
let args = [...arguments]
if(!timeout){
timeout = setTimemout(()=>{
fn.apply(self,args)
timeout = null
},wait)
}
}
}
6.对于防抖与节流函数的理解： 防抖就是事件被触发n秒后在执行回调，如果在这n秒内事件又被触发，则重新进入计时，可以用来避免用户多次点击向后端发送多次请求 节流就是规定一个单位时间，在这个单位时间之内只能有一次触发事件的回调函数执行，如果单位时间内被触发多次，则只有第一次会生效，节流函数可以使用在scroll函数的事件监听中，降低事件的调用频率
