前端与 JavaScript| 青训营笔记

138 阅读3分钟

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

前端-JavaScript

今天学习了月影老师的相关课程,收获还是非常巨大的。

一、本堂课重点内容

本堂课核心是围绕着 如何写好JavaScript来讲的,月影老师讲的非常深入,非常有深度。

老师首先讲了一些分工方面的知识,即:HTML负责内容,CSS负责样式,JS负责行为等,不要让JS做CSS的事情,这个思想是很有深度的,各司其职的代码,能更好的实现效果,可维护性和可读性也更高。

比如,在页面的黑夜模式/白天模式的切换上,老师列举了纯js切换,CSS+JS切换和纯CSS切换三种的代码,其中的思想和实现以及不同,由浅入深,层层递进。又列举了轮播图的demo。

然后又讲了防抖和节流的知识,还有面向过程抽象的的高阶函数,以及基于这衍生的几个常用的高阶函数,比如Once,Throttle,Debounce,Consumer/2,Iterative等,并一一列举,一一实现,一一讲解,非常详细,非常深入,非常细节。

并提供了大量的,详细的,具体的例子,涵盖了使用的不同的,具体的场景,比如只能点击一次的按钮,防抖的应用,节流的应用等等。

最后老师提供了很多例子来讲解了编码的原则,以及组件化的思想。提供了很多真实的生动的例子,并一一深入讲解,一些例子还提供了多种不同的,优秀的重构方式,实在是讲解的太好了。

二,详细知识点介绍

HTML,CSS,JavaScript各司其职的思想,组件化的思想,进行一些插件的封装,防抖和节流的知识,还有面向过程抽象的的高阶函数,以及基于这衍生的几个常用的高阶函数,比如Once,Throttle,Debounce,Consumer/2,Iterative等,JS的编码规则和优化。

三,实践的例子

老师讲了很多的例子,比如:背景白天/黑夜模式的切换,轮播图的制作,优化及插件化的轮播图。防抖,节流的例子,单次点击按钮,节流式的更新页面,鼠标悬停时一个小鸟跟随的动画等等,还有一些防抖的点击,定时间的数字的增长,开源包leftpad的实现及两种优化,交通灯,红包,洗牌等等。

四,课后个人总结

虽然JS是前端开发者每个人都要学习的基本功,但是想学到月影老师这样的开发思想和优雅的编码还是需要更多的实践和思考的,课上的例子可以看到对应的码上掘金的地址,个人而言的话,我会记下来地址,然后对照月影的老师的源码,去体会月影老师的编码思想和风格。