gfs-react-dm笔记

gfs-react-dm笔记

最近要在公司一个前端项目上添加一个“警告”弹框这样一个功能，于是就开始熟悉这个前端项目。

项目中出现了如下几种注解：@Model、@Control、@View，发现都是来自于gfs-react-dm这个项目中，就看到了相应的文档，于是就有了这篇博文笔记（主要是摘抄的参考文档的内容，如有不妥，请告知，立删）。

1、Model

表示实体、数据模型，model中的方法和属性都该设置成静态类型。

一个类装饰器，被装饰的类会变成store，默认不需要额外提供对数据操作的方法，在control中默认会提供del、update、insert等数据操作方法；如果有特殊需求无法满足使用场景可按照example中给出的方式自行编写数据处理方法

注意：model类中__name属性必须要有，这是为了能在各个component正常使用model必备的一个属性,必须小写，默认会在字符串后面添加上”model”,例如：static __name=’test’,那么在实际中运用应该是this.props.testmodel

例子

      import {Model} from 'gfs-react-mvc'
      //这里由于@为文档关键符号，所以下面将以$代替
      //@Model
      $Model
        class TestModel {
           //__name必须要有，这是为了能再各个component正常使用model必备的一个属性,必须小写
           static __name = 'test'
           //数据模型
           static age = 20
           static xq = {}
           //可以自行定义数据操作方法，在control中通过
           //dispatch({
           //    type:testmodel$$save,
	       //    data:data
	       //})
	       //这种方式变更数据，其中type值的组成是通过：类名（全小写）+ 方法名组成
	       static save(data, action){
	           if(action.data){
	               return data.merge(Immutable.fromJS(action.data) )
	           }
	       }
	       //dispatch({
	       //    type:testmodel$$del,
           //    data:data
           //})
           static del(data, action){
               if(action.data){
                   return data.merge(Immutable.fromJS(action.data) )
               }
           }
       }

2、Control 控制器

方法：Control ( modelName loadingbar mock ) ，前一个参数为：实体类对象，后两个参数以废弃。

此方法是一个装饰器，只能用于类，被装饰后的类会变成对象列表（JSON）格式，主要目的是传递给组件使用，通过redux connect连接。 被装饰的类将成为一个控制器，处理异步数据逻辑或业务逻辑，将数据传递给视图或服务器.

    /**
     * @control 与对应model建立联系
     * 提供默认的增删改查的方法。
     * */
    import {Control,fetch} from 'gfs-react-dm'
    import TestModel from '../model/TestModel'
    @Control(TestModel)
    class TestControl {
        static changeAge(){
            return (dispatch)=>{
                fetch('/test.json',/*params*/).then((data)=>{
                    //control中默认提供update、del、insert、save四种操作数据方法
                    dispatch(this.update('age','ajax改变的age：'+data.age) )
                })
            }
        }
    }

3、View

View（{testControl,testControl2}）

一个装饰器方法，用于装饰类，被装饰的类为页面视图，或者说是react的component，并不是每一个component都需要被装饰

      import {View} from 'gfs-react-mvc'
      import TestControl from './TestControl'

      @View(TestControl)
      class TestComponent extends Component {
           constructor(props) {
               super(props)
           }

           componentDidMount(){
               setTimeout(()=>{
                   //调用TestControl中的action，即调用了TestControl中的save方法
                   this.props.save(this)
               },1000)
           }

           static defaultProps={}

           render() {
               console.log('age:',this.props.testmodel.get('age') )
               return (
                   <div>
                       {this.props.testmodel.get('age')}
                   </div>
               )
           }
       }

4、Page

页面渲染

方法：page ( opts )

在项目中都是这样设置的：

page({module:XXX,bar:null,agent:’other’})

例子

     imoprt {page} from 'gfs-react-mvc'
     import Module from './TestComponent'
     //渲染到页面
     page(Module)      

小结

简单来说

1、使用@Model修饰的类为实体类，供Control来使用操作

2、使用@Control(TestModel)修饰的类为控制类，可以对TestModel中的属性等进行update、save等操作。

3、使用@View(TestControl)修饰的类为视图类，将TestControl中的执行结果展现出来。

突然发现这就是MVC模式也。

在了解了以上知识的基础上，再来熟悉项目中的代码就更加容易了一些。

参考资料

1、https://future-team.github.io/gfs-react-dm/doc/

2、http://uedfamily.com/2017/01/12/pqj/%E5%89%8D%E7%AB%AF%E4%BE%BF%E6%8D%B7%E5%BC%80%E5%8F%91%E4%B9%8B%E8%B7%AF-%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E7%AF%87/