在当下react和vue这么流行的大环境下,相信你一定写过组件。如果你感觉你是职场小白,只从github或者npm下载过一些组件使用,自己没有写过,那么你就错了,你一定写过。因为往大一点说,一个页面可以是一个组件,往小了说,一个按钮也是一个组件,你写的区别只在于它的扩展性是不是好,通用性是不是强。所以,首先不要畏惧,我们每个人其实都在写组件,今天的分享,就是如何让我们更好的写组件
一、需求分析-构思组件
从接手项目,带你开启组件封装第一步:
1. 需求分析
拿到项目之后,这里以一个新项目为例,首先,全局概览。看一下这个页面总共分几部分。各个部分之间有什么相同之处,这里举例(边距:考虑封装一个共有的盒子、色系:考虑用父元素继承的方式获取、title、排列方式、图文规划、功能区块等);初步划分功能,列出几个可能要封装的组件。
[图片上传失败...(image-7e297e-1612252373598)]
2. 综合考虑
联系其他页面,再次分类,调整组件的分类,尽可能做到组件公用,扩张组件的可配置项(例如,title文案前可能有icon图标,尾部可能有更多箭头,文案等,尽可能完善这个组件)。
3. 归置组件
综合页面需求及过往经验,将组件划分为基础组件和业务组件。
针对不同类型组件,有不同的封装要求。公共类组件,可配置项一定要多,即要活,放哪里都可以用。业务类组件,可以适当地写死一些东西,因为确定这个组件是轻易不会变动的,例如(流程说明、提示楼层、价格楼层等)
[图片上传失败...(image-f6ee5c-1612252373598)]
4. 使用说明
封装好的组件,最好有使用说明,有使用demo最好,使小白只要粘贴代码,就可以跑起来,首先增加使用者的自信心,可以轻易看到组件(默认样式及功能可以展示与使用)。
二、组件封装要求
组件封装,需要有一些强制的要求,才能保证我们的组件库在日益壮大的同时,不会因为各种不统一和零散化,导致组件库越来越难维护。
1. 关于组件规模
- 基础组件:被拆解的很零散的组件;例如一个按钮、一个input框、一个title、一个盒子
一般而言,一些基础的、使用频率比较高的组件,适合做成‘零散型’组件,即一个小的单位,例如,一个toast,一个input,一个btn一个置顶按钮等。但是越是‘零散’的组件,其可配置项越要灵活,功能性越要完善;包括样式、入参等。
优点:可使用范围广,通用性、扩展性强。
缺点:组件很小,只能局部使用,需要和页面其他元素联动使用。
- 模块组件:归整的很完善的组件;例如一个完整的轮播图、一个完整的筛选项、一个分页list。
相对于基础组件,为了更高效的开发,我们有时候会把业务性比较强,功能比较统一的一些‘大型模块’封装为一个组件。例如整个筛选功能,整个分页加载。整个图文混排等‘模块’,封装为一个组件。
优点:组件功能完善,不需要组装配合,直接可以构建成完整的页面,开发效率高。
缺点:业务定制化程度高,相对来说,可配置项少。
2. 关于class命名
语义化
命名一定要语义化,让使用的人看到类名,就知道这个是组件的那个元素。(例如title_icon title_more_btn)
禁止使用中文拼写,要求英文翻译。风格统一
同一个组件,命名一定要风格一致。(下划线、短横杠、驼峰式)业务分类
业务性强的组件,class命名的时候paimai_button_small功能分类
组件公用性强的,使用公用class命名,例如confim_submit_button
3. 关于样式书写
百分比
内部样式用100%来处理,外部套一个父盒子,父盒子的宽高使用传入样式作用域
样式书写最好使用父套子的方式,给类名加权重和作用域,以保证绝对的样式‘内部性’。容错
样式也要有容错,不能差几像素,就乱了,这里指用flex布局,不要写死宽高。禁忌写死
样式避免使用!important写死样式。范围
必要时使用最大限制max或者min,防止外部没有定义,宽高超出组件内部。托底
书写托底的默认样式,且风格保持一致。
我们定义页面一级父盒子,padding的留白统一为25像素。语言
建议统一使用scss书写,虽然目前组件库内部webpack配置会处理好几种css语言,但是,为统一代码,目前建议使用scss。
4. 关于mock数据结构
大众化
数据结构大众化。即数据类型符合一般渲染逻辑;例如:轮播图使用数组结构、基本信息使用对象、图片地址使用字符串等容错处理
内部数据结构要紧凑、稳固,接收外部传入参数时,做各种格式化处理,此处包括(托底,容错,类型判断,防止因外部输入格式不对导致组件内部报错)。
例如:入参是数组的要求,就需要判断来源数据类型,不是数组的,格式化为数组,不可以格式化的,直接走托底。可扩展
为后续组件扩展留余地,不把数据结构写的太死。例如二位数组处理,数据分组格式化等。
5. 关于变量参数
语义化
例如:size,表示组件的大小)
[图片上传失败...(image-8156bc-1612252373598)]多参
只供组件内部使用的变量,可以内部定义。尽可能多的由外部传入参数,因为这样可以尽可能的做到可配置。托底值
不管是内部定义参数,还是外部传参都必须有默认值,即托底逻辑处理,不要存在必传参数,必要时做提示处理。
6. 关于方法暴露
内部方法暴露
尽可能多的暴露方法,关于内部的一些方法定义,如果可以使组件更具灵活性,可以考虑将内部方法暴露出来。例如:功能强大的swiper组件,就暴露了很多内部定义的方法,供用户灵活的定制自己的组件。
[图片上传失败...(image-59c798-1612252373598)]业务逻辑不要有
在方法中,一切业务逻辑不要有,尽可能的、可配置的透传参数,以便父级元素做数据处理。命名
方法名称命名标准:
点击事件 **Click
格式化方法 **Format
初始化方法 **Init
方法名称不怕长,就怕看不懂功能,分不清你我
三、示例解析
1.放大镜组件(vue)
[图片上传失败...(image-ac1766-1612252373598)]
- 组件内部代码
- 组件变量定义
export default {
props: {
scale: {
type: Number,
default: 2
},
scalebox: {
type: Number,
default: 1
},
url: {
type: String,
required: true
},
bigUrl: {
type: String,
default: null
},
scroll: {
type: Boolean,
default: false
}
},
data () {
return {
id: null,
cover: null,
imgbox: null,
imgwrap: null,
orginUrl: null,
bigImgUrl: null,
bigOrginUrl: null,
imgUrl: null,
img: null,
canvas: null,
ctx: null,
rectTimesX: 0,
rectTimesY: 0,
imgTimesX: 0,
imgTimesY: 0,
init: false,
step: 0,
bigStep: 0,
vertical: false,
showImg: true
}
},
created () {
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length
var str = ''
for (let i = 0; i < 10; i++) {
str += $chars.charAt(Math.floor(Math.random() * maxPos));
}
this.id = str
this.imgUrl = this.url
this.orginUrl = this.url
this.bigImgUrl = this.bigUrl
this.bigOrginUrl = this.bigUrl
},
watch: {
url: function (val) {
this.imgUrl = val
this.orginUrl = val
this.initTime()
},
bigUrl: function () {
this.bigImgUrl = bigUrl
this.bigOrginUrl = bigUrl
this.initTime()
}
},
mounted () {
this.$nextTick(() => {
this.initTime()
})
},
methods: {
initTime () {
this.init = false
let box = this.$refs[this.id]
this.imgbox = box
this.cover = box.querySelector('.mouse-cover')
this.cover.style.width = (this.imgbox.offsetWidth / this.scale) + 'px'
this.cover.style.height = (this.imgbox.offsetHeight / this.scale) + 'px'
this.cover.style.left = '-100%'
this.cover.style.top = '-100%'
this.imgwrap = box.querySelector('img')
let imgsrc;
if (this.bigImgUrl) {
imgsrc = this.bigImgUrl
} else {
imgsrc = this.imgUrl
}
this.img = new Image()
this.img.src = imgsrc
this.img.onload = () => {
this.vertical = this.img.width < this.img.height
this.init = true
}
if (this.canvas) {
this.canvas.parentNode.removeChild(this.canvas)
this.canvas = null
}
this.canvas = document.createElement('canvas')
this.canvas.className = 'mouse-cover-canvas'
this.canvas.style.position = 'absolute'
this.canvas.style.left = this.imgbox.offsetLeft + this.imgbox.offsetWidth + 10 + 'px'
this.canvas.style.top = this.imgbox.offsetTop + 'px'
this.canvas.style.border = '1px solid #eee'
this.canvas.style.zIndex = '99999'
this.canvas.height = this.imgbox.offsetHeight * this.scalebox
this.canvas.width = this.imgbox.offsetWidth * this.scalebox
this.canvas.style.display = 'none'
this.imgbox.parentNode.append(this.canvas)
this.ctx = this.canvas.getContext("2d")
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
},
mousemove (e) {
if (!this.init) {
return false
}
let _this = this
//获取实际的offset
function offset (curEle) {
var totalLeft = null, totalTop = null, par = curEle.offsetParent;
//首先加自己本身的左偏移和上偏移
totalLeft += curEle.offsetLeft;
totalTop += curEle.offsetTop
//只要没有找到body,我们就把父级参照物的边框和偏移也进行累加
while (par) {
if (navigator.userAgent.indexOf("MSIE 8.0")===-1) {
//累加父级参照物的边框
totalLeft += par.clientLeft;
totalTop += par.clientTop
}
//累加父级参照物本身的偏移
totalLeft += par.offsetLeft;
totalTop += par.offsetTop
par = par.offsetParent;
}
return {
left: totalLeft,
top: totalTop
}
}
function getXY (eve) {
return {
x: eve.clientX - (_this.cover.offsetWidth / 2),
y: eve.clientY - (_this.cover.offsetHeight / 2)
};
}
let oEvent = e || event;
let pos = getXY(oEvent);
let imgwrap = offset(this.imgwrap)
let range = {
minX: imgwrap.left,
maxX: imgwrap.left + this.imgwrap.offsetWidth - this.cover.offsetWidth,
minY: imgwrap.top - document.documentElement.scrollTop,
maxY: imgwrap.top - document.documentElement.scrollTop + this.imgwrap.offsetHeight - this.cover.offsetHeight,
}
if (pos.x > range.maxX) {
pos.x = range.maxX
}
if (pos.x < range.minX) {
pos.x = range.minX
}
if (pos.y > range.maxY) {
pos.y = range.maxY
}
if (pos.y < range.minY) {
pos.y = range.minY
}
this.cover.style.left = pos.x + 'px'
this.cover.style.top = pos.y + 'px'
this.ctx.clearRect(0, 0, this.imgwrap.offsetWidth, this.imgwrap.offsetHeight);
let startX = pos.x - (imgwrap.left - document.documentElement.scrollLeft),
startY = pos.y - (imgwrap.top - document.documentElement.scrollTop)
// 重新初始化图片的宽高
this.rectTimesX = (this.imgbox.offsetWidth / this.scale) / this.imgwrap.offsetWidth,
this.rectTimesY = (this.imgbox.offsetHeight / this.scale) / this.imgwrap.offsetHeight
this.imgTimesX = this.img.width / this.imgwrap.offsetWidth,
this.imgTimesY = this.img.height / this.imgwrap.offsetHeight
this.ctx.drawImage(
this.img,
startX * this.imgTimesX,
startY * this.imgTimesY,
this.img.width * this.rectTimesX,
this.img.height * this.rectTimesY,
0,
0,
this.canvas.width,
this.canvas.height
);
},
mouseover (e) {
if (!this.init) {
return false
}
e = e || event
if (!this.scroll) {
e.currentTarget.addEventListener('mousewheel', function (ev) {
ev.preventDefault()
}, false)
e.currentTarget.addEventListener('DOMMouseScroll', function (ev) {
ev.preventDefault()
}, false)
}
this.cover.style.display = 'block'
this.canvas.style.display = 'block'
},
mouseleave () {
if (!this.init) {
return false
}
this.cover.style.display = 'none'
this.canvas.style.display = 'none'
},
}
}
- 组件样式书写
2.消息框组件(eleemnt-ui)
- 组件Dom
- 组件变量定义
props: {
modal: {
default: true
},
lockScroll: {
default: true
},
showClose: {
type: Boolean,
default: true
},
closeOnClickModal: {
default: true
},
closeOnPressEscape: {
default: true
},
closeOnHashChange: {
default: true
},
center: {
default: false,
type: Boolean
},
roundButton: {
default: false,
type: Boolean
}
},
components: {
ElInput
},
computed: {
icon() {
const { type, iconClass } = this;
return iconClass || (type && typeMap[type] ? `el-icon-${ typeMap[type] }` : '');
},
confirmButtonClasses() {
return `el-button--primary ${ this.confirmButtonClass }`;
},
cancelButtonClasses() {
return `${ this.cancelButtonClass }`;
}
},
methods: {
doClose() {
if (!this.visible) return;
this.visible = false;
this._closing = true;
this.onClose && this.onClose();
messageBox.closeDialog(); // 解绑
this.opened = false;
this.doAfterClose();
setTimeout(() => {
if (this.action) this.callback(this.action, this);
});
},
handleWrapperClick() {
if (this.closeOnClickModal) {
this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel');
}
},
handleInputEnter() {
if (this.inputType !== 'textarea') {
return this.handleAction('confirm');
}
},
handleAction(action) {
if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
return;
}
this.action = action;
if (typeof this.beforeClose === 'function') {
this.close = this.getSafeClose();
this.beforeClose(action, this, this.close);
} else {
this.doClose();
}
},
getFirstFocus() {
const btn = this.$el.querySelector('.el-message-box__btns .el-button');
const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title');
return btn || title;
},
getInputElement() {
const inputRefs = this.$refs.input.$refs;
return inputRefs.input || inputRefs.textarea;
}
},
watch: {
inputValue: {
immediate: true,
handler(val) {
this.$nextTick(_ => {
if (this.$type === 'prompt' && val !== null) {
this.validate();
}
});
}
}
},
data() {
return {
uid: 1,
title: undefined,
mainMessage: '',
message: '',
type: '',
iconClass: '',
customClass: '',
showInput: false,
inputValue: null,
inputPlaceholder: '',
inputType: 'text',
inputPattern: null,
inputValidator: null,
inputErrorMessage: '',
showConfirmButton: true,
showCancelButton: false,
action: '',
confirmButtonText: '',
cancelButtonText: '',
confirmButtonLoading: false,
cancelButtonLoading: false,
confirmButtonClass: '',
confirmButtonDisabled: false,
cancelButtonClass: '',
editorErrorMessage: null,
callback: null,
dangerouslyUseHTMLString: false,
focusAfterClosed: null,
isOnComposition: false,
distinguishCancelAndClose: false
};
}
- 组件样式书写参考
.el-message-box{
border-radius: 2px;
em{
font-size: 14px;
color: $color-title;
line-height: 15px;
}
p{
font-size: 12px;
color: $color-default;
line-height: 15px;
}
&__title{
font-size: 14px;
color: $color-title;
line-height: 20px;
font-weight: bold;
}
&__header{
padding: 9px 15px;
background: $color-bg;
border-bottom: 1px solid $color-border;
}
&__headerbtn{
top: 12px;
}
&__content{
padding: 28px 30px;
}
&__status{
font-size: 30px;
margin-right: 10px;
&.el-icon-warning{
color: $color-warning;
}
&.el-icon-success{
color: $color-success;
}
&.el-icon-info{
color: $color-info;
}
&.el-icon-error{
color: $color-error;
}
&+.el-message-box__message{
padding-left: 40px;
}
}
&__btns{
margin-top: 12px;
margin-bottom: 5px;
}
}
总结
相信任何一个好的组件,都是经过实践历练,调试出来的,开始封装的组件没有那么多功能,没有那么完善不要灰心,坚持用,不好的地方我们可以在使用中改,经过多次使用的组件,一定会慢慢丰富和强健起来。最终可能经过3,5年时间,我们做的的组件库,可以达到项目的70%利用率,同时,我们的开发效率也会大大提高。代码更强健。
最后,本文档作为前端组件基本标准,我们会越来越细化它的要求。希望大家一起献计献策,完善我们的组件封装标准。
原文地址:https://yolkpie.net/2021/01/27/%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85%E5%8F%82%E8%80%83/