跟着月影学JavaScript-P2|青训营

Kuon_Fukasawa
48 阅读3分钟

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

重点内容

  • 组件封装
    • 改进空间
      • 解耦
      • 模块化
      • 抽象
  • 过程抽象
    • 例子
    • 什么是过程抽象
    • 高阶函数
    • 纯函数
    • 编程范式
  • 代码优化
    • 优化方向
    • 例子
      • Leftpad npm模块优化
      • 交通灯状态切换
      • 判断是否是4的幂
      • 红包算法

详细知识点介绍

组件封装

改进空间

解耦

控制点和组件是绑定在一起的，不够灵活，不利于修改。重构组件以插件化，将控制元素抽取成插件，插件与组件之间通过依赖注入的方式建立联系。
改进后，构造函数在很大程度上得到简化， 增加/减少功能只需要靠增减插件即可完成

模板化

将组件和插件都模板化（依赖render生成）

js里的img会被render传入html（取li） 插件先render进行渲染，使用img生成插件对应的模板，然后调用action完成插件的初始化

image.png

抽象

抽象为通用组件，形成框架。并不改变HTML，CSS，JS各司其职的原则，写在一个文件里并不代表被JS所取代。
Component负责注册插件和渲染；SliderPlugin继承Component，完成渲染和初始化；使用slider的时候需要传入id，并且给slider一个名字。 支持定义组件，添加若干个插件，每个组件都有控制插件。 Component实现了框架的功能。

image.png

过程抽象

过程抽象是用来处理局部细节控制的方法，是函数式编程思想的基础应用。但只有纯函数有无副作用的输出。

image.png

例子-设置button按钮但只执行一次

const list = document.querySelector('ul');
const buttons = list.querySelectorAll('button');
buttons.forEach((button) => {
button.addEventListener('click', (evt) => {
  const target = evt.target;
  target.parentNode.className = 'completed';
  setTimeout(() => {
    list.removeChild(target.parentNode);
  }, 2000);
});
});

该代码执行后会报错，解决方案：

  • click事件后增加{once:true}
  • 或 将evt过程封装为once的过程抽象高阶函数

使用过程抽象高阶函数，外部会形成闭包

什么是过程抽象

让同一个需求覆盖不同的事件处理，将这个需求剥离出来的过程叫做过程抽象

image.png

#### 高阶函数 以函数为参数和返回值，常作为函数装饰器

image.png

常见的高阶函数：

  • Once（限制只使用一次）
  • Throttle 节流
  • Debounce 防抖
  • Consumer
  • Iterative（可迭代的方法）
  • Array.prototype.filter()等函数，接收函数为参数

纯函数

一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。 ——JavaScript----什么是纯函数

编程范式

image.png

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

JS可以兼具命令式和声明式的函数特点，其中声明式的代码会更加简洁。

代码优化

优化方向：

  • 风格
  • 效率
  • 约定
  • 使用场景（通用性、资源消耗、性能、系统）
  • 设计

例子

Leftpad npm模块优化

考虑通用性，快速幂算法优化、底层字符串拼接算法优化

交通灯状态切换

异步函数、函数式

判断是否是4的幂

二进制转字符串、正则判断

红包算法

切西瓜（红包平均）、抽牌法（胜在随机，但性能差）

引用参考

JavaScript----什么是纯函数

avatar
文章
阅读
粉丝