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

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

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

	
		
		
菜单1
	
	
		
		
菜单2
	
	
		
		
菜单3
	
	
		
		
菜单4
	

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

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

• 图标

• 标题

• 背景色

• 点击事件

• 其他参数
  我们把上述的参数具体为了一个对象数组，也就是我们说的(数据层)

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

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

接下来我们写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个都不用去写重复代码，只要在数据数组中配置好要加的东西即可
是不是很方便,点击下面的例子看完整代码

一个完整的例子

avue就是这样思想的项目，大家有兴趣可以看看

原文作者: Smallwei小伟                            

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