通过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>
                            </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框架的核心和难点。