docs(post): add new post

Author: AquaHydro

source/_posts/前端编程范式与设计模式.md

@@ -0,0 +1,284 @@
+---
+title: 前端编程范式与设计模式
+date: 2024-07-24 19:55:59
+categories: '技术'
+tags: ['编程范式','设计模式']
+cover: https://ilikestudy.cn/oss/2024%2F07%2F24%2F17-c6d2a1a6c1df6ac030a5bc26fc98a157-6fb4de.webp
+---
+在前端开发中，理解并运用各种编程范式和设计模式有助于提升代码的可维护性、扩展性和可读性。本文将介绍一些常见且有用的编程范式和设计模式，并提供详细的代码示例。
+
+## 编程范式
+
+### 1. 异步编程 (Asynchronous Programming)
+
+异步编程允许程序在等待某些任务完成时继续执行其他任务，从而避免阻塞。前端常见的异步操作包括网络请求、文件读取等。
+
+#### 使用回调函数
+```javascript
+function fetchData(callback) {
+  setTimeout(() => {
+    const data = { id: 1, name: 'John' };
+    callback(data);
+  }, 1000);
+}
+
+fetchData(data => {
+  console.log('Data received:', data);
+});
+```
+
+#### 使用Promise
+```javascript
+function fetchData() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const data = { id: 1, name: 'John' };
+      resolve(data);
+    }, 1000);
+  });
+}
+
+fetchData()
+  .then(data => {
+    console.log('Data received:', data);
+  })
+  .catch(error => {
+    console.error('Error:', error);
+  });
+```
+
+#### 使用async/await
+```javascript
+async function fetchData() {
+  try {
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    console.log('Data received:', data);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+```
+
+### 2. 面向对象编程 (Object-Oriented Programming, OOP)
+
+面向对象编程通过对象来组织代码，核心概念包括封装、继承和多态。
+
+#### 基本类与继承
+```javascript
+class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} makes a sound.`);
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(`${this.name} barks.`);
+  }
+}
+
+const dog = new Dog('Rex');
+dog.speak(); // Rex barks.
+```
+
+#### 多态
+```javascript
+class Cat extends Animal {
+  speak() {
+    console.log(`${this.name} meows.`);
+  }
+}
+
+const animals = [new Dog('Rex'), new Cat('Whiskers')];
+animals.forEach(animal => animal.speak());
+// Rex barks.
+// Whiskers meows.
+```
+
+### 3. 函数式编程 (Functional Programming, FP)
+
+函数式编程强调使用纯函数、不可变数据和函数组合，避免可变状态和副作用。
+
+#### 纯函数与不可变性
+```javascript
+const add = (a, b) => a + b;
+
+const numbers = [1, 2, 3];
+const newNumbers = numbers.map(num => num * 2);
+console.log(newNumbers); // [2, 4, 6]
+console.log(numbers); // [1, 2, 3] - 原数组不变
+```
+
+#### 高阶函数
+```javascript
+const withLogging = fn => (...args) => {
+  console.log(`Calling ${fn.name} with args:`, args);
+  return fn(...args);
+};
+
+const multiply = (a, b) => a * b;
+const loggedMultiply = withLogging(multiply);
+console.log(loggedMultiply(3, 4)); // Logs: Calling multiply with args: [3, 4], 12
+```
+
+### 4. 反应式编程 (Reactive Programming)
+
+反应式编程处理动态数据流和异步事件，常用于构建响应式UI和处理事件流。
+
+#### 使用RxJS处理事件流
+```javascript
+import { fromEvent } from 'rxjs';
+import { throttleTime, map } from 'rxjs/operators';
+
+const clicks = fromEvent(document, 'click');
+const positions = clicks.pipe(
+  throttleTime(1000),
+  map(event => ({ x: event.clientX, y: event.clientY }))
+);
+
+positions.subscribe(position => console.log('Clicked at:', position));
+```
+
+## 设计模式
+
+### 1. 单例模式 (Singleton Pattern)
+单例模式确保一个类只有一个实例，并提供全局访问点。
+
+```javascript
+class Logger {
+  constructor() {
+    if (Logger.instance) {
+      return Logger.instance;
+    }
+    Logger.instance = this;
+    this.logs = [];
+  }
+
+  log(message) {
+    this.logs.push(message);
+    console.log(`LOG: ${message}`);
+  }
+
+  printLogCount() {
+    console.log(`${this.logs.length} logs`);
+  }
+}
+
+const logger1 = new Logger();
+const logger2 = new Logger();
+
+logger1.log('This is the first log');
+logger2.log('This is the second log');
+logger1.printLogCount(); // 2 logs
+```
+
+### 2. 工厂模式 (Factory Pattern)
+工厂模式通过定义一个接口或抽象类来创建对象，而不指定具体类。
+
+```javascript
+class Shape {
+  constructor(type) {
+    this.type = type;
+  }
+
+  draw() {
+    console.log(`Drawing a ${this.type}`);
+  }
+}
+
+class ShapeFactory {
+  createShape(type) {
+    return new Shape(type);
+  }
+}
+
+const factory = new ShapeFactory();
+const circle = factory.createShape('circle');
+const square = factory.createShape('square');
+
+circle.draw(); // Drawing a circle
+square.draw(); // Drawing a square
+```
+
+### 3. 观察者模式 (Observer Pattern)
+观察者模式定义对象之间的一对多依赖关系，当一个对象状态改变时，所有依赖对象会收到通知并更新。
+
+```javascript
+class Subject {
+  constructor() {
+    this.observers = [];
+  }
+
+  addObserver(observer) {
+    this.observers.push(observer);
+  }
+
+  removeObserver(observer) {
+    this.observers = this.observers.filter(obs => obs !== observer);
+  }
+
+  notify(data) {
+    this.observers.forEach(observer => observer.update(data));
+  }
+}
+
+class Observer {
+  update(data) {
+    console.log(`Observer received data: ${data}`);
+  }
+}
+
+const subject = new Subject();
+const observer1 = new Observer();
+const observer2 = new Observer();
+
+subject.addObserver(observer1);
+subject.addObserver(observer2);
+subject.notify('Some data');
+```
+
+### 4. 装饰者模式 (Decorator Pattern)
+装饰者模式允许向现有对象添加新功能，而不改变其结构。
+
+```javascript
+class Coffee {
+  cost() {
+    return 5;
+  }
+}
+
+class MilkDecorator {
+  constructor(coffee) {
+    this.coffee = coffee;
+  }
+
+  cost() {
+    return this.coffee.cost() + 1;
+  }
+}
+
+class SugarDecorator {
+  constructor(coffee) {
+    this.coffee = coffee;
+  }
+
+  cost() {
+    return this.coffee.cost() + 0.5;
+  }
+}
+
+let coffee = new Coffee();
+coffee = new MilkDecorator(coffee);
+coffee = new SugarDecorator(coffee);
+console.log(coffee.cost()); // 6.5
+```
+## 前端中的依赖注入
+参考阅读[这篇文章](https://redi.wendell.fun/zh-CN/blogs/di)
+
+## 总结
+这些编程范式和设计模式各有其独特的应用场景，理解并掌握它们能够帮助开发者编写出更高效、可维护和可扩展的代码。在实际开发中，根据具体需求选择合适的范式和模式是提升项目质量的重要一环。