【青训营】JavaScript

松鼠栗子
68 阅读2分钟

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

高阶函数

  1. HOF
  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
function HOFO（fn）{
    return function(...args){
        return fn.apply(this,args);
    }
}

image.png

  • once：为了能够让“让只执行一次”的需求覆盖不同的事件处理，可以将需求剥离出来，这个过程称为过程抽象
  • Throttle节流函数
  • Dedounce防抖
  • Consumer/2
  • Iterative
  1. 为什么使用高阶函数？

两种函数：纯函数和非纯函数

  • 纯函数：输入的值一定时，输出的值一定，比较适合用于单元测试
  • 非纯函数：会依赖于外部环境

通过高阶函数可以减少非纯函数的数量，增加系统的可靠性、稳定性。

编程范式

命令式与声明式

image.png

写好JavaScript的原则

  • 各司其职：HTML、CSS、JavaScript职能分离。
  • 插件封装：好的UI组件具备正确性、扩展性、复用性。
  • 过程抽象：应用函数式子编程思想。

各司其职

  • HTML、CSS、JavaScript各司其职
  • 避免由js操作样式
  • 纯展示类交互寻求零JS方案

组件封装

组件：web页面上抽离出来的包含模板（HTML）、功能（js）、样式（css）的单元，好的组件具备封装性、正确性、扩展性、复用性。

  • 例子：用原生js写一个轮播图 结构：HTML，轮播图典型的列表结构，可以使用无序列表ul元素实现。 三次重构

总结

  • 函数要做好封装，降低函数耦合性
  • 要确保函数尽量不要直接使用和修改外部的变量，要用到外部变量，应该使其成为参数传入函数中
  • 函数是一个处理数据的最小单元。它包含数据和处理过程
  • 做好数据抽象，将用到的数据抽象出去形成对象或数组，可以提高函数的复用性
  • 做好过程抽象，将过程进行抽象形成独立的函数，可以提高函数的复用性、灵活性
  • 将异步操作进行promise化，可以提高函数的可读性
avatar
文章
阅读
粉丝