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模式也。
在了解了以上知识的基础上，再来熟悉项目中的代码就更加容易了一些。
