一、学习框架前需要掌握多少 JS 或者 TS

State （状态）
Effects （副作用）
Memoization （记忆化）
Templating and rendering （模板与渲染）

所有现代框架都从这些概念中派生出它们的功能

尽可能多地去学以让更好的你理解它们所基于的概念。

二、常见的设计模式，优缺点和使用案例：

MVC (Model-View-Controller) 模式：
- 优点： 分离关注点，使代码更加模块化和可维护。模型处理数据逻辑，视图负责展示，控制器协调两者之间的交互。
- 缺点： 对于复杂应用，模型和视图之间的依赖可能变得复杂。过度依赖控制器可能导致控制器膨胀。
- 案例： Angular 框架使用MVC模式。模型是数据层，视图是HTML模板，控制器通过组件来管理模型和视图之间的通信。
MVVM (Model-View-ViewModel) 模式：
- 优点： 更进一步分离视图和模型，通过ViewModel实现双向数据绑定，视图状态的变化自动反映在模型中，反之亦然。
- 缺点： 可能会增加一些性能开销，特别是在复杂的双向绑定场景下。
- 案例： Vue.js 使用MVVM模式。ViewModel通过双向数据绑定实现模型和视图之间的交互。
单例模式：
- 优点： 保证一个类只有一个实例，全局唯一的访问点，避免了重复创建相同对象。
- 缺点： 过度使用可能导致代码耦合性增加，单例对象的状态可能会影响其他地方。
- 案例： 在React中，应用的状态管理工具Redux的store对象可以被看作是单例模式的应用。
观察者模式：
- 优点： 实现了发布-订阅机制，当一个对象状态发生改变时，所有依赖它的对象都会得到通知。
- 缺点： 如果观察者过多，可能导致通知的开销增加。
- 案例： Angular的事件系统，Vue.js的自定义事件以及浏览器的原生事件机制都可以看作是观察者模式的应用。
策略模式：
- 优点： 定义一系列算法，将它们封装起来，使它们可以互相替换。客户端可以独立于具体算法变化。
- 缺点： 需要创建多个策略类，增加了类的数量。
- 案例： 在前端中，可以使用策略模式来实现不同的表单验证策略，例如校验邮箱、手机号等。

这些是前端框架中常见的设计模式及其优缺点和使用案例。不同的设计模式适用于不同的情景，选择合适的设计模式有助于提高代码的可维护性、扩展性和复用性。、当涉及到代码示例时，我会尽量提供简洁且易于理解的示例。以下是各个设计模式的代码示例：

3、代码展示

MVC (Model-View-Controller) 模式示例 - 使用JavaScript：

// Model
class UserModel {
  constructor(name) {
    this.name = name;
  }
}

// View
class UserView {
  render(user) {
    console.log(`User Name: ${user.name}`);
  }
}

// Controller
class UserController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }

  updateUser(name) {
    this.model.name = name;
    this.view.render(this.model);
  }
}

const user = new UserModel("Alice");
const view = new UserView();
const controller = new UserController(user, view);

controller.updateUser("Bob");

MVVM (Model-View-ViewModel) 模式示例 - 使用Vue.js：

HTML：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

JavaScript：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

单例模式示例 - 使用JavaScript：

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }

  log() {
    console.log("This is a singleton instance.");
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true

观察者模式示例 - 使用JavaScript：

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  notify(message) {
    this.observers.forEach(observer => observer.update(message));
  }
}

class Observer {
  update(message) {
    console.log(`Received message: ${message}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify("Hello, observers!");

策略模式示例 - 使用JavaScript：

class Validator {
  constructor(strategy) {
    this.strategy = strategy;
  }

  validate(value) {
    return this.strategy.validate(value);
  }
}

class EmailValidationStrategy {
  validate(value) {
    return /\S+@\S+\.\S+/.test(value);
  }
}

class PhoneValidationStrategy {
  validate(value) {
    return /^[0-9]{10}$/.test(value);
  }
}

const emailValidator = new Validator(new EmailValidationStrategy());
console.log(emailValidator.validate("example@example.com")); // true

const phoneValidator = new Validator(new PhoneValidationStrategy());
console.log(phoneValidator.validate("1234567890")); // true

这些代码示例演示了每个设计模式的特点以及其在实际代码中的应用。不同的设计模式在不同情境下能够提供更清晰的代码结构和更好的代码组织方式。

前端框架中的设计模式|青训营

一、学习框架前需要掌握多少 JS 或者 TS

二、常见的设计模式，优缺点和使用案例：

3、代码展示