编程范式(万字笔记) | 青训营笔记

2,059 阅读18分钟

课程背景:

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

课程收益:

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

PS:课程讲师的气泡音实在太难听清楚了,学习得花一半的心思去注意他讲了什么。学习很难进入沉浸状态

编程语言

机器语言

第一代计算机(1940年代末至1950年代初):第一代计算机使用的是机器语言,这种语言是二进制的,非常难以阅读和编写

image.png

  • 甚至一开始他是通过线缆来控制的

image.png

汇编语言

汇编语言(1950年代中期):为了使程序员能够更容易地编写代码,汇编语言被发明了出来。汇编语言是一种更高级别的机器语言,使用助记符来代替二进制代码,使程序员能够更容易地编写和阅读代码

image.png

中级语言

中级语言是介于机器语言和高级语言之间的一种语言。它通常是一种可移植的高级语言,但在执行时被转换成机器语言。中级语言具有比高级语言更接近机器语言的特点,因此它们通常比高级语言更快,但比机器语言和汇编语言更易读和编写。一些常见的中级语言包括C语言和C++语言

C:"中级语言"过程式语言代表

  • 可对位,字节,地址直接操作

    • 代码中的*(&x) = 20;语句可以直接修改变量x的值,说明C语言可以对位、字节、地址进行直接操作
  • 代码和数据分离倡导结构化编程

    • 代码中的#include <stdio.h>语句引入了标准输入输出库,说明C语言倡导代码和数据分离,支持结构化编程
  • 功能齐全:数据类型和控制逻辑多样化

    • 代码中声明了整型变量x和字符指针变量str,使用了printf函数进行输出,说明C语言的数据类型和控制逻辑非常多样化,功能齐全
  • 可移植能力强

    • 代码中使用了标准输入输出库,这使得代码可以在不同的平台上运行,说明C语言具有很强的可移植能力
#include <stdio.h> // 引入标准输入输出库int main() // 主函数
{
    int x = 10; // 声明并初始化一个整型变量x
    char* str = "Hello, World!"; // 声明并初始化一个指向字符的指针变量str
​
    printf("x = %d\n", x); // 输出x的值
    printf("str = %s\n", str); // 输出str所指向的字符串
​
    *(&x) = 20; // 对x的值进行修改,说明C语言可以对位、字节、地址进行直接操作
    printf("x = %d\n", x); // 输出修改后的x的值
​
    return 0; // 返回0表示程序正常结束,说明C语言支持函数返回值
}

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

  • C with Classes

    • C++最初是作为C语言的一种扩展,其基本语法与C语言相同,但增加了类、继承、多态等面向对象的特性,因此C++也被称为C with Classes
  • 继承

    • 代码中的class Student : public Person语句定义了一个Student类,它继承自Person类,这说明C++支持继承的特性
  • 权限控制

    • 代码中的publicprotectedprivate关键字用来控制成员变量和成员函数的访问权限,这说明C++支持权限控制的特性
  • 虚函数

    • 代码中的virtual void sayHello()语句定义了一个虚函数,这说明C++支持虚函数的特性。虚函数可以实现多态,即在运行时根据对象的实际类型来调用相应的函数
  • 多态

    • 代码中的void sayHello() override语句实现了函数的重写,这说明C++支持多态的特性。在运行时,如果调用的函数是虚函数,那么实际调用的函数将根据对象的实际类型来确定
