gfs-react-dm笔记

前端之家收集整理的这篇文章主要介绍了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/

原文链接:https://www.f2er.com/react/303087.html

猜你在找的React相关文章