这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、本堂课重点内容：
本节课学习知识内容：
- JavaScript 编码原则之各司其职
- JavaScript 编码原则之组件封装
- JavaScript 编码原则之过程抽象
二、详细知识点介绍：
- 本堂课介绍了JavaScript 好代码的标准、HTML/CSS/JS 各司其责、组件的定义解析及特征、组件封装基本方法、过程抽象概念、高阶函数使用模式、JavaScript 编程范式
三、实践练习例子：
- 通过深夜食堂三种版本代码书写讲解了javaScript编码原则之各司其职，以下是以JS改进版本的代码，实际上可以通过对CSS的控制实现页面样式的切换。
const btn=document.getElementById('btn');
btn.addEventListener('click', (e) =>{
const body=document.body;
if(body.className !== 'night'){
body.className='night';
}else{
body.className='';
}
});
- 通过对轮播图的制作讲解组件封装。
- 使用CSS绝对定位将图片重叠在同一个位置；使用API实现行为功能:getSelectedItem(),getSelectedItemIndex(),slideTO(),slidePrevious();；实现控制流；
- 通过操作次数限制例子讲解过程抽象概念；
- 列举了几个高阶函数进行描述
function throttle(fn, time = 200){
let timer;
return function(...args){
if(timer == null){
fn.apply(this, args);
timer = setTimeout(() => {
timer = null;
}, time)
}
}
}
btn.onclick = throttle(function(e){
circle.innerHTML = parseInt(circle.innerHTML) + 2;
circle.className = 'Success';
setTimeout(() => circle.className = '', 300);
});
该代码参考教程重新书写页面的代码
四、课后个人总结：
- 为什么使用高阶函数？
- 将函数作为参数传入或作为结果返回的函数，使用高阶函数可以实现函数分离，高阶函数是创建抽象的强大工具，换句话说，就是要找到模式中的模式。
- 总结
- 在学习JS课程之后，对JS更加深入，边学习基础知识，听着课程重做了每一个案例，以实操的方式进一步了解JS代码的逻辑及规范。在之后的学习中将多做更多的例子巩固JS知识。
五、引用参考：
