深入理解组件的扩展性和易用性

深入理解组件的扩展性和易用性

1. 前言

    在前端开发工作中尤其是项目起步阶段,经常会选取第三方组件库快速构建,拿Vue生态来说,大众普遍对element-uiiview 情有独钟,其中element-ui多用于对接前台项目,iview多用于对接后台管理项目。可不论是用哪种组件库,只要其易用性、扩展性和感官性足够强,通常都会为我们带来良好的体验。然而,当我们过分对第三方组件库产生依赖后,它也可能带来一些问题。比如A项目依赖element-ui,B项目依赖iview,且为了避免出现组件样式污染,通常一个项目只引用一个组件库。这样当在A项目中通过使用element-ui的一些基础组件(如select)“封装”了一个新组件,我就不能直接在B项目中使用,而还是需要依赖iview 去重新写一套。久而久之,如果两个项目的共用组件越来越多,那将是不小的工作量。所以,这个时候就需要我们自己动手丰衣足食了。

    当前各个论坛上已经有了很多如何搭建组件库项目的文章,但却鲜有具体组件开发思路的探讨和总结,因此本文会把重点内容放在后者。对于具体组件库项目的搭建方式,我比较推崇基于vuePress来实现。在此也推荐掘友 @_安歌 的一篇文章【Vue进阶】青铜选手,如何自研一套UI库?。本文带大家看几个经典的例子,相信新手朋友一定会有一些收获。希望大家多多支持点赞,谢谢大家

    先看看我目前做的一个组件库,虽然还存在很大的提升空间,但只要时间充裕,我还是可以做地更好:

块级选择器:

块级选择器alt

树形组件:

块级选择器

想来想去,个人总结一下写自己组件库的一些好处:

  • 更加深入组件的生命周期钩子,深刻掌握不同钩子下组件的状态;
  • 更加使用一些平时写业务代码时比较少用的方法,如<slot>插槽、双向绑定、组件递归等;
  • 更加充分考虑组件的扩展性和复用性,提高业务驱动开发的能力;
  • 更加充分考虑组件的唯一性,确保不会来自其他第三方组件库的样式所覆盖。

接下来我以选择器和树形组件作为例子,深入讲解一下实现过程和思路

2. 选择器 seletor

selector

    <select>选择器是最常见的组件之一,具体又可分为一般选择器、多选选择器、远程搜索选择器等。当我们使用选择器时可能会想,会不会很多第三方组件库的选择器就是建立在传统<select><option>元素上。其实不然,因为这样做太局限,针对复杂场景时的拓展性太差。别看只是一个小小的选择器,它所涉及到的问题有时比我们想象的要多,我们应该至少解决下述场景:

  1. 实现对option做适配,满足不同数据的兼容;
  2. 实现数值结果value和显示结果label的实时关联;
  3. 实现value的双向绑定,方便value的实时更新和获取。

2.1 结构优化

针对上述问题,我们会发现下面这种方式布局组件是存在很大缺陷的:

<template>
   <kd-select 
     :options='optionList' // 传入选项集
     @getResult='getResult' 
   />
</template>
export default {
   data() {
      return {
        result: ''
        getResult: [
          {
            value: 'Juventus',
            label:'尤文图斯',
          },
          {
            value: 'RealMadrid',
            label:'皇家马德里',
          },
          {
            value: 'Barcelona',
            label:'巴塞罗那',
          }
        ]   
      }
   },
   methods: {
      getResult(val) {
        this.result = val;
      }
   }
}
复制代码

    该方式固然可以实现,但太过局限,首先是<option>完全没有暴露到外部,造成绑定<option>labelvalue 无法配置,即没解决问题1。其次result也没有做双向绑定,不够简洁。因此,针对此类问题,对组件进行结构优化,代码如下:

<template>
    <kd-select v-model="teamName">
        <kd-option 
          v-for="(item,i) in teams" 
          :key="i" 
          :value='item.value' 
          :label='item.label'
        />
    </kd-select>
