编程范式

课程介绍

课程背景

• 前端的主要编程语言为 JavaScript
• JavaScript 作为一种融合了多种编程范式的语言，灵活性非常高
• 前端开发人需要根据场景在不同编程范式间自如切换
• 进一步需要创造领域特定语言抽象业务问题

课程收益

• 了解不同编程范式的起源和适用场景
• 掌握 JavaScript 在不同的编程范式特别是函数式编程范式的使用
• 掌握创建领域特定语言的相关工具和模式

编程语言

机器语言

汇编语言

中级语言

面向过程代表 —— C

高级语言

• 面向对象代表 —— C
• 函数式代表 —— lisp
• 多范式代表 —— javascript

C

C：“中级语言” 过程式语言代表

• 可对位，字节，地址直接操作
• 代码和数据分离倡导结构化编程
• 功能齐全∶数据类型和控制逻辑多样化
• 可移植能力强

C++

C++：面向对象语言代表

• C with Classes
• 继承
• 权限控制
• 虚函数
• 多态

Lisp

Lisp：函数式语言代表

• 与机器无关
• 列表：代码即数据
• 闭包

JavaScript

基于原型和头等函数的多范式语言

• 过程式
• 面向对象
• 函数式
• 响应式

编程范式

什么是编程范式

常见编程范式

过程式编程

自顶向上

结构化编程

JS中的面向过程

问题

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

面向对象

封装

关联数据与算法

继承

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

多态

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

依赖注入

去除代码耦合

原则

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

问题

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

函数式编程

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

一等函数 First Class Functions

// 聚合转发
const BlogController = {
  index(posts) { return Views.index(posts); },
  show(post) { return Views.show(post); },
  create(attrs) { return Db.create(attrs); },
  update(post, attrs) { return Db.update(post, attrs); },
  destroy(post) { return Db.destroy(post); },
};

const BlogController = {
  index: Views.index,
  show: Views.show,
  create: Db.create,
  update: Db.update,
  destroy: Db.destroy,
};

纯函数 Pure Functions

优势：

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

const retireAge = 60;
function retirePeron(p) {
  if (p.age > retireAge) {
    p.status = 'retired';
  }
}


function retirePeron(p) {
  const retireAge = 60;
  if (p.age > retireAge) {
    return {
      ...p,
      status: 'retired';
    };
  }
  return p;
}

Currying

Composition

Functor

可以当做容器的类型，类型支持对容器内元素进行操作

常见的 functor：Array(Iterable).map，Promise.then

a.b != null ? (a.b.c.d !== null ? a.b.c.d.e : null) : null) : null

new Maybe(a).map(prop('b')).map(proc('c')).map(proc('d')).map(proc('e'));

class Maybe {
  constructor(x) {
    this.$value = x;
  }
  
  map(fn) {
    return this.$value == null ? new Maybe(fn(this.$value));
  }
}

Monad

可以去除嵌套容器的容器类型

常见 monad：Array.flatMap，Promise.then

[1,2].flatMap(() => ([1,2]))
Promise.resolve(1).then((r) => Promise.resolve(2 * r))

Maybe.prototype.flat = function (level = 1) {
  if (this.$value?.constructor !== Maybe) {
    return new Maybe(this.$value);
  }
  return level ? his.$value.flat(--level) : this.$value;
}

Application

直接对两个容器直接操作

响应式编程

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

Observable

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

操作符

响应式编程的“compose”

• 合并
• 过滤
• 转化
• 异常处理
• 多播

Monard

去除嵌套的Observable

领域特定语言

• Domain-specific language（DSL）：应用于特定领域的语言

  • HTML
  • SQL

• General-purpose language

  • C/C++
  • JavaScript
  • ...

语言运行

lexer

SQL Token 分类

• 注释
• 关键词
• 操作符
• 空格
• 字符串
• 变量

Parser_语法规则

上下文无关语法规则

<selectStatement> ::= SELECT <selectList> FROM <tableName>
<selectList> ::= <selectField> [ , <selectList> ]
<tableName> ::= <tableName> [ , <tableList> ]

• 推导式：表示非终结符到（非终结符或终结符）的关系
• 终结符：构成句子的实际内容。可以简单理解为词法分析中的 token
• 非终结符：符号或变量的有限集合。它们表示在句子中不同类型的短语或子句

Parser_LL

LL：从左到右检查，从左到右构建语法树

Parser_LR

LR：从左到右检查，从右到左构建语法树

tools

visitor