#include <iostream> // 引入输入输出库// 定义一个类Person
class Person {
public: // 公有权限
    // 构造函数
    Person(std::string name, int age) : mName(name), mAge(age) {}
​
    // 成员函数
    virtual void sayHello() { // 定义虚函数,支持多态
        std::cout << "Hello, I'm " << mName << ", " << mAge << " years old." << std::endl;
    }
​
protected: // 保护权限
    std::string mName; // 姓名
    int mAge; // 年龄
};
​
// 定义一个类Student,继承自Person
class Student : public Person {
public: // 公有权限
    // 构造函数
    Student(std::string name, int age, std::string school) : Person(name, age), mSchool(school) {}
​
    // 重写父类的虚函数
    void sayHello() override { // 定义虚函数,支持多态
        std::cout << "Hello, I'm " << mName << ", " << mAge << " years old, and I'm studying at " << mSchool << "." << std::endl;
    }
​
private: // 私有权限
    std::string mSchool; // 学校
};
​
int main() {
    // 创建一个Person对象
    Person person("Tom", 20);
    person.sayHello(); // 调用Person的sayHello函数
​
    // 创建一个Student对象
    Student student("Jerry", 18, "ABC University");
    student.sayHello(); // 调用Student的sayHello函数,实现多态
​
    return 0; // 返回0表示程序正常结束
}

Lisp:函数式语言代表

  • 与机器无关
  • 列表:代码即数据
  • 闭包
(setq nums `(1 2 3 4)); 数据列表
​
(setq add `+) ;加操作
​
(defun run(op exp) (eval (cons op exp)) ) ;将数据构建为代码列表   连接列表
​
(run add nums) ;运行

JavaScript

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

    • 过程式

      • JavaScript最初被设计为一种过程式的脚本语言,它可以在Web浏览器中嵌入HTML页面,实现动态交互效果
    • 面向对象

      • JavaScript是一种支持面向对象编程的语言,它支持类、对象、继承、封装等面向对象的特性。JavaScript中的对象是动态的,可以随时添加或删除属性和方法
    • 函数式

      • JavaScript是一种支持函数式编程的语言,它的函数可以作为一等公民,可以赋值给变量,可以作为参数传递给其他函数,可以作为返回值返回给其他函数
    • 响应式

      • JavaScript可以通过DOM操作实现响应式编程,可以实现页面元素的动态更新,与用户的交互效果等

除了上述视频中提到的这几点,还有额外的特点进行补充:

  • 弱类型:JavaScript是一种弱类型的语言,不需要事先声明变量的类型,变量的类型会在运行时自动推断(在TS中变成强类型)。
  • 解释性:JavaScript是一种解释性的语言,不需要编译成可执行文件,可以直接在浏览器中执行(经典的例如V8引擎会进行处理)。
  • 高阶函数:JavaScript中的函数可以作为参数传递给其他函数,也可以作为返回值返回给其他函数,这种函数称为高阶函数。
  • 闭包:JavaScript中的函数可以形成闭包,即在函数内部定义的变量可以在函数外部访问,这种特性可以实现私有变量和函数的封装。

高级语言

高级语言是一种人类易于理解和使用的计算机语言。它使用自然语言的形式来描述问题,而不是使用机器语言或汇编语言。高级语言通常具有较高的可读性和可维护性,使程序员能够更容易地编写和修改代码。一些常见的高级语言包括Java、Python和JavaScript等

image.png

思维导图总结

image.png

编程范式

程序语言特性

  1. 是否允许副作用
  2. 操作的执行顺序
  3. 代码组织
  4. 状态管理
  5. 语法和词法

编程范式

  • 命令式:命令式编程是一种以计算机执行的命令为中心的编程范式,它主要分为面向过程和面向对象两种形式

    1. 面向过程

      • 面向过程是一种以过程为中心的编程方式,它将问题分解为一系列步骤,通过函数的调用来实现程序的功能。面向过程的代码通常是一系列的命令,描述了计算机执行的具体步骤
    2. 面向对象

      • 面向对象是一种以对象为中心的编程方式,它将数据和函数封装在一起,通过对象的交互来实现程序的功能。面向对象的代码通常是一系列的对象,描述了程序中的实体和它们之间的关系
  • 声明式:声明式编程是一种以描述问题为中心的编程范式,它主要分为函数式和响应式两种形式

    1. 函数式

      • 函数式编程是一种以函数为中心的编程方式,它将计算视为函数的应用,通过函数的组合来实现程序的功能。函数式的代码通常是一系列的函数调用,描述了计算的过程
    2. 响应式

      • 响应式编程是一种以数据流为中心的编程方式,它将数据和函数封装在一起,通过数据的变化来触发函数的执行,实现程序的功能。响应式的代码通常是一系列的数据流,描述了数据的变化和处理