</template>
export default {
   data() {
      return {
        teamName: '',
        teams: [
            {
              value: 'Juventus',
              label:'尤文图斯',
            },
            {
              value: 'RealMadrid',
              label:'皇家马德里',
            },
            {
              value: 'Barcelona',
              label:'巴塞罗那',
            }
        ]
      }
   }
}
复制代码

这样就直观地解决了问题1,从而也将select选择器划分为由两个子组件构成的形式。下述为<select>的实现思路:

// select.vue
<template>
  <div class="kd-input-select">
     <div class="kd-input" v-outsideClick='showDropdown=false'>
        <input 
          class="kd-input-inner" 
          type="text" 
          readonly
          :value="result"
          placeholder="请选择" 
          @click="showDropdown = !showDropdown"
        />
     </div>
     <div v-show="showDropdown">
        <ul ref="dropdownList" class="kd-select-dropdown_list">
          <slot></slot>
        </ul>       
     </div>
  </div>
</template>
<script>
export default {
  model: {
    prop: 'bindVal',
    event: 'bindEvent'
  },
  props: {
    bindVal: [Number,String],
  },
  data() {
    return {
       result: '',
       showDropdown: false,
    }
  },
  methods: {
     getChoice(val) {
       this.result = val.label; // result只作为选取的label,不作为绑定值
       this.$emit('bindEvent', val.value);
     }
  }
};
</script>
复制代码

组件解析:

  • 通常选择器的label和value是不同的,因此result只是作为显示label,真正是要通过bindVal做value,并通过 v-model实现双向绑定;

下述代码为与之对应的option的简单实现:

// option.vue
<template>
  <div>
    <li 
      class="kd-select-dropdown__item"
      @click="choice({ value:value, label:label })"
    >
      {{label}}
    </li>
  </div>
</template>
<script>
export default {
   props: ['value', 'label'],
   watch: {
     '$parent.bindVal': {
         handler(newVal , val) {
            if(newVal && newVal === this.value) {
               this.$parent.result = this.label;
            }
         },
         immediate: true
     }
   },
   methods: {
      choice(val) {
        this.$parent.getChoice(val)
      }
   }
}
</script>
复制代码

    其中通过监听父级组件selectbindVal,将label赋值给父级的result,从而解决结果显示的问题。 上述就是一个最基本的选择器的实现方式,我们还可以做的更精致、更具扩展性。比如设置icon、设置只读和禁止属性,以及实现可远程搜索等功能。限于篇幅,这里不再详述。

3. 树形组件

    树形组件的功能很强大,主要用于对层级划分鲜明且复杂的数据做直观的二维展示。年初当我看到业务需求时,起初也是想直接使用element现成的组件,但后来发现我们的视觉设计和数据结构很复杂,无奈只好自己亲手来了。对于树形组件,起码也要解决如下问题:

  1. 数据的扩展性,即数据层级可无限划分,组件也可无限承载;
  2. 充分暴露组件各钩子状态,如数据的加载、就绪以及销毁等生命周期阶段;
  3. 任意层级的触发事件要充分、高效地暴露到组件最外部;
  4. 解决组件初始化状态的问题;
  5. 保证各层级标识的唯一性,从而实现对不同层级进行样式、初始化事件等的特殊操作。

先看一个数据结构例子:

 [
  {
    "code": "1212",
    "id": "1",
    "name": "云产品系统",
    "type": "product-line",
    "childs": [
        {
            "name": "公有云产品",
            "id": 1,
            "code": "gyyxl",
            "type": "product",
            "childs": [
                {
                    "name": "财务会计",
                    "id": 1,
                    "code": "cwkj",
                    "type": "domain",
                    "childs": [
                        {
                            "code": "GL",
                            "id": 4979,
                            "name": "总账",
                            "type": "module",
                            "childs": null
                        },
                    ]
                },
                {
                    "name": "财务总览",
                    "id": 2,
                    "code": "cwzl",
                    "type": "domain",
                    "childs": null
                }
            ]
        }
    ]
  }
]
复制代码

    可见,各层有name、id、code、type、childs等字段,且通过childs字段定义子层级。俗话说的好,"人之初,性本善"。在产品经理不断和我确认并拍着胸膛保证数据层级一定是4层且永远不会改变的情况下,作为一个实诚的老实人,我开始真的就老老实实写个下面这种组件:

