好的JS | 青训营笔记

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

代码优化

graph TD
代码优化 --> 各司其责
代码优化 --> 组件封装
代码优化 --> 函数式编程

深夜食堂

• 太牛辣

• 利用label标签的for属性来操作隐藏的checkbox从而控制样式，不需要一行JS代码就可以实现深夜模式切换

• <label for="check">☀</label>
  <input type="checkbox" id="check"/>
  

• #check:checked + .content{
      //深夜模式代码;
  }
  

• 各司其责！尽量避免JS操作样式。

• 纯展示类尽量零JS

组件封装

• 定义类来实现轮播图的API
• 解耦：派发事件：CustomEvent
• 插件化：将控制元素抽取出来，通过依赖注入与组件建立联系
• 提供一个插件的入口（注册方法，精简组件本身和扩展）。
• 组件化，数据驱动（根据数据生成html）
• 组件框架（抽象化）：将组件通用模型抽象出来（一般组件都有render和注册组件的方法）。
• 其他：组件嵌套、cssinjs等其他改进空间

过程抽象

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

• 比如react的hooks

• ex：once函数：对函数进行处理，保证函数只执行一次

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

• HOF：高阶函数，函数是参数或返回值，如果参数和返回值等价则为函数装饰器（修改、装饰原函数）。防抖、节流、延时调用、批量操作。

• 纯函数：行为可预期——同参数结果一致，没有副作用。

• JS是声明式和命令式的混合。

• 命令式

• if(){
     //xxx;
  }else{
     //xxx
  }
  

• 声明式

• function 包装函数(...actions){
      //操作函数
  }
  
  包装函数(函数1,函数二)
  

• 在需要添加功能时，声明式优于命令式

平衡代码的实现

• 不希望看到：回调地狱，难以维护
• 数据抽象：把状态抽离出来
• 过程抽象（可能导致过度抽象难读）
• 异步函数式

几个算法题

• leftpad
• 4的幂
• 洗牌
• 分红包

如何评估代码——具体情况，具体分析

我的思考

• 以前一直以为JS8以后的特性大同小异，很少会用，但是今天课堂中老师所讲的生成器函数让我大吃一惊。
• 即使在前端，算法一样很重要
• 组件封装在项目中可以很大程度地确保可读性和可复用性。