过程式

自顶向下

image.png

调用的过程

image.png

结构化编程

结构化编程是一种以结构为中心的编程范式,它主要关注程序的可读性、可维护性和可扩展性,通过一系列的结构化的控制流程来组织程序的逻辑。

结构化编程的主要特点是:

  1. 顺序结构:程序按照顺序执行,从上到下依次执行每一条语句。
  2. 选择结构:程序根据条件选择执行不同的语句,包括if语句、switch语句等。
  3. 循环结构:程序通过循环执行一组语句,包括for、while、do-while等循环语句。

结构化编程的优点在于:

  1. 代码清晰:结构化编程通过一系列的结构化控制流程来组织程序的逻辑,使得代码更加清晰易懂。
  2. 可维护性高:结构化编程使得代码的逻辑更加清晰,易于维护和修改。
  3. 可扩展性强:结构化编程使得程序的逻辑更加清晰,易于扩展和添加新的功能。

结构化编程是现代编程语言的基础,几乎所有的编程语言都支持结构化编程。结构化编程的思想也是面向对象编程、函数式编程等其他编程范式的基础。

image.png

上图中左边是反面案例,右边是正确示例

JS中的面向过程

下方中结尾的;属于可加可不加的,但具体的规则如下:

  1. 行结束:当一行代码结束时,如果下一行代码不是有效的JavaScript代码(比如空行或注释),JavaScript解析器会自动插入分号。
  2. 语句块结束:当一段代码块结束时,如果下一行代码不是有效的JavaScript代码,JavaScript解析器会自动插入分号。
  3. return语句:在return语句后面的表达式如果不是一行代码的开头,JavaScript解析器会自动插入分号。
  4. break语句和continue语句:在break语句和continue语句后面如果不是一行代码的开头,JavaScript解析器会自动插入分号。
//进行导出//数据
export let car = {
  meter:100,
  speed:10
};
​
//算法:函数可以看作面向过程中的算法
export function advanceCar(meter){
  while(car < meter){
    car.meter += car.speed;
  }
}
//导入(命名导入),除此之外还有默认导入的方案
import { car , advanceCar } from ".car"//导入上方模块内容function main(){
  console.log('before',car);
  
  advanceCar(1000)
  
  console.log('after',car)
}
  • 模块化的方案不止ES6中的import导入export导出方案。在ES6正式出来之前,社区也有自己根据需求编写了其他的方案,目前还在流行的有CommonJS方案
  • ES6的模块化方案和CommonJS都是JavaScript中常见的模块化方案,它们都支持导入和导出模块的功能,但是在具体的语法和使用方式上有所不同。ES6使用import和export关键字来导入和导出模块,而CommonJS使用require和module.exports来导入和导出模块。ES6的导入和导出是静态的,不能在运行时动态导入和导出,而CommonJS的导入和导出是动态的,可以在运行时动态地导入和导出模块
// 导出
module.exports = {
  a: 1,
  foo: function() {},
  MyClass: class {}
};
// 导入
const { a, foo, MyClass } = require('./module.js');

面向过程式编程有什么缺点?为什么后面会出现面向对象

  • 数据与算法关联弱

  • 不利于修改和扩充

    • 可维护性差:面向过程式编程缺乏封装性和抽象性,代码的耦合度高,修改代码时容易影响其他部分的代码,导致维护性差
  • 不利于代码重用

    • 可扩展性差:面向过程式编程很难对程序进行扩展,因为程序的逻辑分散在各个函数或过程中,很难进行整体性的扩展

面向对象的出现解决了这几个问题

  • 可读性好:面向对象编程将数据和函数封装在一起,代码的可读性好,易于理解整个程序的逻辑。
  • 可维护性好:面向对象编程具有封装性和抽象性,代码的耦合度低,修改代码时只需要修改对象的内部实现,不会影响其他部分的代码,导致维护性好。
  • 可扩展性好:面向对象编程将数据和函数封装在一起,对象之间通过接口进行交互,易于对程序进行扩展。