// tree.vue
<template>
      <section class="kd-product-line" v-for="(productLine , pl) in data">
        <p class="kd-product-bar">
         {{productLine.name}}
        </p>
        <ul> <!-- 1层 -->
           <section class="kd-product" v-for="(product , p) in productLine.childs">
              <p class="kd-product-bar">
               {{product.name}}
              </p>
              <ul class="kd-rank-domain"> <!-- 2层 -->
                <section class="kd-domain" v-for="(domain , d) in product.childs">
                        <p class="kd-doamin-bar">
                           {{domain.name}}
                        </p>
                        <ul class="kd-rank-module"> <!-- 3层 -->
                            <section v-for="(moduleObj, d) in domain.childs">
                               <p class="kd-module-bar">
                                 {{moduleObj.name}}
                                </p>
                                <ul class="kd-rank-bizentity"> <!-- 4层 -->
                                    <p class="kd-bizentity-bar" v-for="(bizentity, b) in moduleObj.childs">
                                       {{bizentity.name}}
                                    </p>
                                </ul>
                            </section>
                        </ul>
                </section>
              </ul>
           </section>
        </ul>
      </section> 
</template>
复制代码

    是不是已经看不进去了?没错,写出这样一种类似数据结果层级关系的组件,不仅不扁平,也不利于后期的扩展和维护,大家都知道,产品经理的承诺听听就好,认真你就输了。比如有一天数据突然从4层变成了5层,你就要再写深一层,那如果变成100层呢?那岂不是可以直接撂挑子了。

3.1 组件递归

    这个时候我们就需要用到组件递归了,即通过对上面的层级组件进行分析,找到可以提取的公共部分作为子组件(下述代码中的<tree-item>组件),之后通过子组件递归的方式实现结构定义的抽象和扁平。代码如下:

// tree.vue
<div class="kd-tree card root">
  <tree-item 
    v-for="item in data"
    :key="item.id"
    :item='item'
  >
  </tree-item>
</div>
import TreeItem from './treeItem'
export default {
  name: 'kd-tree',
  props: {
    data: [Array],
  },
  components: {
     TreeItem
  },
}
</script>
复制代码

tree.vue主要充当一个容器,用于承载子组件<tree-item>及传递数据,且在此获取组件各周期。下面主要看一下<tree-item>的实现:

// TreeItem.vue
<template>
    <section class="tree-item">
       <div
         class="kd-bar">
          <span>{{item.name}}</span>
       </div>
       <ul v-if="item.childs && item.childs.length > 0"> 
          <!-- 组件递归 -->
          <tree-item 
            v-for="secondItem in item.childs"
            :key="secondItem.id"
            :item='secondItem'
          ></tree-item>
       </ul>
    </section>
</template>
<script>
export default {
   name: 'tree-item',
   props: {
      item: [Object],
   },
}
</script>
复制代码

3.2 层级唯一性

    通过组件递归的形式,即可实现代码的扁平和简洁。那如何实现各层级样式的差异?这里就需要定义各层级样式的唯一性。可见,最显而易见的方式就是定义每个层级的class的差异,这里我限定各层级的顶级class名为“kd-层级数”,依次类推,分别定义"kd-层级数-bar"、"kd-层级数-name",实现方式为:

// tree.vue
<template>
  <div class='kd-tree'>
      <tree-item 
        v-for="item in data"
        :rankNum='initRank'
        :key="item.id"
        :item='item'
        :initFold='initFold ? initFold : true'
      >
      </tree-item>
  </div>
</template>
export default {
  props: {
     data: [Array], initFold: [Boolean]
  },
  data() {
      return { 
        initRank: 1, // 最外层初始化层级数为1
      }
  }
}

