vue中用数据驱动视图的思想去写代码——基础json可配置化

最新推荐文章于 2022-10-30 23:55:57 发布

weixin_33709364

最新推荐文章于 2022-10-30 23:55:57 发布

阅读量257

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/sunshineS/blog/1860145

版权

2019独角兽企业重金招聘Python工程师标准>>>

前言

如何在vue中写出高质量可维护代码,减少我们写代码的时间，让我们去谈女朋友！

例子

我们以一个菜单的案例展开，先来看一个平常程序员怎么常规的vue文件如何写？
以element-ui为基础组件的部分代码

<el-row :span="24">
	<el-col span="8" @click="event1">
		<i class="icon-caidan1" :style="{backgroundColor:color1}"></i>
		<p>菜单1</p>
	</el-col>
	<el-col span="8" @click="event2">
		<i class="icon-caidan2" :style="{backgroundColor:color2}"></i>
		<p>菜单2</p>
	</el-col>
	<el-col span="8" @click="event3">
		<i class="icon-caidan3" :style="{backgroundColor:color3}"></i>
		<p>菜单3</p>
	</el-col>
	<el-col span="8" @click="event4">
		<i class="icon-caidan4" :style="{backgroundColor:color4}"></i>
		<p>菜单4</p>
	</el-col>
</el-row>

这就是大多数人们写的代码，有着大量的重复代码，而且难以高效的维护，如果老板让再加10个菜单，他就会ctrl+c/ctrl+v复制10个出来，代码简直是成了一个大坑。

数据驱动视图

（数据+模版=视图）

我们分析代码发现有很多重复的部分，无疑是改变了几个关键的信息

图标
标题
背景色
点击事件
其他参数
我们把上述的参数具体为了一个对象数组，也就是我们说的(数据层)

[
	{
		title:'菜单1'，
		icon:'icon-caidan1',
		event:'event1,
		style:{
			backgroundColor:'color1'
			color:'color1'
		}
	}
	...
]

我们想想如果用循环的方式遍历这个数组对象，把相关的关键内容填充到相应的位置，换言之就是插入到我们的卡槽中,我们接下来构建我们的卡槽(模版层)

<el-row :span="24" v-for="(item,index) in list" :key="index">
	<el-col span="8" @click="goLink(item)">
		<i :class="item.icon" :style=loadStyle(item)></i>
		<p v-text="item.title"></p>
	</el-col>
</el-row>

接下来我们写goLink和loadStyle，逻辑写起来比较简单

...
event1(item){
	//每一个菜单对应的事件逻辑
},
...
goLink(item){
	this[item.event](item);
},
loadStyle(item){
	const style = item.style;
	return {
		backgroundColor:style.backgroundColor,
		color:style.color,
	}
}