面向对象

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

封装

  • 将数据和行为封装在一个对象中,通过访问控制来保护对象的数据和行为,防止外部对象直接访问和修改
  • 封装的目的是隐藏对象的实现细节,提供一个统一的接口来访问对象的数据和行为,增加对象的安全性和可靠性,同时也提高了程序的可维护性和可扩展性
class Person {
  // 姓名、年龄和性别都为private,外部对象无法直接访问和修改
  #name;
  #age;
  #gender;
​
  constructor(name, age, gender) {
    this.#name = name;
    this.#age = age;
    this.#gender = gender;
  }
​
  // 公共的getter方法,用于访问和获取私有的数据成员
  getName() {
    return this.#name;
  }
​
  getAge() {
    return this.#age;
  }
​
  getGender() {
    return this.#gender;
  }
​
  // 公共的setter方法,用于修改私有的数据成员
  setName(name) {
    this.#name = name;
  }
​
  setAge(age) {
    this.#age = age;
  }
​
  setGender(gender) {
    this.#gender = gender;
  }
}
​
// 创建一个Person对象,并访问和修改私有的数据成员
const person = new Person('小余', 20, '男');
console.log(person.getName()); // 输出:小余
person.setName('小满');
console.log(person.getName()); // 输出:小满

继承

无需重写的情况下进行功能扩充,这个写法在React中是经常使用的

class Student extends Person {
  #id;
  #score;
​
  constructor(name, age, gender, id, score) {
    // 调用父类的构造函数,初始化姓名、年龄和性别
    super(name, age, gender);
    this.#id = id;
    this.#score = score;
  }
​
  // 公共的getter方法,用于访问和获取私有的数据成员
  getId() {
    return this.#id;
  }
​
  getScore() {
    return this.#score;
  }
​
  // 公共的setter方法,用于修改私有的数据成员
  setId(id) {
    this.#id = id;
  }
​
  setScore(score) {
    this.#score = score;
  }
}
​
// 创建一个Student对象,并访问和修改私有的数据成员
const student = new Student('张三', 20, '男', '1001', 90);
console.log(student.getName()); // 输出:张三
console.log(student.getId()); // 输出:1001
student.setScore(95);
console.log(student.getScore()); // 输出:95

多态

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

  • 基于上面的Person类和Student类,创建了一个printInfo函数,用于打印对象的信息。这个函数接受一个Person或Student对象作为参数,根据对象的类型,打印不同的信息
  • 我们定义了一个printInfo函数,用于打印对象的信息。这个函数接受一个Person或Student对象作为参数,根据对象的类型,打印不同的信息。在函数中,我们使用了instanceof关键字,判断对象的类型,实现了多态
function printInfo(obj) {
  console.log(`姓名:${obj.getName()},年龄:${obj.getAge()},性别:${obj.getGender()}`);
  if (obj instanceof Student) {
    console.log(`学号:${obj.getId()},成绩:${obj.getScore()}`);
  }
}
​
// 创建一个Person对象和一个Student对象,并分别调用printInfo函数
const person = new Person('张三', 20, '男');
const student = new Student('李四', 22, '女', '1001', 90);
​
printInfo(person); // 输出:姓名:张三,年龄:20,性别:男
printInfo(student); // 输出:姓名:李四,年龄:22,性别:女,学号:1001,成绩:90

依赖注入

去除代码耦合

  • 依赖注入(Dependency Injection,简称DI)是一种设计模式,它的主要目的是为了解耦合,使得代码更加灵活、可扩展和可维护。在一个应用程序中,各个组件之间通常会存在一些依赖关系,例如一个类需要使用另一个类的对象或者数据。在传统的代码实现中,通常是在类内部创建和管理依赖的对象,这样会导致代码的耦合性很高,一旦依赖的对象发生变化,就需要修改大量的代码,导致代码的可维护性很差。
  • 而依赖注入则是通过将依赖的对象从类内部移动到类的外部,在类的构造函数或者方法中注入依赖的对象。这样做的好处是,使得类与依赖的对象解耦合,使得代码更加灵活、可扩展和可维护。同时,依赖注入也使得代码的测试更加方便,因为测试代码可以注入不同的依赖对象,测试不同的场景和情况。

image.png

面向对象编程_五大原则

  • 单一职责原则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)

    • 一个类不应该依赖于它不需要的接口,一个类应该只依赖于它需要的接口。这个原则的目的是降低代码的耦合性,提高代码的灵活性和可扩展性。通过将接口进行分离,使得代码更加灵活、可维护和可扩展

面向对象编程有什么缺点?为什么我们推荐函数式编程

image.png

函数式编程

函数的特点

  • 函数是"一等公民"
  • 纯函数/无副作用
  • 高阶函数跟闭包

image.png

优势

通过一节课很难深刻体会到他的好处,需要额外的拓展学习

  1. 可缓存
  2. 可移植
  3. 可测试
  4. 可推理
  5. 可并行
//代码1
const retireAge = 100
​
function retirePerson(p){
  if(p.age > retireAge){
    p.status = "retired"
  }
}
//代码2
function retirePerson(p){
  const retireAge = 100
    if(p.age > retireAge){
     return {
       ...p,
       status = "retired"
     }
  }
  return p
}

通过上述两段代码,可以看出代码二的如下优势:

  1. 增加了代码的可测试性:由于代码2中的函数返回了一个新对象,而不是直接修改原对象,因此可以更方便地进行单元测试,避免了测试过程中修改原对象的副作用。
  2. 增加了代码的可维护性:由于代码2中的函数不直接修改原对象(在React中这个称之为不可变的力量),而是返回一个新对象,因此更容易维护和修改。如果要修改函数的行为,只需要修改函数内部的代码即可,不会对其他代码产生影响。
  3. 增加了代码的可读性:由于代码2中的函数返回了一个新对象,而不是直接修改原对象,因此代码的含义更加清晰明确。同时,代码2中的函数使用了解构赋值和对象展开运算符,使得代码更加简洁、易读。

柯里化函数

这里我就搬我以前的笔记了

  • 柯里化也是属于函数式编程里面一个非常重要的概念

  • 维基百科解释:

    • 在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化
    • 是把接收多个参数的函数,变成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数,而且返回结果的新函数的技术
    • 柯里化声称"如果你固定某些参数,你将得到接受余下参数的一个函数"
  • 柯里化总结

    • 只传递给函数一部分参数来调用它,让它返回另一个函数处理剩下的参数
    • 这个过程称为柯里化
//假设我们有一个需要填入4个参数的 函数
function foo(m,n,x,y){
    
}
foo(10,20,30,40)
//柯里化的过程
//我们对其进行转化,变得只需要传入一个参数,但这里面需要返回一个函数继续处理剩下的参数
function bar(m){
    return function(n){
        return function(x,y){
            //你也可以将y参数继续return
            m+n+x+y
        }
    }
}
bar(10)(20)(30,40)
柯里化的结构
//正常结构
function add(x,y,z){
    return x+y+z
}
​
var result = add(10,20,30)
console.log(result);
​
//柯里化
function sum(x){
    return function(y){
        return function(z){
            return x+y+z
        }
    }
}
​
var result1 = sum(10)(20)(30)
console.log(result1);
​
//简化柯里化代码
var sum2 = x=>y=>z=>{
    return x+y+z 
}
//还能再次简化var sum2 = x=>y=>z=>x+y+z
var result2 = sum2(20)(30)(40)
console.log(result2,"使用箭头函数简化柯里化的方式")
柯里化的作用
  • 那么为什么需要有柯里化呢?

    • 在函数式编程中,我们其实往往希望一个函数处理的问题尽可能的单一,而不是将一大堆的处理过程交给一个函数来处理
    • 那么我们是否就可以将每次传入的参数在单一的函数中进行处理,处理完后在下一个函数中再使用处理后的结果
单一职责原则(SRP)
面向对象 ->-> 尽量只完成一件单一的事情
柯里化 - 单一职责的原则
//全部挤在一起处理
function add(x,y,z){
    x = x + 2
    y = y * 2
    z = z * z
    return x + y +z
}
​
console.log(add(10,20,30));
//柯里化处理
function sum(x){
    x = x + 2
    return function(y){
        y = y * 2
        return function(z){
            z = z * z
                return x + y + z
        }
    }
}
console.log(sum(10)(20)(30));
柯里化案例

只举例一个,不然内容过多

//打印日志时间
function log(date,type,message){
    console.log(`[${date.getHours()}:${date.getMinutes()}][${type}]:[${message}]`)
}
log(new Date(),'DEBUG','查找到轮播图的bug')//[22:24][DEBUG]:[查找到轮播图的bug]
log(new Date(),'DEBUG','查询菜单的bug')//[22:24][DEBUG]:[查询菜单的bug]
log(new Date(),'DEBUG','查询数据的bug')//[22:24][DEBUG]:[查询数据的bug]
---------------------------------------------------------------------------------------------
//柯里化优化
var log = date => type => message =>{
    console.log(`[${date.getHours()}:${date.getMinutes()}][${type}]:[${message}]`)
}
//如果我打印的都是当前的时间,我们就可以将时间复用
var nowLog = log(new Date());
nowLog("DEBUG")("查找小满去哪了")//[22:32][DEBUG]:[查找小满去哪了]
//或者时间+类型都全部复用
var nowLog1 = log(new Date())("小满系列查找");
nowLog1("查找小满人去哪了")//[22:34][小满系列查找]:[查找小满人去哪了]
nowLog1("查找小满的黑丝去哪了")//[22:34][小满系列查找]:[查找小满的黑丝去哪了]
nowLog1("查找小满的裤衩子被谁拿走了")//[22:34][小满系列查找]:[查找小满的裤衩子被谁拿走了]
nowLog1("查找小满有没有去按摩店找小姐姐")//[22:34][小满系列查找]:[查找小满有没有去按摩店找小姐姐]

组合函数

组合(Compose)函数是在JavaScript开发过程中一种对函数的使用技巧、模式:

  • 比如我们现在需要对某一个数据进行函数的调用,执行两个函数fn1和fn2,这两个函数是依次执行的;
  • 那么如果每次我们都需要进行两个函数的调用,操作上就会显得重复
  • 那么是否可以将这两个函数组合起来,自动依次调用呢?
  • 这个过程就是对函数的组合,我们称之为 组合函数(Compose Function);
function double(num){
    return num*2
}
​
function square(num){
    return num ** 2//平方
}
​
var count = 10
var result = square(double(count))
console.log(result);
​
//如何将double和square结合起来,实现简单的组合函数
function composeFn(m,n){
    return function(count){
        return n(m(count))
    }
}
​
var newFn = composeFn(double,square)
console.log(newFn(10));

容器式编程

  • 可以当做容器的类型,类型支持对容器内元素进行操作
  • 常见的:functor:Array(Iterable).map,Promise.then
a.b != null ? (a.b.c != null ?(a.b.c.d !== a.b.c.d.e :null) : null) :null

....这部分听得实在太费劲了,气泡音听得难受(跳过),知道有这个概念,去其他地方学习即可

响应式编程

维基百科定义:在计算中,响应式编程反应式编程(英语:Reactive programming)是一种面向数据和变化传播的声明式编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。

  • 通俗来说,响应式编程就是一种处理数据流的编程方式。我们可以把数据流看成一条河流,数据就像是水流一样从上游流向下游。在响应式编程中,我们可以方便地定义这条河流,并在河流中处理数据的变化,就像是在河流中处理水流一样。这样,我们就可以很方便地处理数据的变化,而不需要手动追踪和处理每一个数据变化的位置。

没有纯粹的响应式编程语言,我们需要借助工具库的帮忙,例如RxJS

  • 异步/离散的函数式编程

    • 数据流

    • 操作符

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

