这是第六届青训营的第五篇实践笔记

前端框架的设计模式有哪些

组件模式：React、Vue和Angular等框架都采用了组件模式来构建用户界面。组件模式将界面划分为独立的可重用组件，每个组件有自己的状态和渲染逻辑。
单向数据流模式：在React和Vue中，使用了单向数据流模式（也称为单向绑定），数据从父组件流向子组件，子组件通过接收属性来更新自身的状态和渲染。
观察者模式：Vue框架利用观察者模式实现了响应式数据绑定。当数据发生改变时，Vue能够自动更新相关的视图。这种模式通过建立数据和视图之间的依赖关系，实现了自动更新和响应式的特性，提供了更好的用户体验。
装饰者模式：在Angular框架中，使用了装饰者模式来扩展组件的功能。装饰者模式允许通过对现有组件进行装饰来添加新的行为和属性，而不改变其原始结构。Angular的装饰器（Decorator）是一种使用装饰者模式的机制，可以用于添加元数据、依赖注入等功能，以实现更灵活和可扩展的组件设计。
策略模式：在前端表单验证中，常常使用策略模式。例如，在React和Vue中，可以通过定义不同的验证策略（如必填、数字、邮箱等），并将其应用于表单的不同字段上。这种模式使得验证逻辑可以独立于组件，并且可以轻松地扩展和修改验证规则。

实例

使用Vue组件模式编写一个todolist

<template>
  <div>
    <input v-model="newTodo" placeholder="添加新的待办事项">
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo) {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

在这个案例中，我们定义了一个Vue组件。它包含一个输入框和一个按钮用于添加新的待办事项，以及一个待办事项列表。

addTodo方法用于将新待办事项添加到列表中，并清空输入框。removeTodo方法用于从列表中移除指定索引的待办事项。

在模板中，我们使用了v-model指令将输入框的值与newTodo进行双向绑定，使得用户输入的内容能够实时更新。使用v-for指令遍历todos数组，渲染每一个待办事项，并提供删除按钮。因此，这个案例不仅涉及了组件模式，也涉及了观察者模式实现数据绑定。

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

前端框架的设计模式有哪些

实例