// treeItem.vue
<template>
    <section class="tree-item" :class="[outClassName]">
       <div
         class="kd-bar"
         :class="[barClass]"  
       >
          <span :class='[nameClass]'>{{item.name}}</span>
       </div>
       <ul v-if='item.childs && item.childs.length > 0'>
          <tree-item 
            v-for='secondItem in item.childs'
            :key='secondItem.id'
            :item='secondItem'
            :rankNum='(rankNum + 1)'
            :initFold='initFold'
          ></tree-item>
       </ul>
    </section>
</template>
<script>
export default {
   name: 'tree-item',
   props: {
      item: [Object],
      parentNode: [Object],
      rankNum: [Number],
      initFold: [Boolean]
   },
   data() {
       return {
           outClassName: `kd-${this.rankNum}`,
           barClass: `kd-${this.rankNum}-bar`,
           nameClass: `kd-${this.rankNum}-name`,
           foldChildNodes: true, // 是否折叠子节点
       }
   },
   created() {
     this.foldChildNodes = this.initFold;
   },
}
复制代码

这样就实现了层级样式差异,且暴露给外部初始化状态的方式。看看解析出来的元素:

tree CSS

3.3 事件传递

    之后就是<tree-item>事件的暴露了。由子是<tree-item>的递归,造成组件的抽象化,因此通过传统$emit方式不断向父级传递事件的方式显得格外低效和繁琐。在此,相信很多人都有了答案,那就是通过eventBus的跨组件通信的方式实现事件直接暴露在tree上:

// bus.js
import Vue from 'vue'
export default new Vue({ })

// treeItem.vue
<template>
    <section>
       <div>
          <span 
            @click="controlChildNodes"
          >{{item.name}}</span>
       </div>
       <ul 
         v-if="item.childs && item.childs.length > 0 && !foldChildNodes">
          <tree-item 
            v-for='secondItem in item.childs'
            :key='secondItem.id'
            :item='secondItem'
            :rankNum='(rankNum + 1)'
          ></tree-item>
       </ul>
    </section>
</template>
<script>
import eventBus from '../../../libs/utils/bus.js'; 
export default {
   name: 'tree-item',
   props: {
      item: [Object],
      rankNum: [Number]
   },
   methods: {
      controlChildNodes() {
         this.foldChildNodes = !this.foldChildNodes;
         eventBus.$emit("node-click", this.item);
      }
   },
}

// tree.vue
<div class="kd-tree card root">
  <tree-item 
    v-for="item in data"
    :rankNum='initRank'
    :key="item.id"
    :item='item'
  >
  </tree-item>
</div>
<script>
import eventBus from '../../../libs/utils/bus.js'; 
import TreeItem from './treeItem'
export default {
  props: {
    data: [Array],
    initFold: [Boolean], 
  },
  data() {
    return { initRank: 1 }
  },
  mounted() {
     eventBus.$on("node-click",(itemData) => {
        this.$emit("node-trigger", itemData);
     })
  },
}
</script>
复制代码

这样,外部调用组件时,就可以通过node-trigger获取到触发节点。之后,针对具体业务场。

最后,菜炒好了,看一下怎么吃吧:

<template>
   <div>
      <kd-tree 
        :data='testData'
        @node-trigger="handleNodeClick">
      </kd-tree>
      <section v-show="curNode">
         当前点击的节点是:{{curNode.name}},
         类型是:{{curNode.type}}
      </section>
   </div>
</template>
<script>
import Tree from '@components/tree'
export default {
   name: 'kd-tree-demos',
   components: {
      'kd-tree': Tree
   },
   data() {
      return {
          testData: require('../public/treeData.json'),
          curNode:''
      }
   },
   methods: {
      handleNodeClick(nodeVal) {
         if(nodeVal) {
            this.curNode = nodeVal;
         }
      }
   }
}
</script>
复制代码

这样使用的感觉还是很简介鲜明的。

4. 总结

    从自写一套组件库,我们会学习和领悟到很多平时写业务代码中很少用到的方法,强化我们的知识体系和开发能力。对于组件库,我们也要抱有持续开发和扩展的长线作战准备,只有不断优化,才会不断适应各种复杂新颖的业务。最后借用腾讯 @当耐特 大神的一句话:

你写的越好,头发掉的越多,别人就越方便,头发就掉的越少。

分类:
前端
标签: