类的划分——边界类

在程序设计时将类划分为边界类、操作类、实体类，明确地给出每种类的职责。其中操作类和边界类是面向对象程序设计中最重要内容，实体类有规律可循，比较容易掌握。

概念

一般指完成人机交互界面类组成；当前边界类的开发主要由各种界面控件、人机交互自定义组件组成，包含了样式、属性和操作等，如视频播放组件、计数器组件均为边界类，隐藏了实现细节，用户简单的通过暴露出的接口或属性即可复用，大大提高了前端开发的开发效率。

自定义组件代码

使用VUE开发一个租售信息列表自定义组件

<template>  
  <div class="today-body">  
    <div class="today-list clearfix">  
      <div class="badge-box fl">  
        <span class="today-badge green" v-if="option.tradeDesc=='出售' || option.tradeDesc=='租购'">售</span>  
        <span class="today-badge red" v-if="option.tradeDesc=='租售' || option.tradeDesc=='租购' ">租</span>  
        <span class="today-badge white" v-if="option.typeDesc">私</span>  
        <span class="today-badge white" v-if="option.levelDesc">{{option.levelDesc}}</span>  
        <p class="today-time">{{option.followTime}}</p>  
      </div>  
      <div class="info-box fl">  
        <p class="info-name"><span>{{option.communityName}}</span><span>•{{option.roomNum }}室</span><span>{{option.hallNum }}厅</span><span>{{option.toiletNum }}卫</span><span>{{option.area }}•㎡</span></p>  
      </div>  
      <div class="price-box fr">  
        <p class="info-price">{{option.salePrice}}  
          <span>万</span>  
        </p>  
        <p class="info-rent">{{option.rentPrice}}  
          <span>元/月</span>  
        </p>  
      </div>  
    </div>  
  </div>  
</template>  
<script>  
  export default {  
    name: "comContentList",  
    props: ['option'], //传入的每一项的值  
    data() {  
      return {  
      };  
    }  
  }  
</script>   
<style scoped="scoped">  
   //组件的样式在此定义
</style>  

组件中封装将展示样式进行封装，对外暴露出属性“option”进行调用；使用时按照组件接口要求的数据格式即可使用。调用代码如下：

<template>  
  <div class="home">  
    <Card class="bg-white today">  
      <ComContentList v-for="item in 组件遍历的数组 " v-bind:key="item.id" v-bind:option="item"></ComContentList>  
    </Card>  
  </div>  
</template>  
  
<script>  
  import ComContentList from "../components/comContentList"; //引入组件  
  export default {  
    data() {  
      return {  
        records:[]  
      }  
    },  
    components: {  
      ComContentList //注册组件  
    },  
    created() {  
      this.records = "后台接口返回值"; //后台提取组件值  
    },  
    methods: {}  
  }  
</script> 
 

执行结果如下图所示：

拓展

目前，前端主流的vue、anglus、react三大开发框架均支持组件化开发，一个对外完整的页面是对各种自定义组件的调度。边界类的设计就是要识别和设计人机交互中的各种组件，封装一个组件就是一个可复用边界类。如：试题组件就是一个具有层次的结构的，首先定义一个试题组件作为所有类型试题的父类，定义了试题的编号、题干等、样式等，通过插槽，再定义单项选择题、多选题、判断正误题，形成三个子组件，具有一定的层次性。