前端初阶训练营与编程范式| 青训营笔记

110 阅读3分钟

01 课程介绍

课程背景:

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

课程收益:

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

02 编程语言

为什么需要编程语言

需要人通过指令输入告诉机器该做什么

机器语言

在不同的机器有不同的格式(8086格式:分为操作码和操作数两种格式)

需要介质来承担(纸带-线缆/开关)

汇编语言

使用字母代替数字,方便输入

高级语言

进一步提高可移植性,贴近自然语言

C/C++

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

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

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

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

Lisp

Lisp:函数式语言代表

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

JavaScript

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

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

03 编程范式

什么是编程范式

常见的编程范式

过程式编程

  • 自顶向下
  • 结构化编程

面向过程问题

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

面向对象编程

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

面向对象编程-五大原则

  • 单一职责原则SRP
  • 开放封闭原则0CI
  • 里式替换原则LSP
  • 依赖倒置原则DIP
  • 接口分离原则ISP

函数式编程

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

First Class Function

Pure Function

优势

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

Currying

Composition

Functor

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

常见的functor : Array (Iterable).map, Promise.then

Monad

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

常见monad: Array.flatMap Promise.then

Applicative

直接对两个容器直接操作

ldentity: Maybe(id).ap(v)=== V;

Homomorphism: Maybe(f).ap(Maybe(x)) === Maybe();

Interchange: v.ap(Maybe(x)) === Maybe(f => f()),ap(v);

Composition: Maybe(compose).ap(u).ap(v).ap(W) === u.ap(v.ap(W);

响应式编程

异步/离散的函数式编程

  • 数据流

  • 操作符

    • 过滤
    • 合并
    • 转化
    • 高阶

Observable

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

操作符

响应式编程的“compose”

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

Monad

去除嵌套的Observable

04 领域特定语言

什么是领域特定语言

语言运行

lexer

SQL Token分类

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

Parser 语法规则

上下文无关语法规则

推导式:表示非终结符到(非终结符或终结符)的关系。

终结符:构成句子的实际内容。可以简单理解为词法分析中的token。

非终结符:符号或变量的有限集合。它们表示在句子中不同类型的短语或子句。

Parser LL

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

Parser LR

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

select name from user

Tools

visitor

1 + 2 * 3

总结

附录

函数式编程

mostly-adequate.gitbook.io/mostly-adeq…

ramdajs.com/

rxjs.dev/

创建DSL parser工具

pegjs.org/

github.com/antlr/antlr…

github.com/yiminghe/ki…