设计模式在vue中的应用（四）

时间  2019-11-07
标签 设计 模式 vue 应用 繁體版
原文   原文链接

前言

目录整理：
设计模式在vue中的应用（一）
设计模式在vue中的应用（二）
设计模式在vue中的应用（三）
设计模式在vue中的应用（四）
设计模式在vue中的应用（五）
设计模式在vue中的应用（六）
设计模式在vue中的应用（七）vue

为何要写这些文章呢。正如设计模式（Design Pattern）是一套被反复使用、多数人知晓的、通过分类的、代码设计经验的总结（来自百度百科）同样，也是想经过分享一些工做中的积累与你们探讨设计模式的魅力所在。
在这个系列文章中为了辅助说明引入的应用场景都是工做中真实的应用场景，固然没法覆盖全面，但以此类推也覆盖到了常见的业务场景react

今天的主角应该是咱们在使用框架（如：vue、react）开发中使用最多的设计模式——模板方法模式
定义（来自网络）：算法

模板方法模式在一个方法中定义一个算法的骨架，而将一些步骤的实现延迟到子类中。模板方法使得子类能够在不改变算法结构的状况下，从新定义算法中某些步骤的具体实现编程

1、OOP实现

一、算法骨架

一个动物身体结构算法有：头部、身体、脚设计模式

// template class
// 注意：JavaScript里面没有接口的概念，与传统的OOP实现有必定的缺陷
class AnimalTemplate {
  constructor() {}
  head () {}
  body () {}
  foot () {}
  render () {
    // 算法过程 ———— 身体部位排列顺序头、身体、脚
    // render方法不能被子类重写，没法经过JavaScript自己实现需人为遵照
    this.head()
    this.body()
    this.foot()
  }
}
复制代码

二、子类算法实现

// 有一头猪
class Pig extends AnimalTemplate {
  head () {
    console.log('head from pig')
  }
  body () {
   console.log('body from pig')
  }
  foot () {
    console.log('foot from pig')
  }
}

const pig1 = new Pig()
pig1.render() // 执行算法

// 有一只鸡
class Chicken extends AnimalTemplate {
  head () {
    console.log('head from chicken')
  }
  body () {
   console.log('body from chicken')
  }
  foot () {
    console.log('foot from chicken')
  }
}
const chicken1 = new Chicken()
chicken1.render() // 执行算法
复制代码

2、react实现

react中有class组件采用上面OOP的实现彻底没问题，可是继承的方式好像在react中不怎么受欢迎，更流行是函数式编程（props传递）bash

一、来一个很常见的场景

class Parent {
  constructor() {}
  render () {
    <div>
      <div name="tom"></div>
      <!-- 算法过程：children要渲染在name为joe的div中 -->
      <div name="joe">{this.props.children}</div>
    </div> 
  }
}
class Stage {
  constructor() {}
  render () {
    // 在parent中已经设定了children的渲染位置算法
    <Parent>
      // children的具体实现
      <div>child</div>
    </Parent> 
  }  
}
复制代码

因此咱们在写jax时就已是在使用模板方法模式网络

二、再次实现OOP中完成的例子

// 算法模板
class AnimalTemplate {
  constructor() {
    ...
  }
  render () {
    // 算法过程————头、身体、脚的顺序
    return (
      <div>
        {this.props.renderHead()}
        {this.props.renderBody()}
        {this.props.renderFoot()}
      </div>
    )
  } 
}
// 具体需求
class Stage {
  constructor() {}
  pigRenderHead () {
    return <div>pig head</div>
  }
  pigRenderBody () {
    return <div>pig body</div>
  }
  pigRenderFoot () {
    return <div>pig foot</div>
  }
  chickenRenderHead () {
    ...
  }
  chickenRenderBody () {
    ...
  }
  chickenRenderFoot () {
    ...
  }
  render () {
    <div>
      <AnimalTemplate
        renderHead={this.pigRenderHead}
        renderBody={this.pigRenderBody}
        renderFoot={this.pigRenderFoot}
      />
      <AnimalTemplate
        renderHead={this.chickenRenderHead}
        renderBody={this.chickenRenderBody}
        renderFoot={this.chickenRenderFoot}
      />
    </div>
    
  }  
}
复制代码

总结

经过这节相信你们对react的render props有了更清晰的认识数据结构

3、vue实现

有了上面两步的推导要理解模板方法模式在vue中的应用就比较简单了。框架

1，children在name为joe的div中

// parent.vue
<template>
  <div>
    <div name="tom"></div>
    <div name="joe">
      <!--vue中的插槽渲染children-->
      <slot />
    </div>
  </div>
</template>
复制代码
// stage.vue
<template>
  <div>
    <parent>
      <!-- children的具体实现 -->
      <div>child</div>
    </parent>
  </div>
</template>
复制代码

二、再次实现OOP中完成的例子

// AnimalTemplate.vue
<template>
  <div>
    <slot name="head"></slot>
    <slot name="body"></slot>
    <slot name="foot"></slot>
  </div>
</template>
复制代码
// stage.vue
<template>
  <div>
    <animal-template>
      <div slot="head">pig head</div>
      <div slot="body">pig body</div>
      <div slot="foot">pig foot</div>
    </animal-template>
    <animal-template>
      <div slot="head">chicken head</div>
      <div slot="body">chicken body</div>
      <div slot="foot">chicken foot</div>
    </animal-template>
  </div>
</template>
复制代码

总结

从OOP实现到react实现再推导出vue实现，如今你们应该能很轻松的理解在vue中模板方法模式的应用是怎样的函数式编程

4、搞点事情

