JS | 青训营笔记

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

思维导图

• 如何写好JavaScript?

  • 三条原则

  • 各司其职，HTML，css，js职能分离

    • 应当避免不必要js直接操控样式
    • 用class来表示状态
    • 纯展示交互寻求零js方案

    • 例子，切换深色模式

      • 方案一，js修改body样式
      • 方案二，js修改body类名
      • 方案三，纯css控制，伪类选择器标记状态，+并集选择器共同决定页面样式

  • 组件封装

    • 原则：好的UI组件具备封装性，正确性，扩展性，复用性

    • 基本方法

      • 结构设计
      • 展示效果
      • 行为设计：api（功能），Event（控制流）

    • 重构：

      • 插件化

        • 将控制元素抽取成插件（这样可以方便的增删功能）
        • 组件与组件之间通过依赖注入方式建立联系
      • 解耦，将HTML模板化，易于扩展
      • 抽象，将组件通用模型抽象出来

  • 过程抽象,函数式编程思想

    • 例子

      • 怎么只调用一次？

        • 抽象成函数，利用高阶函数+闭包，第一次调用完之后，把调用的函数设置为null，这样能达到只调用一次的目的

      • 节流与防抖

        • 本质上是优化高频率执行代码的一种手段
        • 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
        • 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时
        • 定时器写法
        • 时间戳写法

        • 相同点：

          • 都可以通过使用 setTimeout 实现
          • 目的都是，降低回调执行频率。节省计算资源

        • 不同点：

          • 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
          • 函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

    • 高阶函数

      • 参数和返回值都是参数，常用作函数装饰器
      • 纯函数便于测试，相同的输入得到相同的输出

    • 编程范式

      • 命令式（面向过程，面向对象），怎么做
      • 声明式（逻辑式，函数式），做什么

• 质量优化

  • 写一个交通灯切换的例子

    • 五个setTimeout嵌套
    • 状态列表抽取状态，递归
    • 过程抽象，抽象出一个轮询的方法，循环进行轮询来实现状态切换（有点过度抽象）
    • 异步，

  • 洗牌

    • 错误方法，随机交换
    • 正确，不断挑选放到最后

  • 分红包

    • 注意：最小值，即每个人都要分到
    • 切西瓜法，不断取大的拆成两半。O(mn)，趋于均匀
    • 抽牌法

参考了那些文章？

字节讲义，

防抖与节流，vue3js.cn/interview/J…