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

「深入了解JavaScript」

写好JS的一些原则（本节课学习主线）：

• 各司其责：让HTML，CSS和JS职能分离
• 组件封装: 好的UI组件具备正确性，扩展性，复用性
• 过程抽象：应用函数式编程思想

一.各司其责

• 应当避免不必要的由JS直接操作样式
• 可以用class表示状态
• 纯展示类交互需求零JS方案

---

二.组件封装

• 结构设计——定义HTML结构
• 展现效果——定义CSS样式
• 行为设计——
  • 定义JS API（功能）
  • 定义JS event（控制流）：使用自定义事件来解耦

如何优化

• 重构：插件化

  • 将控制元素抽取成插件

  • 插件与组件之间通过依赖注入方式建立联系

如何进一步优化...

• 重构：模板化
  • 将HTML模板化，更易于拓展

如何再进一步优化...

• 抽象：组件框架

  • 将组件通用模型抽象出来

老师总结： 组件设计的原则：封装性，正确性，扩展性，复用性; 实现组件的步骤：结构设计，展现效果，行为设计; 三次重构：插件化->模板化->抽象化

三.过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

过程抽象举例：为了能够让"只执行一次"的需求覆盖不同的事件处理，我们将这个需求剥离出来，这个过程我们成为过程抽象

• once单次执行：

function once(fn){
    return function(...args){
        if(fn){
               const ret=fn.apply(this,args);
               fn =null;
               return ret;
        }
 }

• Throttle 节流函数

function throttle(fn,time=500){
    let timer;
    return function(...args){
        if(timer===null){
               fn.apply(this,args);
               timer =setTimeOut(()=>{
                   timer=null
               },time)
        }
 }

• debounce防抖函数

function debounce(fn，dur){
   dur=dur||100;
   let timer;
   return function(...args){
       clearTimeOut(timer);
       timer =setTimeOut(()=>{
                   fn.apply(this,args);
              },dur)
      }
}

• consumer 延时函数

• isIterable 可迭代函数

---

思考

• 为什么要使用高阶函数？

  纯函数的优点——结果是可预期的，不会因为外界原因改变，只与参数有关

  非纯函数会造成代码可读性差，结果不可预期，所以需要用高阶函数将非纯函数转化为纯函数，提高代码可维护性。

---

命令式编程与声明式编程 声明式编程存在自带的优于命令式编程的可扩展性

老师总结： 过程抽象/HOF/装饰器；命令式/声明式

---

个人总结

今天上的是JS上部分的内容，跟月影老师学习了JS的一些概念，举例讲解了HTML，css和JS的定位分工，同时区别于网上许多课程的内容，老师后半节课于讲一些JS内部的特性，收获很多，期待JS下的课程