记录一次Vue.js组件开发过程中拆分的的思考和过程。

在朋友的带领（保驾护航）下，我们在最近开发的项目中选用了Vue.js —— 这款被誉为 “当今前端三驾马车之一” 的渐进式框架 来做前端开发。

虽然之前也接触并在项目中使用过Vue.js，但都不够深入，以至于未能体会到Vue的优势，就像一个盲目追星的小粉丝。

通过近期项目的开发，每天与Vue.js打交道，时间一长也能够渐渐领略到它的优势了。

选用Vue.js可以获得较快的开发速度，组件复用 和 数据驱动 两大特性是让我在开发过程中感觉最爽的。

针对 组件复用 这一话题，记录一下自己在开发过程中因为了解不够深入走的一些弯路和思考。

项目背景

该项目与教育行业有关，旨在通过互联网来加强和丰富家长与老师或家长与学校的联系，载体是App。

APP的结构和设计不会像一般网页那样灵活（或者说是随意？），这为组件化开发提供了很好的施展拳脚的地方。

本文以正在开的这个项目中的 作业、通知、沟通和请假等模块需要的 卡片组件 为例来写作。

Vue.js组件拆分小记 - 图1

可以见得，这些卡片长的大同小异，无非就是字段和布局的小区别。

这样看来，每一个会节约时间提高效率（会聪明地偷懒）的开发人员脑子里都会出现四个字——组件复用。

相关知识

关于Vue的组件基础知识可以传送到Vue官方文档。

（ 传送门 ）

最初设计

最初的想法是仅用一个卡片组件，在不往下分层（没有子组件）的情况下来承接 所有模块的卡片的显示。

至于处理不同模块间“卡片”的字段、样式和子部分的差异性（解耦）和事情处理，主要做了如下（愚昧的）考虑：

  • 通过 Props 传入type参数，再通过 v-if-else 指令来写不同的代码
  • 通过 type参数 编写methods 通过函数来获取 不同模块对应的不同接口地址或接口参数
  • 为了更进一步偷懒，最初设计把事件的处理（包括网络接口数据的请求）也写在组件中，现在想来真是蠢萌蠢萌的。

Vue.js组件拆分小记 - 图2

这样写出来的卡片组件大概长成这个样子

Card.vue

  1. <style scoped rel="stylesheet/scss" lang="scss">
  2.   //omit
  3. </style>
  5. <template>
  6.   <div class="card-container">
  7.     <div class="card-container-inner">
  8.       <v-touch tag="div" class="card-header" @tap="enterItem(config.itemPath)">
  9.         <div class="card-avatar">
  10.           <Avatar v-if="data.avatar" :url="data.avatar"/>
  11.           <Avatar v-else/>
  12.         </div>
  13.         <div class="card-header-right">
  14.           <h2 class="card-title theme-primary-color">{{ data.name }} <span v-if="data.read!==1">未读</span></h2>
  15.           <p class="card-date-author">
  16.             <Date class="card-date" :time="data.create_time"></Date>
  17.             <span class="card-author" v-if="data.sendor">来自 {{ data.sendor }}</span>
  18.           </p>
  19.         </div>
  20.       </v-touch>
  21.       <v-touch tag="div" class="card-content" @tap="enterItem(config.itemPath)">
  22.         {{ getContentDesc(data.content) }}
  23.         <section v-if="data.images.length >= 1" class="card-image-section"
  24.                  :class="[data.images.length > 1 ? 'on-multi' : 'on-single', data.images.length === 2 ? 'as-double' : '']">
  25.           <div v-for="image in data.images" :key="image" class="card-image-item">
  26.             <Pic :url="image"></Pic>
  27.           </div>
  28.         </section>
  29.         <section v-if="data.files.length >= 1" class="card-section">
  30.           <span class="card-section-tag theme-primary-color"><Icon name="attach" class="theme-primary-color" size="0.8rem"></Icon> 附件 ({{ data.files.length }})</span>
  31.         </section>
  32.       </v-touch>
  33.       <div v-if="config.hasFooter" class="card-footer">
  34.         <v-touch tag="a" class="card-footer-item" @tap="enterComment(config.formPath)">
  35.           <Icon name="comment"></Icon> 评论
  36.         </v-touch>
  37.         <v-touch tag="a" class="card-footer-item" @tap="clickLikeBtn(data.liked)" :class="{active: data.liked}">
  38.           <Icon name="like"></Icon> 赞
  39.         </v-touch>
  40.       </div>
  41.     </div>
  42.   </div>
  43. </template>
  45. <script>
  46. export default {
  47.   name: 'card',
  48.   props: {
  49.     data: {},
  50.     type: {}
  51.   },
  52.   data() {
  53.     return {};
  54.   },
  55.   methods: {
  56.     requireApi(type) {
  57.       const api = {
  58.         homework: '/homework/view/like',
  59.         notify: '/notify/view/like',
  60.         mind: '/mind/view/like'
  61.       };
  62.       return api[type];
  63.     },
  64.     requireParam(type) {
  65.       const param = {
  66.         homework: {
  67.           homeworkid: this.data.id,
  68.           like: this.data.liked
  69.         },
  70.         notify: {
  71.           notifyid: this.data.id,
  72.           like: this.data.liked
  73.         },
  74.         mind: {
  75.           mindid: this.data.id,
  76.           like: this.data.liked
  77.         }
  78.       };
  79.       return param[type];
  80.     },
  81.     getContentDesc(content = '') {
  82.       content = this.Helper.string.strip_tags(content) || '';
  83.       return content.length > 200 ? content.substr(0, 200) + '...' : content;
  84.     },
  85.     clickLikeBtn: function(status) {
  86.       status === 0 ? this.data.liked = 1 : this.data.liked = 0;
  87.       this.Api.get(this.requireApi(this.type), this.requireParam(this.type)).on('success', json => {
  88.         this.data.liked = json.data.like;
  89.       });
  90.     },
  91.     enterItem: function(itemPath) {
  92.       this.Page.open(itemPath, {
  93.         item: this.data
  94.       });
  95.     },
  96.     enterComment: function(formPath = '') {
  97.       if (!formPath) return false;
  98.       this.Page.pop(formPath, {
  99.         itemId: this.data.id
  100.       });
  101.     }
  102.   }
  103. };
  104. </script>