经过上面的介绍咱们应该是掌握了模板方法模式的理论知识，有了新技能就应该应用下。

场景：
列表渲染应该是常见操做，不论是什么列表都会有一下几个特色：请求数据时显示loading状态、没有数据时给出提示、有数据就渲染列表

1，算法封装

根据模板方法模式的理论咱们首先须要封装列表渲染的算法：

  • 请求数据 ——> loading
  • 数据为空 --> 空数据提示
  • 获取到数据 ——> 渲染列表
// renderList.vue
<template>
  <div>
    <img v-if="isLoading" src="./loading.gif" />
    <div v-if="isEmpty">数据为空</div>
    <div v-else>
      <div v-for="(item, index) in data" :key="index">
        <!-- vue中的做用域插槽 -->
        <slot name="item" :data="item" />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'RenderList',
    props: {
      isLoading: Boolean,
      data: Array,
    },
    computed: {
      isEmpty () {
        return this.data.length < 1
      }
    }
  }
</script>
复制代码

2，定义某些步骤的实现（列表项）

// stage.vue
<template>
  <div>
   <render-list :isLoading="isStudentsLoding" :data="students">
     <!-- 学生信息的渲染 -->
     <div slot="item" slot-scope="{ data }">
       <div>名字：{{ data.name }}</div>
       <div>年龄：{{ data.age }}</div>
     </div>
   </render-list>
   <render-list :isLoading="isFamilyLoading" :data="family">
     <!-- 家庭成员的渲染 -->
     <div slot="item" slot-scope="{ data }">
       <!-- 不一样的DOM结构 -->
       <div>
         <span>称呼：{{ data.role }}</span>
         名字：{{ data.name }}
       </div>
     </div>
   </render-list>
  </div>
</template>
<script>
  import RenderList form './renderList'
  export default {
    data () {
      return {
        isStudentsLoding: false,
        isFamilyLoading: false,
        students: [
          { name: 'aa', age: '18' },
          { name: 'bb', age: '19' },
          { name: 'cc', age: '120' }
        ],
        family: [
          { name: 'aaaa', role: '爸爸' },
          { name: 'bbbb', role: '妈妈' },
          { name: 'cccc', role: '本人' },
        ]
      }
    },
    components: {
      RenderList   
    }
  }
</script>
复制代码

3，更复杂点

在上面渲染学生列表时我想将学生每科的成绩也展现出来，数据结构以下:

export default {
  ...
  data () {
    return {
      students: [
	    { name: '小明',
	      age: 16, 
	      score: [
	        { course: '语文', value: 86 },
	        { course: '数学', value: 88 }
	      ]
	    },
	    { name: '小李',
	      age: 16, 
	      score: [
	        { course: '语文', value: 90 },
	        { course: '数学', value: 85 }
	      ]
	    }
      ]
    }
  }
  ...
}
复制代码
在children中手动实现？
<render-list :isLoading="isStudentsLoding" :data="students">
 <div slot="item" slot-scope="{ data }">
   <div>名字：{{ data.name }}</div>
   <div>年龄：{{ data.age }}</div>
   <!-- 咱们能拿到每一个学生的信息，手动渲染成绩列表 -->
   <div v-for="score in data.score" :key="score.course">
     <slot name="score" :data="score" />
   </div>
 </div>
</render-list>
复制代码
调整咱们的列表算法

上面的方式或许能够达到咱们目的，可是要渲染列表对使用者来讲要关心的事太多了，须要调整咱们的算法模板

// renderList.vue
<template>
  <div>
    <img v-if="isLoading" src="./loading.gif" />
    <div v-if="isEmpty">数据为空</div>
    <div v-else>
      <div v-for="(item, index) in source" :key="index">
        <!-- 学生信息 -->
        <slot name="item" :data="item"></slot>
        <!-- 学生分数 -->
        <div class="score">
          <div v-for="score in item.score" :key="score.course">
            <slot name="score" :data="score" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
复制代码
// stage.vue
<template>
  <div>
   <render-list :isLoading="isStudentsLoding" :data="students">
     <!-- 学生信息渲染规则 -->
     <div slot="item" slot-scope="{ data }">
       <div>名字：{{ data.name }}</div>
       <div>年龄：{{ data.age }}</div>
     </div>
     <!-- 学生成绩渲染规则 -->
     <div slot="score" slot-scope="{ data }">
       <div>——课程：{{ data.course }}</div>
       <div>——成绩：{{ data.value }}</div>
     </div>
   </render-list>
  </div>
</template>
复制代码

总结

这一篇主要分享了vue中slot的设计模式理念，结合列表渲染的场景向你们展现了模板方法模式的应用。
以前在网上看到有人用各类骚操做实现vue的render props，如今看看有必要么，slot无论怎么看都比较顺眼（在我写这篇文章时slot的API有点捉急，v2.6.0 很好解决了这个问题）

为何开头说模板方法模式是vue、react开发中使用最多的设计模式？

经过上面的介绍相信你们已经感觉到模板方法模式的特色：
1，封装一个算法模板
2，用户负责某一步的具体实现

如今想一想vue，react内部封装好了diff算法、状态改变触发更新的机制、生命周期，咱们在使用框架时只
须要按照语法规则使用它们的API完成咱们的业务逻辑，这也就是模板方法模式
复制代码

本文实现一样适用于react，为何文章以vue作题？vue的template让咱们在理解一些概念的时候可能会有点不适应，而react的jsx能够看作就是在写JavaScript对各类概念实现更灵活 友情提示：设计模式在vue中的应用应该会写一个系列，喜欢的同窗记得关注下

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程