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

原创
2018/07/20 15:28
阅读数 4.3K

前言

如何在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,
	}
}

  • list就是我们前面构建的数组对象
  • goLink我们点击事件的处理方法,并将item当前数据对象传入方法
  • loadStyle我们样式加载处理方法

接下来我们将数据和模版组合到一起就呈现我们看到的视图了,从而达到了数据驱动视图的质量高、维护性高的优点
再接着我们上面的老板的需求,让我们加10个20个都不用去写重复代码,只要在数据数组中配置好要加的东西即可
是不是很方便,点击下面的例子看完整代码

一个完整的例子

总结

数据驱动视图的思想写起来可以省去大量的代码,并且维护起来也方便,文章中我们用的是json数据,你也可以用其他的数据格式,如xml等。
avue就是这样思想的项目,大家有兴趣可以看看
传送门

展开阅读全文
打赏
2
16 收藏
分享
加载中
妇孺皆知
2018/12/25 09:14
回复
举报
感谢伟总撰写了一片妇孺皆知的技术文档
2018/07/21 23:13
回复
举报

引用来自“冷冷gg”的评论

感谢伟总百忙之中,抽时间写文章应付我们

丢你妹的
2018/07/21 12:44
回复
举报
感谢伟总百忙之中,抽时间写文章应付我们
2018/07/20 23:14
回复
举报
更多评论
打赏
4 评论
16 收藏
2
分享
返回顶部
顶部