FP与OOP编程范式入门

函数式编程三大特征：
│
├──  确定的输入输出
│   ├── 相同输入必定得到相同输出
│   ├── 函数执行结果可预测
│   └── 便于测试和调试
│
├──  无副作用
│   ├── 不修改外部状态
│   ├── 不创建 DOM 节点
│   └── 不发起 HTTP 请求
│
└──  引用透明
    ├── 函数调用可被返回值替换
    ├── IDE 友好，易于跳转查看
    └── 代码逻辑清晰易懂

//  面向过程：代码耦合度高，难以复用

// 获取 DOM 节点
const form = document.querySelector('#loginForm');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');

// 绑定事件
form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交
  
  // 读取输入值
  const username = usernameInput.value;
  const password = passwordInput.value;
  
  // 校验逻辑
  if (!username || !password || password.length <= 6) {
    alert('用户名或密码不符合要求');
    return;
  }
  
  // 处理数据
  const user = { username, password };
  console.log('用户信息：', user);
  alert('登录成功');
});

//  函数式编程：逻辑清晰，易于复用和维护

// ========== 函数定义 ==========

/**
 * 创建表单实例
 * @param {string} formId - 表单 ID
 * @param {Function} handler - 提交处理函数
 */
function createForm(formId, handler) {
  const form = document.querySelector(`#${formId}`);
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    handler();
  });
}

/**
 * 获取用户输入
 * @param {string} usernameId - 用户名输入框 ID
 * @param {string} passwordId - 密码输入框 ID
 * @returns {Object} 用户输入数据
 */
function getUserInput(usernameId, passwordId) {
  const username = document.querySelector(`#${usernameId}`).value;
  const password = document.querySelector(`#${passwordId}`).value;
  return { username, password };
}

/**
 * 创建用户对象
 * @param {Object} input - 用户输入数据
 * @param {boolean} needValidate - 是否需要校验
 * @returns {Object|null} 用户对象或 null
 */
function createUser(input, needValidate = true) {
  if (needValidate && !validate(input)) {
    return null;
  }
  
  return {
    username: input.username,
    password: input.password,
    createdAt: new Date().toISOString()
  };
}

/**
 * 校验用户输入
 * @param {Object} input - 用户输入数据
 * @returns {boolean} 校验结果
 */
function validate(input) {
  const { username, password } = input;
  
  // 可扩展的校验规则
  const rules = [
    { check: () => !!username, message: '用户名不能为空' },
    { check: () => !!password, message: '密码不能为空' },
    { check: () => password.length > 6, message: '密码长度必须大于 6 位' }
  ];
  
  return rules.every(rule => rule.check());
}

/**
 * 提示用户
 * @param {string} message - 提示消息
 */
function showMessage(message) {
  alert(message);
}

// ========== 业务逻辑组合 ==========

/**
 * 登录处理函数
 */
function submitHandler() {
  // 1. 获取输入
  const input = getUserInput('username', 'password');
  
  // 2. 创建用户（带校验）
  const user = createUser(input, true);
  
  // 3. 处理结果
  if (user) {
    console.log('用户信息：', user);
    showMessage('登录成功');
  } else {
    showMessage('用户名或密码不符合要求');
  }
}

// ========== 初始化 ==========

createForm('loginForm', submitHandler);

// ========== 纯函数示例 ==========

//  纯函数：相同输入必定得到相同输出，无副作用
function add(a, b) {
  return a + b;
}

function formatUserName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

//  非纯函数：依赖外部状态，有副作用
let count = 0;
function increment() {
  count++; // 修改外部状态
  return count;
}

function logMessage(message) {
  console.log(message); // 产生副作用（I/O 操作）
}


// ========== 不可变性示例 ==========

//  不可变操作：返回新对象，不修改原对象
const user = { name: 'Tom', age: 25 };

function updateUserAge(user, newAge) {
  return { ...user, age: newAge }; // 返回新对象
}

const updatedUser = updateUserAge(user, 26);
console.log(user);       // { name: 'Tom', age: 25 } - 原对象未变
console.log(updatedUser); // { name: 'Tom', age: 26 }

//  可变操作：直接修改原对象
function updateUserAgeMutable(user, newAge) {
  user.age = newAge; // 直接修改原对象
  return user;
}


// ========== 高阶函数示例 ==========

// 高阶函数：接收函数作为参数，或返回函数
function createValidator(rules) {
  return function(input) {
    return rules.every(rule => rule.check(input));
  };
}

const passwordRules = [
  { check: (pwd) => pwd.length >= 8, message: '至少 8 位' },
  { check: (pwd) => /[A-Z]/.test(pwd), message: '包含大写字母' },
  { check: (pwd) => /[0-9]/.test(pwd), message: '包含数字' }
];