有没有一种看到一个又臭又长假组件的感觉？

在父组件（页面）中要调用它的时候这样写：

  1. //Template部分
  3. <card 
  4.     v-for="(item,index) in homeworkList" 
  5.     :key="index"
  6.     :data="item"
  7.     :type="type"
  8.     :config="config">
  9. </card>
  11. //Script部分
  12. <script>
  13. export default {
  14. data() { 
  15.   return {
  16.       type: 'homework',
  17.       data: {
  18.         homeworkList: []
  19.       },
  20.       config: {
  21.         hasFooter: 'true',
  22.         formPath: '/module/homework/form',
  23.         itemPath: '/module/homework/item'
  24.       }
  25.   }
  26. }
  27. </script>

说它是假组件的原因主要在于，开发到后面的模块的时候感觉无法再复用这样的so-called卡片组件了，因为我们遇到了下面很典型的问题：

  • 从对应功能上看：并不是所有卡片Footer中两个按钮都是 点赞 和 评论 的功能，在一个新的模块中它不再需要点赞而是需要收藏了
  • 从数据结构上看：并不是后端返回的所有接口都包含预期的字段、返回相同的格式（在这个项目中我们至少前后端随时可以交流、可以商量、可以将就、可以妥协，可以保证一致性，但以后做开发很难保证）
  • 从页面结构上看：并不是所有卡片都要显示Footer部分，并不是所有卡片头部都是白色，万一某一个卡片是个五彩斑斓的黑呢

虽然通过绑Class、传props值、在代码里写分支结构可以解决这样的问题，但这样代码看起来 很臃肿 很杂乱 很不优雅，对于我这种强迫症而言很难受。

实在不想再多写分支结构代码来做判断解耦的时候后面就出现了 card-activity（活动模块的卡片）、card-leave（请假模块的卡片），简直违背初心。 = =

后面挣扎了下，刚好想起最近在哪里看过一句话 “代码写不下去了，一定是最初设计出问题了”，那就改吧！

重新设计

好吧，让我来重新思考一下。

这一次，设计 一组 组件，在父组件的基础上往下分子组件。

模块间卡片组件的解耦和事件处理采用如下构思：

  • 通过 Slot插槽 做主要解耦工作（灵活性高，可直接写“块状代码”和嵌入其他组件）
  • 通过 props传值 做不必采用插槽传值的数据传递
  • 一般情况下不在卡片内部处理事件，通过$emit将事件“发散”出去在父组件中进行监听再做对应处理

Vue.js组件拆分小记 - 图3

Card.vue

  1. <style scoped rel="stylesheet/scss" lang="scss">
  2.   //omit
  3. </style>
  5. <template>
  6.   <div class="card-container">
  7.     <div class="card-container-inner">
  8.       <slot></slot>
  9.     </div>
  10.   </div>
  11. </template>
  13. <script>
  14. export default {
  15.   name: 'card'
  16. };
  17. </script>

slot插槽为子组件的插入留下空间。

card-header.vue （卡片组件的 头部子组件）

  1. <template>
  2.   <v-touch tag="div" class="card-header" @tap="clickHeader">
  3.     <div class="card-avatar">
  4.       <Avatar v-if="avatar" :url="avatar"/>
  5.       <Avatar v-else/>
  6.     </div>
  7.     <div class="card-text">
  8.       <h2 class="card-title theme-primary-color">{{title}}</h2>
  9.       <p class="card-info">
  10.         <slot name="info">*xcard-header-info</slot>
  11.       </p>
  12.     </div>
  13.     <div class="card-tag">
  14.       <slot name="tag"></slot>
  15.     </div>
  16.   </v-touch>
  17. </template>
  19. <script>
  20. export default {
  21.   name: 'card-header',
  22.   props: {
  23.     title: {
  24.       default: '*xcard-header-title'
  25.     },
  26.     avatar: {}
  27.   },
  28.   data() {
  29.     return {};
  30.   },
  31.   methods: {
  32.     clickHeader() {
  33.       this.$emit('click');
  34.     }
  35.   }
  36. };
  37. </script>

card-content （卡片组件的 正文内容子组件）

  1. <style scoped rel="stylesheet/scss" lang="scss">
  2.   //omit
  3. </style>
  5. <template>
  6.   <v-touch tag="div" @tap="clickContent">
  7.     <div class="card-content">{{ getContentDesc(content) }}</div>
  8.     <slot></slot>
  9.   </v-touch>
  10. </template>
  12. <script>
  13. export default {
  14.   name: 'card-content',
  15.   props: {
  16.     content: {}
  17.   },
  18.   data() {
  19.     return {};
  20.   },
  21.   methods: {
  22.     clickContent() {
  23.       this.$emit('click');
  24.     },
  25.     getContentDesc(content = '') {
  26.       content = this.Helper.string.strip_tags(content) || '';
  27.       return content.length > 200 ? content.substr(0, 200) + '...' : content;
  28.     }
  29.   }
  30. };
  31. </script>

card-footer （卡片组件的 尾部组件）

  1. <style scoped rel="stylesheet/scss" lang="scss">
  2.   //omit
  3. </style>
  5. <template>
  6.   <div class="card-footer">
  7.     <v-touch tag="a" class="card-footer-item" @tap="clickLeftBtn()" :class="{'theme-active-color': leftBtnActive}">
  8.       <slot name="leftBtn">
  9.         <Icon name="comment"/> 评论
  10.       </slot>
  11.     </v-touch>
  12.     <v-touch tag="a" class="card-footer-item" @tap="clickRightBtn()" :class="{'theme-active-color': rightBtnActive}">
  13.       <slot name="rightBtn">
  14.         <Icon name="like"/> 赞
  15.       </slot>
  16.     </v-touch>
  17.   </div>
  18. </template>
  20. <script>
  21. export default {
  22.   name: 'card-footer',
  23.   props: {
  24.     type: {},
  25.     leftBtnActive: {
  26.       default: false
  27.     },
  28.     rightBtnActive: {
  29.       default: false
  30.     }
  31.   },
  32.   data() {
  33.     return {};
  34.   },
  35.   methods: {
  36.     clickLeftBtn() {
  37.       this.$emit('clickLeftBtn');
  38.     },
  39.     clickRightBtn() {
  40.       this.$emit('clickRightBtn');
  41.     }
  42.   }
  43. };
  44. </script>

还有card-section-image 用于展示四宫格和九宫格的配图、card-section-attach 用于展示附件……

现在在父组件（页面）中如果要调用卡片组件并做相关配置就像搭积木一样：

  1. // 一个精简的结构
  2.   <Card>
  3.       <xcard-header></xcard-header>
  4.       <xcard-content></xcard-content>
  5.       <xcard-footer></xcard-footer>
  6.   </Card>
  8. // 一个具体例子
  9.             <Card class="card-theme-flat" v-for="(item,index) in homeworkList" :key="index">
  10.               <xcard-header
  11.                 :title="item.name"
  12.                 :avatar="item.avatar"
  13.                 @click="enterItem(item)">
  14.                 <span slot="info"><Date :time="item.create_time"></Date> 来自 {{item.sendor}}</span>
  15.               </xcard-header>
  16.               <xcard-content
  17.                 :content="item.content"
  18.                 @click="enterItem(item)">
  19.                 <xcard-section
  20.                   v-if="item.images.length >= 1"
  21.                   icon="image"
  22.                   :name="'图片'+' ( '+item.images.length+' ) '">
  23.                   <ImageGallery :imageList="item.images"></ImageGallery>
  24.                 </xcard-section>
  25.                 <xcard-section
  26.                   v-if="item.files.length >= 1"
  27.                   icon="attach"
  28.                   :name="'附件'+' ( '+item.files.length+' ) '">
  29.                 </xcard-section>
  30.               </xcard-content>
  31.               <xcard-footer
  32.                 @clickLeftBtn="enterForm(item.id)"
  33.                 @clickRightBtn="likeTrigger(item)"
  34.                 :rightBtnActive="item.liked ===1?true:false">
  35.               </xcard-footer>
  36.             </Card>

总结思考

这段时间深入使用Vue.js让我更进一步地喜欢上了这个迷人的框架，希望以后能用它开许多迷人的作品。

以前以为实现同样的效果，代码写的少就是节约时间，现在越来越发现，要节约时间前期的架构很重要，不然后期会带着烦躁的心情同时耗费很多时间去改旧的代码。

就像用新的技术好的地基来盖一栋楼房和推到地基不稳的旧楼来盖一栋楼房一样的。