gfs-react-dm笔记
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、ViewView({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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 是否需要SVG参数(如“xmlns”和“version”)?
- 详解组合模式的结构及其在Ruby设计模式编程中的运用
- C 11移动构造函数有副作用
- vb.net从web .txt文件中读取文本并在文本框中显示?
- c# – 在ASP.NET Web API2 Web服务中实现OAuth访问令牌
- 什么是 NoSQL 数据库、NoSQL 与 SQL 的区别
- c# – 对ObservableCollection(Reactive Extensions)的值进
- c – 代码段在Coliru中编译警告,但在Ideone中正常编译.哪一
- Ajax后台数据校验简单Demo
- 苹果一天流失两位高管,Swift之父加盟特斯拉,机器学习主管