编程范式 | 青训营笔记

135 阅读4分钟

前言

JavaScript 作为一种融合了多种编程范式的语言,灵活性非常高。前端开发人员需要根据场景在不同编程范式间自如切换。进一步需要创造领域特定语言抽象业务问题。 本文会帮助你了解不同编程范式的起源和适用场景。掌握 JavaScript 在不同的编程范式特别是函数式编程范式下的使用。进一步帮助你掌握创建领域特定语言的相关工具和模式。

1.编程语言

机器语言

  • 本质上是由“0”和“1”组成的二进制数。计算机发明之初,人们只能计算机的语言去命令计算机去操作。向计算机每发出一条指令,就要写出一串串由“0”和“1”组成的指令序列。

image.png

汇编语言

  • 由于机器语言是以数字来输入编程,所以可读性十分差,易出错;后面则出现了汇编语言,它以简洁的字母代替数字,方便输入;比如,用“ADD”代表加法。这样我们很容易读懂并理解程序在干什么,纠错及维护都变得方便了,这种程序设计语言就称为汇编语言,即第二代计算机语言。

image.png

高级语言

image.png

C

  • C:“中级语言”面向过程式语言代表
    • 可对位,字节,地址直接操作
    • 代码和数据分离倡导结构化编程
    • 功能齐全:数据类型和控制逻辑多样化
    • 可抑制能力强

image.png

image.png

C++

  • C++:面向对象语言代表
    • C with Classes
    • 权限控制
    • 虚函数
    • 多态

image.png

image.png

Lisp

  • Lisp:函数式语言代表
    • 与机器无关
    • 列表:代码即数据
    • 闭包

image.png

JavaScript

  • 基于原型的头等函数的多范式语言
  • 过程式
  • 面向对象
  • 函数式
  • 响应式

image.png

2.编程范式

什么是编程范式

  • 程序语言特性
    • 是否允许副作用
    • 操作的执行顺序
    • 代码组织
    • 状态管理
    • 语法和词法

常见编程范式

  • 编程范式可以分为两种
    • 命令式
      • 面向过程
      • 面向对象
    • 声明式
      • 函数式
      • 响应式

过程式编程

  • 自顶向下

image.png

  • 结构化编程

image.png

JS中的面向过程

image.png

面向过程问题

  • 数据与算法关联弱
  • 不利于修改和扩充
  • 不利于代码重用

面向对象编程

  • 封装
  • 继承
  • 多态
  • 依赖注入

面向过程-封装

  • 关联数据与算法

image.png

面向过程 编程-继承

  • 无需重写的情况下进行功能扩充

image.png

面向对象编程-多态

  • 不同结构可以进行接口共享,进而达到函数复用

image.png

面向对象编程-依赖注入

  • 去除代码耦合

image.png


image.png

面向对象编程-五大原则

  • 单一职责原则SRP(Single Responsibility Principle SRP)
  • 开放封闭原则OCP(Open-Close Principle OCP)
  • 里氏替换原则LSP(the Liskov Substitution Principle LSP)
  • 依赖倒置原则DIP(the Dependency Inversion Principle DIP)
  • 接口分离原则ISP(the Interface Segregation Principle ISP)

面向对象问题

  • 面向对象编程语言的问题在于,它总是附带着所有它需要的隐含环境。你想要一个香蕉,但得到的却是一个大猩猩拿着香蕉,而且还有整个丛林

函数式编程

  • 函数是“第一等公民”
  • 纯函数/无副作用
  • 高阶函数

函数式编程-First Class Function

image.png

函数式编程-Pure Funciton

  • 优势
    • 可缓存
    • 可移植
    • 可测试
    • 可推理
    • 可并行

image.png

函数式编程-Currying

image.png


image.png

函数式编程-Composition

image.png

函数是编程-Functor

  • 可以做容器的类型,类型支持对容器内元素进行操作
  • 常见的functor:Array(Iterable).map,Promise.then

image.png


image.png

函数式编程-Monad

  • 可以去除嵌套容器的容器类型
  • 常见monad:Array.flatMap Promise.then

image.png

函数式编程-Applicative

  • 直接对两个容器直接操作

image.png


image.png

  • Identity:Maybe(id).ap(v)===v;
  • Homomorphism:Maybe(f).ap(Maybe(x))===Maybe(f(x));
  • Interchange:v.ap(Maybe(x))===Maybe(f=>f(x)).ap(v);
  • Composition:Maybe(compose).ap(u).ap(v).ap(w)===u.ap(v/ap(w));

响应式编程

  • 异步/离散的函数式编程
    • 数据流
    • 操作符
      • 过滤
      • 合并
      • 转化
      • 高阶

image.png

响应式编程-Observable

  • 观察者模式
  • 迭代器模式
  • Promise/EvenTarget 超集

image.png


image.png

响应式编程-操作符

  • 响应式编程的“compose”
    • 合并
    • 过滤
    • 转化
    • 异常处理
    • 多播

image.png


image.png

响应式编程-Monad

  • 取出嵌套的Observable

image.png

3.领域特定语言

什么是领域特定语言

语言运行

image.png

lexer

  • SQL Token分类
    • 注释
    • 关键字
    • 操作符
    • 空格
    • 字符串
    • 变量

image.png


image.png

Parser-语法规则

  • 上下文无关语法规则
<selectStatement> ::= SELECT <selectList> FROM <tableName>
<selectList> ::= <selectField> [ , <selectList>]
<tableName> ::= <tableName> [ , <tableList>]
  • 推导式:表示非终结符到(分终结符或终结符)的关系
  • 终结符:构成句子的实际内容。可以简单理解为词法分析中的token
  • 非终结符:符号或变量的有限集合。它们表示在句子中不同类型的短语或子句

Parser-LL

  • LL:从左到右检查,从左到右构建语法树

image.png

Parser-LR

  • LR:从左到右检查,从右到左构建语法树

select name from user

LL(K)>LR(1)>LL(1)

image.png

tools

image.png

visitor

image.png

附录

image.png

引用

  • 字节内部课:编程范式-字节初阶训练营