通过AntDesign切入对MVVM的理解

这周来新公司，第一个任务就是调研react,AntDesign，同时准备一次演讲，因为我之前是在做后端开发的，前端也就用过egret，对js也谈不上特别熟悉，刚好就借这个机会对整个前端的知识补充一下。

这一周我看了很多资料，同时用两天时间做了一个React+Antd实现的教程演示网站,请戳 39.108.54.113，目前只支持pc端。因为演讲主要针对AntD，所以这篇文章会忽略React的知识，主要谈谈AntD和MVVM模式。

AntD简述

我个人认为AntD并不是和编程语言一个维度的，官方把它称之为“一套UI设计语言”，事实上它看起来也更像是一套UI规范和实现，除了官方自己用React做出来的实现之外任何人都可以用任何语言去实现它。总的来说它似乎可以让小公司节约一部分人员成本了（UI），即使是不懂设计的程序员也可以利用AntD创造出带有美感的页面。

总的来说AntD可以概括为三块：设计，组件和模式

设计就是一套设计规范和规则，这一部分似乎更适合美术方面的人去阅读，包括页面的色彩，图标，字体等都有一系列的规范，同时官方还提炼出一系列它们觉得perfect的特性来让你学习

组件则是面向开发人员的，具体说来就是页面上的按钮啊，导航栏啊，图标啊等等你在网页上看到的可以和你互动的东西（我们称之为组件），官方帮你实现了一套他们觉得最好看的样式，你直接去拼接他们形成一个网页。

模式可能更面向架构人员，大体就是告诉你一个页面要怎么做才比较好。

目前如果要修改某个组件的style，除了官方有提供默认接口的之外，就要去强制覆盖，强制覆盖也有几种方法，一种是通过添加父级，一种就是用Chrome审查元素后在父级组件上添加style来覆盖，但是这个挺麻烦的，我个人认为假如实在看不上官方的设计的话，有时候还不如自己重新实现一个组件。

MVVC

介绍完AntD，这篇文章的重点是想说一下MVVC。这篇讲解是基于http://39.108.54.113/下的设计原则页面讲解的，我第一次实现改页面的核心代码大概如下：

class DesignTenet extends React.Component{
constructor(props)
{
super(props);
}

render() {
return (

<div style={{ padding: 24, minHeight: 720 }}>

<Row gutter={48}>

<Dragger >
<QueueAnim>
<Col span={6} key="1">

<Card title="亲密性" extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200}}>
<p>•纵向间距</p>
<p>•横向间距关系</p>
</Card>

</Col>
</QueueAnim>
</Dragger>

<Dragger >
<QueueAnim>
<Col span={6} key="2">

<Card title="对齐" extra={<a href="https://ant.design/docs/spec/alignment-cn">more</a>} style={{ width: 350,height: 200 }}>
<p>•文案类对齐</p>
<p>•表单类对齐</p>
<p>•数字类对齐</p>
</Card>

</Col>
</QueueAnim>
</Dragger>
<Dragger >
<QueueAnim>
<Col span={6} key="3">
<Card title="对比" extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200 }}>
<p>•主次关系对比</p>
<p>•总分关系对比</p>
<p>•状态关系对比</p>
</Card>
</Col>
</QueueAnim>
</Dragger>
<Dragger >
<QueueAnim>
<Col span={6} key="4">
<Card title="重复" extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200 }}>
<p>•重复元素</p>
</Card>
</Col>
</QueueAnim>
</Dragger>

</Row>
<br></br>
<Row gutter={48}>
<QueueAnim>
<Col span={6} key="1">
<Card title="直截了当" extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200}}>
<p>•页内编辑</p>
<p>•利用拖放</p>
</Card>
</Col>
<Col span={6} key="2">
<Card title="足不出户" extra={<a href="https://ant.design/docs/spec/alignment-cn">more</a>} style={{ width: 350,height: 200 }}>
<p>•覆盖层</p>
<p>•嵌入层</p>
<p>•虚拟页面</p>
<p>•流程处理</p>
</Card>
</Col>
<Col span={6} key="3">
<Card title="简化交互" extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200 }}>
<p>•实时可见工具</p>
<p>•悬停即现工具</p>
<p>•开关显示工具</p>
<p>•交互中的工具</p>
<p>•可视区域 ≠ 可点击区域</p>
</Card>
</Col>
<Col span={6} key="4">
<Card title="提供邀请" extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200 }}>
<p>•静态邀请</p>
<p>•动态邀请</p>
</Card>
</Col>
</QueueAnim>
</Row>
<br></br>
<Row gutter={48}>
<QueueAnim>
<Col span={6} key="1">
<Card title="巧用过渡" extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200}}>
<p>•在视图变化时保持上下文</p>
<p>•解释刚刚发生了什么</p>
<p>•改善感知性能</p>
<p>•自然运动</p>
</Card>
</Col>
<Col span={6} key="2">
<Card title="即时反应" extra={<a href="https://ant.design/docs/spec/alignment-cn">more</a>} style={{ width: 350,height: 200 }}>
<p>•查询模式</p>
<p>•反馈模式</p>

aa1c
</Card>
</Col>
</QueueAnim>
</Row>

</div>
)
}
}

没错，差不多就是把整个HTML页面直接写进去jsx的类里面去了，然后return给父类，这种最简单粗暴的写法让视图数据层和视图逻辑层黏在了一起，这就像传统的MVC写法的控制器controller，然后在我阅读了几个AntD官方的写法之后，我开始改造了我这一部分源码，改造完的核心代码如下：

let dataArray = [
{
title: '亲密性',
//如果在这里要用css的符号实现分行或者是其他功能，那么需要加上一个父级标签
content:
//这里的写法还不够纯净，作为model层应该只存放数据而不包括html语句，我个人认为合理的做法是把这部分数据设置成一个数组，在ViewMode层再遍历后转成html
<div>
<p>•纵向间距</p>
<p>•横向间距关系</p>
</div>
},
{
title: '对齐',
//如果在这里要用css的符号实现分行或者是其他功能，那么需要加上一个父级标签
content:
<div>
<p>•文案类对齐</p>
<p>•表单类对齐</p>
<p>•数字类对齐</p>
</div>
},
//。。。这里并没有写全

];
//视图逻辑层 View Model
class DesignTenet extends React.Component{
constructor(props)
{
super(props);
}
showData;
getChildren = () => {
{console.error("fsfdds")}
//map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。每个元素都是回调函数的结果。
this.showData=dataArray.map((item, i) => {
return(
<Dragger >
<QueueAnim>
<Col span={6} key={i}>
<Card title={dataArray[i].title} extra={<a href="https://ant.design/docs/spec/proximity-cn">more</a>} style={{ width: 350,height: 200}}>
{dataArray[i].content}
</Card>
</Col>
</QueueAnim>
</Dragger>
)

})
}

render() {
return (

<div style={{ padding: 24, minHeight: 720 }}>
{this.getChildren()}
<Row gutter={48}>
{this.showData}
</Row>
</div>
)
}
}

改造后可以明显看到视图数据层已经变成了一个对象dataArray,我个人认为这样子实现了视图数据层和视图逻辑层的分离，其实本质上MVVM还是一个优化的MVC架构，但因为 View Model部分不涉及
UI，所以MVVM更容易测试，同时，如何设计能够高效自动同步View与Model的ViewModel是整个MVVM框架的核心和难点。