设计模式在前端开发中的粗浅应用

开场

不知道怎么开场，就只能假装自己很懂的先来介绍两个概念。

设计模式

官方的解释：设计模式代表了最佳实践。

作为一个前端白菜，粗浅的理解一下：设计模式其实就是代码结构设计中的最佳解决方案。

大佬们，再看：
有这么一种设计模式 —— 建造者模式（Builder Pattern）： 使用多个简单的对象一步一步构建成一个复杂的对象。

组件化

组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程。
目的为了解耦：把复杂系统拆分成多个组件，分离组件边界和责任，便于独立升级和维护。

继续粗浅的理解一下，就是将复杂的功能拆解成单一功能的小零件。

那是不是可以这么理解：前端的组件化开发其实就是建造者模式的实践。

实践

假定一种场景

需要一个用户注册的功能。要求以邮箱为用户名；需要密码，并确认密码；有昵称，但是可选填；一个提交按钮。

分析

很显然，这里比较明显的零件有两种：带标题的输入框 和 带文字的按钮。
所以，我们需要做两个零件？

答案是：不需要！
在实际情况下，按钮肯定是一个需要被处理的组件。但是，就当前场景而言，输入框才是我们要去拆解的组件。也就是说，拆解的最终目标是为了复用。

So, no more BB~ 代码走起。

编写代码

以vue为例

基础组件：
components/BaseInput.vue

<template>
  <div>
    <label>{{labelText}}</label>
    <input :type="inputType" :placeholder="inputPlaceholder" />
  </div>
</template>

<script>
  export default {
    props: {
      labelText: String,
      inputType: String,
      inputPlaceholder: String
    }
  }
</script>

<style>
</style>

页面引用：
pages/register.vue

<template>
  <BaseInput label-text="用户名" input-type="text"></BaseInput>
  <BaseInput label-text="密码" input-type="password"></BaseInput>
  <BaseInput label-text="确认密码" input-type="password"></BaseInput>
  <BaseInput label-text="昵称" input-type="text"></BaseInput>
  <button>提交</button>
</template>

<script>
  import BaseInput from '../components/BaseInput.vue'
  
  export default {
    components: {
      BaseInput
    }
  }
</script>

<style>
</style>

至此，已经完成了注册的基本组件构造。

总结

简单的分割组件很容易，不过更重要的是要思而后动。设计模式说白了就是优秀的程序员们对编程思想优秀见解的总结。当遇到实际问题时使用设计模式的思维方式或许能打开新世界的大门。