这是我参与「第五届青训营 」笔记创作活动的第3天，开始发课堂笔记~

一、本堂课重点内容：

• 如何写好JavaScript

  • 各司其责
  • 组件封装
  • 过程抽象

• 写代码应该关注的要点

二、详细知识点介绍：

• 各司其责（目的是改动功能时便捷改动）

• 组件封装

• 过程抽象（用来处理局部细节控制的一些方法，函数式编程的应用）

  • 高阶函数，常作为函数装饰器。以函数作为参数和返回值的高阶函数once为例，把“让某事件只执行一次”的函数抽出来，可重复使用。尽量多使用纯函数，减少非纯函数，增加可维护性。
  • 编程范式：1.命令式，强调怎么做2.声明式，强调做什么，可拓展性强

• 写代码应该关注的要点

三、实践练习例子：

• • 利用原生 JS 实现电商网站轮播图
• 常用的高阶函数：

  • once Once{$[target=_blank]}

  • throttle节流，如高频触发事件减耗 Throttle{$[target=_blank]}

  • debounce防抖，如特定的自动保存Debounce{$[target=_blank]}

  • consumer如高频点击元素，同步变异步 2{$[target=_blank]}

  • iterative可迭代，如同时操作多个元素Iterative{$[target=_blank]}

• 声明式编程

四、课后个人总结：

• 本章知识点较容易掌握，入门级难度。
• 老师讲解思路发展较快需要反复观看。其中组件封装里插件化解耦的方法为新接触（将控制元素取成插件，插件与组件之间通过依赖注入方式建立联系

            const controller = slider.container.querySelector('.slide-list__control');
            if(controller){
              const buttons = controller.querySelectorAll('.slide-list__control-buttons, .slide-list__control-buttons--selected');
              controller.addEventListener('mouseover', evt=>{
                const idx = Array.from(buttons).indexOf(evt.target);
                if(idx >= 0){
                  slider.slideTo(idx);
                  slider.stop();
                }
              });

五、引用参考：

• 本文参考前端入门-基础语言篇-跟着月影学Javascript课堂讲述内容，所有截图来自视频截图。