组件库搭建封装的一些想法
最近一直在进行组件封装开发，在这儿记录一下开发心得。
组件进行二次封装
对于element-ui，大家应该都有使用过，而每次开发都需要设置一些默认值，或者多个组件需要进行组合使用...，对于这些每次开发都需要设置一遍，而且每个人的开发风格不同，导致一些本应该有的小功能，没能体现出来，因而都需要进行处理。
属性，事件
在二次封装时，需要借助v-bind="$attrs",v-on="$listeners",inheritAttrs: false 来进行组件属性及事件传递
tips:
- 属性：props
- 事件：event 通过
@进行调用的 - 方法：method 通过
$refs进行调用的
示例:
<el-select
v-model="value"
clearable
placeholder="请选择"
>
<el-option
v-for="(item, key) in options"
:key="key"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<script>
export default {
data() {
return {
value: '',
list: [
{ 1: '第一' },
{ 2: '第二' },
{ 3: '第三' },
{ 4: '第四' },
{ 5: '第五' }
]
}
},
computed: {
options() {
return this.list.map(item => {
const value = Object.keys(options)[0]
const label = item[value]
return {
value,
label
}
})
}
}
}
</script>
对于上面的形式应该都有遇见过，这样每次使用都要如此处理，特别是大型表单，涉及到多个el-select时，写起来就有些枯燥了，因而进行简化处理（这个过程也意味着使用时需要知晓规则）
- 组件封装
<el-select
v-bind="$attrs"
v-on="$listeners"
:clearable="clearable"
:placeholder="placeholder"
>
<slot>
<el-option
v-for="(item, key) in relOptions"
:key="key"
:label="item.label"
:value="item.value"
></el-option>
</slot>
</el-select>
<script>
export default {
name: 'my-select',
inheritAttrs: false, // 此处加上是为了防止一些不必要的问题 https://cn.vuejs.org/v2/api/#inheritAttrs
props: {
placeholder: {
type: String,
default: '请选择'
},
clearable: {
type: Boolean,
default: true
},
options: {
type: Array,
default: () => []
}
},
computed: {
relOptions() {
return this.options.map(item => {
const value = Object.keys(options)[0]
const label = item[value]
return {
value,
label
}
})
}
}
}
</script>
那之后每次使用就会很轻松了，对于上面的例子就可以简单地使用即可，而且 el-select 原有的属性和事件都可以继续使用
<my-select v-model="value" :options="list"></my-select>
<script>
export default {
data() {
return {
value: '',
list: [
{ 1: '第一' },
{ 2: '第二' },
{ 3: '第三' },
{ 4: '第四' },
{ 5: '第五' }
]
}
}
}
</script>
若是想进一步处理，可以继续进行定制处理即可。这里需要补充一下，对于方法需要额外处理一下。上面的封装的还不是很完善，方法的focus,blur还不支持（除非自己通过$refs一层层去找），接着进行处理。
<el-select
v-bind="$attrs"
v-on="$listeners"
:clearable="clearable"
:placeholder="placeholder"
ref="my_select"
>
<slot>
<el-option
v-for="(item, key) in relOptions"
:key="key"
:label="item.label"
:value="item.value"
></el-option>
</slot>
</el-select>
<script>
const methodList = ['blur', 'focus']
const methods = {}
methodList.forEach(methodName => {
methods[methodName] = function(...args) {
const _ref = this.$refs.my_select
if (_ref && _ref[methodName]) {
_ref[methodName](...args)
}
}
})
export default {
name: 'my-select',
inheritAttrs: false, // 此处加上是为了防止一些不必要的问题 https://cn.vuejs.org/v2/api/#inheritAttrs
mixins: [methods],
props: {
placeholder: {
type: String,
default: '请选择'
},
clearable: {
type: Boolean,
default: true
},
options: {
type: Array,
default: () => []
}
},
computed: {
relOptions() {
return this.options.map(item => {
const value = Object.keys(options)[0]
const label = item[value]
return {
value,
label
}
})
}
}
}
</script>
至此，my-select 正常使用算是差不多了（数据格式需要前后台统一即可），想要百分百保持与el-select还是有一些困难，但是对于自己负责的相关项目都是完美支持，这样就可以了。但是对于一些特殊的组件有时还需要看源码才知道如何应对。
双向数据绑定
v-model用起来很舒服，其实本质是 v-bind,v-on简化的语法糖，项目中的使用
实例：
<template>
<el-cascader v-bind="$attrs" v-on="$listeners" v-model="model" ref="sti_cascader"></el-cascader>
</template>
<script>
import { getMethods } from './../../../utils/mixin.js'
const METHOD_NAMES = [
'getCheckedNodes'
]
const methods = getMethods(METHOD_NAMES, 'sti_cascader') // 用来生成 methods方法
export default {
name: 'my-cascader',
inheritAttrs: true,
mixins: [methods],
props: {
value: {
type: Array,
default: () => []
}
},
computed: {
model: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
}
}
}
}
</script>
层级
组件层级嵌套未知时，想要获取父子的事件，需要通过父调子或子调父递归查找，但是这个存在很多不确定性。因而在封装组件时，推荐使用 provide,inject 的方式进行处理
实例：
my-anchor
<template>
<div class="my-anchor-container" :style="`height: ${realHeight}`">
<ul class="link-wrapper">
<slot name="link"></slot>
</ul>
<div class="list-wrapper" ref="listWrapper" id="listWrapper">
<slot />
</div>
</div>
</template>
<script>
import scrollTo, { getTargetScrollLocation } from './scroll.js'
export default {
name: 'my-anchor',
provide() {
return {
anchor: this
}
},
data() {
return {
active: ''
}
},
methods: {
handleAnchorClick(id) {
this.active = id
this.init(id)
},
}
...
}
</script>
my-anchor-link
<template>
<li
:class="['my-anchor-link', isActive ? 'my-anchor-link--active' : '' ]"
:data-id="id"
@click="handleClick"
>
<slot>
<span class="my-anchor-link__title">{{title}}</span>
</slot>
</li>
</template>
<script>
export default {
name: 'my-anchor-link',
inject: ['anchor'],
props: {
id: {
type: String,
required: true
},
},
computed: {
isActive () {
return this.anchor.active === this.id
}
},
methods: {
handleClick () {
this.anchor.handleAnchorClick(this.id)
}
}
}
</script>
包体积
由于在打包发布时，发现组件库偏大，通过vue-cli-service build --report 进行查看，发现很多插件都只是使用了其中一小部分功能，从而导致整个包偏大
-
插件
- moment => day.js
- lodash => 手写相应的方法 lodash-es
- vuedraggable => html5sortable
-
gizp
总结
开发的过程中，更多地是考虑如何工程化，如何更好地兼容之前的和为未来做扩展，这几块还要好好努力。依旧记得尤大说过，如何做到解耦及模块化，这个是我所欠缺的，也许已经实现但是不知道如何去描述了。
下一步是对工程化进一步发起奋斗了。