const validatePassword = createValidator(passwordRules);

console.log(validatePassword('abc123'));      // false
console.log(validatePassword('Abcdefg123'));  // true

import React, { useState, useEffect } from 'react';

//  React 函数组件 + Hooks：函数式编程思想
function UserForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // 纯函数处理事件
  const handleSubmit = () => {
    const user = createUser({ username, password });
    if (user) {
      console.log('登录成功', user);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={username} 
        onChange={(e) => setUsername(e.target.value)} 
      />
      <input 
        type="password"
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />
      <button type="submit">登录</button>
    </form>
  );
}

import { ref, computed } from 'vue';

//  Vue 3 组合式 API：函数式编程思想
export default {
  setup() {
    const username = ref('');
    const password = ref('');

    // 纯函数校验
    const isValid = computed(() => {
      return username.value && 
             password.value && 
             password.value.length > 6;
    });

    const handleSubmit = () => {
      if (isValid.value) {
        console.log('登录成功', {
          username: username.value,
          password: password.value
        });
      }
    };

    return { username, password, isValid, handleSubmit };
  }
};

面向对象编程三大特性：
│
├──  封装性
│   ├── 属性和方法封装在类中
│   ├── 外部不能直接访问内部数据
│   └── 通过公共方法操作内部状态
│
├──  继承性
│   ├── 子类继承父类的属性和方法
│   ├── 避免代码重复
│   └── 建立类之间的层级关系
│
└──  多态性
    ├── 同一个方法名，不同对象有不同实现
    ├── 提高代码灵活性
    └── 降低代码耦合度

// ========== 类定义 ==========

/**
 * 校验器类
 * 提供静态校验方法
 */
class Validator {
  /**
   * 校验用户名和密码
   * @param {string} username - 用户名
   * @param {string} password - 密码
   * @returns {boolean} 校验结果
   */
  static validate(username, password) {
    if (!username || !password) {
      return false;
    }
    if (password.length <= 6) {
      return false;
    }
    return true;
  }
}

/**
 * 用户类
 * 封装用户数据和行为
 */
class User {
  // 私有属性（ES2022 新特性）
  #username;
  #password;

  constructor(username, password) {
    this.#username = username;
    this.#password = password;
  }

  // Getter 方法
  get username() {
    return this.#username;
  }

  get password() {
    return this.#password;
  }

  /**
   * 用户问候语
   */
  greet() {
    console.log(`欢迎用户：${this.#username}`);
  }

  /**
   * 打印用户信息
   */
  printInfo() {
    console.log({
      username: this.#username,
      password: '******', // 脱敏显示
      createdAt: new Date().toISOString()
    });
  }
}

/**
 * 用户表单类
 * 封装表单逻辑
 */
class UserForm {
  // 私有属性
  #form;
  #usernameInput;
  #passwordInput;

  constructor(formId) {
    // 初始化 DOM 引用
    this.#form = document.querySelector(`#${formId}`);
    this.#usernameInput = document.querySelector('#username');
    this.#passwordInput = document.querySelector('#password');

    // 绑定事件
    this.#init();
  }

  // 私有方法：初始化
  #init {
    this.#form.addEventListener('submit', (e) => {
      e.preventDefault();
      this.#handleSubmit();
    });
  }

  // 私有方法：提交处理
  #handleSubmit {
    const username = this.#usernameInput.value;
    const password = this.#passwordInput.value;

    // 使用 Validator 类进行校验
    if (!Validator.validate(username, password)) {
      alert('用户名或密码不符合要求');
      return;
    }

    // 创建 User 对象
    const user = new User(username, password);
    
    // 调用 User 对象的方法
    user.printInfo();
    user.greet();
    
    alert('登录成功');
  }
}

// ========== 初始化 ==========

const loginForm = new UserForm('loginForm');

// ========== 基类：用户 ==========

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // 基础问候方法
  greet() {
    return `你好，我是 ${this.name}`;
  }

  // 获取权限
  getPermissions() {
    return ['read'];
  }
}

// ========== 子类：管理员 ==========

class AdminUser extends User {
  constructor(name, email, department) {
    super(name, email); // 调用父类构造函数
    this.department = department;
  }

  // 重写（Override）父类方法 - 多态
  greet() {
    return `你好，我是管理员 ${this.name}，负责 ${this.department}`;
  }

  // 扩展父类权限
  getPermissions() {
    return [...super.getPermissions(), 'write', 'delete'];
  }

  // 新增方法
  banUser(user) {
    console.log(`${this.name} 封禁了用户 ${user.name}`);
  }
}

// ========== 子类：VIP用户 ==========

class VIPUser extends User {
  constructor(name, email, level) {
    super(name, email);
    this.level = level;
  }

  // 多态：不同的问候实现
  greet() {
    return `你好，我是 VIP${this.level} 用户 ${this.name}`;
  }

  // VIP 特有方法
  getDiscount() {
    return this.level === 1 ? 0.9 : 0.8;
  }
}

// ========== 使用示例 ==========

const normalUser = new User('小明', 'xiaoming@example.com');
const admin = new AdminUser('张三', 'zhangsan@example.com', '技术部');
const vip = new VIPUser('李四', 'lisi@example.com', 2);

// 多态：同一个方法，不同的行为
console.log(normalUser.greet());  // 你好，我是 小明
console.log(admin.greet());       // 你好，我是管理员 张三，负责 技术部
console.log(vip.greet());         // 你好，我是 VIP2 用户 李四

// 继承：复用父类功能
console.log(normalUser.getPermissions()); // ['read']
console.log(admin.getPermissions());       // ['read', 'write', 'delete']

// 扩展：子类特有功能
admin.banUser(normalUser); // 张三 封禁了用户 小明
console.log(vip.getDiscount()); // 0.8

//  NestJS 典型的 OOP 风格

@Controller('users')
export class UserController {
  // 依赖注入
  constructor(private readonly userService: UserService) {}

  @Get()
  getUsers() {
    return this.userService.findAll();
  }

  @Post()
  createUser(@Body() createUserDto: CreateUserDto) {
    return this.userService.create(createUserDto);
  }
}

@Injectable()
export class UserService {
  constructor(
    @InjectRepository(User)
    private userRepository: Repository<User>,
  ) {}

  findAll(): Promise<User[]> {
    return this.userRepository.find();
  }

  create(createUserDto: CreateUserDto): Promise<User> {
    const user = this.userRepository.create(createUserDto);
    return this.userRepository.save(user);
  }
}

//  Angular 完全面向对象

@Component({
  selector: 'app-user',
  template: `
    <div *ngFor="let user of users">
      {{ user.name }}
    </div>
  `
})
export class UserComponent implements OnInit {
  users: User[] = [];

  // 依赖注入
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.loadUsers();
  }

  loadUsers() {
    this.userService.getUsers().subscribe(users => {
      this.users = users;
    });
  }
}

函数响应式编程特征：
│
├──  数据流驱动
│   ├── 一切皆数据流
│   ├── 数据变化自动传播
│   └── 声明式编程风格
│
├──  异步场景优化
│   ├── 处理复杂的事件组合
│   ├── 用户输入防抖/节流
│   └── API 请求流式处理
│
└──  组合能力强
    ├── 多个数据流合并
    ├── 数据转换链式调用
    └── 错误处理统一管理

// 使用 RxJS 实现输入框实时校验

import { fromEvent } from 'rxjs';
import { map, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';

const usernameInput = document.querySelector('#username');
const submitBtn = document.querySelector('#submitBtn');

// 创建输入事件流
fromEvent(usernameInput, 'input')
  .pipe(
    map(event => event.target.value),           // 提取输入值
    debounceTime(300),                          // 防抖：300ms
    distinctUntilChanged(),                     // 去重：值相同时不触发
    filter(value => value.length >= 3),         // 过滤：长度 >= 3
    map(value => validateUsername(value))       // 校验
  )
  .subscribe(result => {
    submitBtn.disabled = !result.isValid;
    console.log(result.message);
  });

function validateUsername(username) {
  if (username.length < 3) {
    return { isValid: false, message: '用户名至少 3 个字符' };
  }
  if (!/^[a-zA-Z0-9_]+$/.test(username)) {
    return { isValid: false, message: '只能包含字母、数字、下划线' };
  }
  return { isValid: true, message: '用户名可用' };
}

import { fromEvent, from } from 'rxjs';
import { mergeMap, scan, startWith } from 'rxjs/operators';

// 模拟 API 请求
function fetchRecommendation() {
  return from(
    fetch('/api/recommendation')
      .then(res => res.json())
      .then(data => data.user)
  );
}

// 删除事件流
const deleteClick$ = fromEvent(document, 'click')
  .pipe(
    filter(event => event.target.classList.contains('delete-btn')),
    mergeMap(() => fetchRecommendation())  // 删除后立即请求新数据
  );

// 订阅删除事件
deleteClick$.subscribe(newUser => {
  console.log('新推荐用户：', newUser);
  // 更新 UI
  updateRecommendationList(newUser);
});

import { Observable, from, of, interval, fromEvent } from 'rxjs';
import { map, filter, mergeMap, take, switchMap } from 'rxjs/operators';

// ========== Observable（可观察对象）==========

// 创建 Observable
const observable$ = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

// 订阅 Observable
observable$.subscribe({
  next: value => console.log(value),
  complete: () => console.log('完成')
});
// 输出：1, 2, 3, 完成


// ========== 常用创建操作符 ==========

// from：从数组/Promise 创建
const fromArray$ = from([1, 2, 3, 4, 5]);

// of：创建单个值
const singleValue$ = of('Hello');

// interval：定时发送递增值
interval(1000) // 每秒发送 0, 1, 2, 3...
  .pipe(take(5)) // 只取前 5 个
  .subscribe(value => console.log(value));


// ========== 常用管道操作符 ==========

from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  .pipe(
    filter(num => num % 2 === 0),  // 过滤偶数
    map(num => num * 10),          // 乘以 10
    take(3)                        // 只取前 3 个
  )
  .subscribe(value => console.log(value));
// 输出：20, 40, 60


// ========== 实战：搜索建议 ==========

const searchInput = document.querySelector('#search');

fromEvent(searchInput, 'input')
  .pipe(
    map(event => event.target.value),
    debounceTime(500),              // 防抖 500ms
    distinctUntilChanged(),         // 去重
    filter(query => query.length > 0),
    switchMap(query =>               // 切换到最新的搜索请求
      from(fetch(`/api/search?q=${query}`).then(res => res.json()))
    )
  )
  .subscribe(results => {
    console.log('搜索结果：', results);
    // 渲染搜索建议列表
    renderSuggestions(results);
  });

import { ref, computed, watch, watchEffect } from 'vue';

//  Vue 3 响应式系统：简化版的 FRP

export default {
  setup() {
    // 响应式数据（数据流）
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    // 自动追踪依赖的副作用（响应式）
    watchEffect(() => {
      console.log(`count 变化了：${count.value}`);
    });

    // 监听特定数据源
    watch(count, (newVal, oldVal) => {
      console.log(`count 从 ${oldVal} 变为 ${newVal}`);
    });

    return { count, doubleCount };
  }
};

编程范式选择指南：
│
├──  选择函数式编程（FP）当：
│   ├── 需要大量数据转换和处理
│   ├── 希望代码易于测试和维护
│   ├── 使用 React/Vue 等现代框架
│   └── 团队偏好声明式编程风格
│
├──  选择面向对象编程（OOP）当：
│   ├── 业务逻辑复杂，需要建模
│   ├── 大型企业级应用
│   ├── 使用 Angular/NestJS 等框架
│   └── 团队有 Java/C# 背景
│
└──  选择函数响应式编程（FRP）当：
    ├── 处理复杂的异步事件流
    ├── 实时数据更新场景
    ├── 需要灵活的事件组合
    └── 使用 RxJS/RxJava 等库

// ========== 混合使用示例 ==========

//  OOP：定义类和对象
class UserService {
  private users: User[] = [];

  //  FP：纯函数处理数据
  private validateUser(user: User): boolean {
    return !!user.name && user.age >= 0;
  }

  //  FP：不可变操作
  addUser(user: User): User[] {
    if (!this.validateUser(user)) {
      throw new Error('Invalid user');
    }
    this.users = [...this.users, user]; // 不可变更新
    return this.users;
  }

  //  FP：函数组合
  getAdultUsers(): User[] {
    return this.users
      .filter(user => user.age >= 18)
      .map(user => ({ ...user, isAdult: true }));
  }
}

//  FRP：处理异步事件
fromEvent(searchInput, 'input')
  .pipe(
    debounceTime(300),
    map(event => event.target.value),
    switchMap(query => userService.search(query))
  )
  .subscribe(results => {
    console.log('搜索结果：', results);
  });

学习路径：
│
├──  第一阶段：理解概念（1 周）
│   ├── 理解三种范式的核心思想
│   ├── 完成课堂中的登录表单示例
│   └── 对比不同实现的优劣
│
├──  第二阶段：实战练习（2 周）
│   ├── 用 FP 重构现有代码中的工具函数
│   ├── 用 OOP 设计一个简单的业务模块
│   └── 用 RxJS 实现搜索建议功能
│
└──  第三阶段：框架应用（持续）
    ├── React/Vue 中应用 FP 思想
    ├── NestJS 中应用 OOP 思想
    └── 根据场景灵活选择范式

思考题：
│
├──  为什么 Vue 3 和 React 都偏向函数式编程？
├──  为什么 NestJS 和 Angular 选择面向对象？
├──  在什么场景下应该使用 FRP？
└──  如何在团队中推广最佳实践？