乐趣区

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

jiezi

收场

不晓得怎么收场，就只能伪装本人很懂的先来介绍两个概念。

设计模式

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

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

大佬们，再看：
有这么一种设计模式 —— 建造者模式（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>

至此，曾经实现了注册的根本组件结构。

总结

简略的宰割组件很容易，不过更重要的是要思而后动。设计模式说白了就是优良的程序员们对编程思维优良见解的总结。当遇到理论问题时应用设计模式的思维形式或者能关上新世界的大门。

退出移动版