跟着月影学 JavaScript | 青训营笔记

41 阅读2分钟

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

重点内容

  • JavaScript 好代码的标准
  • HTML/CSS/JS各司其责
  • 组件的定义解析及特征
  • 组件封装基本方法
  • 利用原生JS实现电商网站轮播图
  • 过程抽象概念
  • 高阶函数使用模式
  • 为什么要使用高阶函数?
  • JavaScipt 变成范式

JavaScript学习书籍

红宝书、犀牛书

JavaScript 好代码的标准

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

组件封装基本方法

组件是指Web页面上抽出来一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性。

结论

  • 组件设计的原则:封装性、正确性、扩展性、复用性
  • 实现组件的步骤:结构设计、展现效果、行为设计
  • 三次重构:1.插件化 2.模板化 3.抽象化(组件框架)

过程抽象概念

过程抽象⽤来处理局部细节控制的⼀些⽅法,是函数式编程思想的基础应⽤,为了能够让“只执行一次”的需求覆盖不同的事件处理,我们可以将这个需求剥离出去,这个过程我们称为过程抽象

高阶函数使用模式

HOF
   1、以函数作为参数
   2、以函数作为返回值
   3、常用于作为函数装饰器

代码范例:

function HOF0 (fn){
      return function(...args)  {
            return fn.apply (this,args);
       }
  }

常用高阶函数

(once、throttle(节流)、debounce(防抖)、consumer/2lterativa(可迭代))    

为什么要使用高阶函数?

纯函数与非纯函数

1. 纯函数 (pure function)
  • 对外部没有副作用
  • 效果可预期
2. 非纯函数 (inpure function)
  • 对外部有副作用
  • 测试时要构造特定的环境、初始化和还原
  • 测试难度更大

使用高阶函数的好处

  • 过程抽象
  • 高阶函数都是纯函数,效果可预期
  • 提升代码的可维护性