观察者模式

观察者模式(Observer Pattern)是一种设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,当主题对象发生变化时,它的所有观察者都会收到通知并自动更新。

在观察者模式中,有两个核心角色:主题对象和观察者对象。主题对象维护一个观察者列表,并提供添加、删除和通知观察者的方法;观察者对象则定义了接收通知并进行更新的方法。

观察者模式的优点包括:

  1. 松耦合:观察者模式将主题对象和观察者对象之间解耦,使得它们可以独立地变化和扩展。
  2. 可复用性:由于观察者对象可以动态地添加和删除,因此可以在不修改主题对象的情况下增加新的观察者对象,提高了代码的可复用性。
  3. 扩展性:在观察者模式中,可以灵活地添加和删除观察者对象,因此可以方便地扩展和修改系统的功能。

观察者模式在实际应用中广泛使用,例如GUI界面中的事件处理机制、微信公众号的订阅功能等等。

image.png

迭代器模式

迭代器模式(Iterator Pattern)是一种设计模式,它提供了一种顺序访问聚合对象中的元素,而不需要暴露聚合对象的内部表示。迭代器模式可以将遍历聚合对象的过程从聚合对象中分离出来,从而可以简化聚合对象的实现和遍历算法的实现。

在迭代器模式中,有两个核心角色:聚合对象和迭代器对象。聚合对象是一组对象的集合,它提供了一个方法来获取迭代器对象;迭代器对象则定义了访问和遍历聚合对象中元素的方法。

迭代器模式的优点包括:

  1. 简化聚合对象的实现:由于迭代器模式将遍历聚合对象的过程从聚合对象中分离出来,因此可以简化聚合对象的实现,使其只需要关注自己的核心业务逻辑。
  2. 提高聚合对象的访问效率:在迭代器模式中,迭代器对象可以提供不同的遍历算法,从而可以针对不同的应用场景进行优化,提高聚合对象的访问效率。
  3. 提高代码的可复用性:由于迭代器模式将遍历算法从聚合对象中分离出来,因此可以方便地重用遍历算法,提高代码的可复用性。

迭代器模式在实际应用中广泛使用,例如Java中的Iterator接口、C++中的STL迭代器等等。它可以帮助我们更加方便地遍历聚合对象中的元素,提高代码的可读性和可维护性。

  • 可以类比为Promise和EventTraget超集

image.png

响应式编程的"compose"

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

  • 去除嵌套的Observable

image.png

总结(思维导图)

image.png

构建领域特定语言

领域特定语言(Domain-Specific Language,简称DSL)是一种专门用于解决特定领域问题的编程语言。与通用编程语言相比,DSL更加关注于特定领域的问题,使得针对该领域的编程变得更加高效、简单和直观。

DSL的设计是为了解决特定领域的问题,因此它可以更加贴近领域的需求和特点,提供更加便捷和高效的解决方案。DSL通常具有简单的语法和丰富的领域专业术语,使得开发人员可以更加专注于解决领域问题,而无需关注底层技术实现。

DSL的应用场景包括但不限于:配置文件、工作流程、数据分析、模型定义等。在这些领域中,DSL可以提供更加高效、直观和易于维护的解决方案,提升开发效率和代码质量。

  • HTML
  • SQL

与之相对应的是General-purpose language(通用语言)

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

特定语言需要由通用语言实现,通用语言无法由特定语言实现

词法解析

  • 语言运行

image.png

SQL Token分类

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

lexer

image.png

语法分析

Parser_语法规则

上下文无关语法规则

image.png

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

Parser_LL

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

image.png

对应的自顶向下的流程图:

image.png

Parser_LR

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

LL(K) > LR(1) > LL(1),括号里的内容构建语法树需要向下看的数量

image.png

工具生成

利用工具让我们只需要关注语法方面的问题,语法分析则交给工具来做

image.png

解释和编译

  • 运行parser.parse后生成如下语法树

image.png

课程总结

image.png