通过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 (

            


                

                    
                        
                            

                                more} style={{ width: 350,height: 200}}>
                                    
•纵向间距
                                    
•横向间距关系
                                

                            
                        
                    

                    
                        
                            

                                more} style={{ width: 350,height: 200 }}>
                                    
•文案类对齐
                                    
•表单类对齐
                                    
•数字类对齐
                                

                            
                        
                    
                    
                        
                            
                                more} style={{ width: 350,height: 200 }}>
                                    
•主次关系对比
                                    
•总分关系对比
                                    
•状态关系对比
                                
                            
                        
                    
                    
                        
                            
                                more} style={{ width: 350,height: 200 }}>
                                    
•重复元素
                                
                            
                        
                    

                
                


                
                    
                        
                            more} style={{ width: 350,height: 200}}>
                                
•页内编辑
                                
•利用拖放
                            
                        
                        
                            more} style={{ width: 350,height: 200 }}>
                                
•覆盖层
                                
•嵌入层
                                
•虚拟页面
                                
•流程处理
                            
                        
                        
                            more} style={{ width: 350,height: 200 }}>
                                
•实时可见工具
                                
•悬停即现工具
                                
•开关显示工具
                                
•交互中的工具
                                
•可视区域 ≠ 可点击区域
                            
                        
                        
                            more} style={{ width: 350,height: 200 }}>
                                
•静态邀请
                                
•动态邀请
                            
                        
                    
                
                


                
                    
                        
                            more} style={{ width: 350,height: 200}}>
                                
•在视图变化时保持上下文
                                
•解释刚刚发生了什么
                                
•改善感知性能
                                
•自然运动
                            
                        
                        
                            more} style={{ width: 350,height: 200 }}>
                                
•查询模式
                                
•反馈模式
                            
                        
                    
                

            
        )
    }
}

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

let dataArray = [
    {
        title: '亲密性',
        //如果在这里要用css的符号实现分行或者是其他功能，那么需要加上一个父级标签
        content:
        //这里的写法还不够纯净，作为model层应该只存放数据而不包括html语句，我个人认为合理的做法是把这部分数据设置成一个数组，在ViewMode层再遍历后转成html
            

                
•纵向间距
                
•横向间距关系
            
    },
    {
        title: '对齐',
        //如果在这里要用css的符号实现分行或者是其他功能，那么需要加上一个父级标签
        content:
            

                
•文案类对齐
                
•表单类对齐
                
•数字类对齐
            
    },
//。。。这里并没有写全

];
//视图逻辑层 View Model
class DesignTenet extends React.Component{
    constructor(props)
    {
        super(props);
    }
    showData;
    getChildren = () => {
        {console.error("fsfdds")}
        //map()方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。每个元素都是回调函数的结果。
        this.showData=dataArray.map((item, i) => {
            return(
                
                    
                        
                            more} style={{ width: 350,height: 200}}>
                                {dataArray[i].content}
                            
                        
                    
                
            )

        })
    }


    render() {
        return (

            

                {this.getChildren()}
                
                    {this.showData}
                
            
        )
    }
}

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