gfs-react-dm/doc/data.json

简化react和redux的繁杂流程，更简单的数据操作管理

{
    "project": {
        "name": "gfs-react-dm",
        "description": "<p style=\"color:red\">文档持续完善中...</p>\n<p>\n将react、redux整合一起使用的繁琐步骤进行封装，对外提供<code>@View</code>、<code>@Control</code>、<code>@Model</code>分别对应react component、redux action、redux store调用\n</p>\n<ul>\n    <li style=\"margin-bottom:8px\"><strong>@View</strong> 利用react-redux中提供的connect包装器将store、control（action）与Component建立联系，使Component具有操作store和调用control的能力，Component中可直接使用<code>this.props[update/del/insert/save]</code>对store数据进行更新</li>\n    <li style=\"margin-bottom:8px\"><strong>@Control</strong> 拥有与服务端数据通信功能，获取数据后可决定是否更新store或直接什么都不做，提供<code>@Sync</code>装饰器；被装饰的类会返回一个对象列表，提供给Component调用，此外还提供默认的数据修改方法：update、save、del、insert</li>\n    <li><strong>@Model</strong> 字段映射关系和数据操作，包括对数据的增删改查；默认提供<code>del</code>、<code>update</code>、<code>save</code>等store方法</li>\n</ul>\n<p><a href=\"https://github.com/future-team/generator-future-static\" target=\"_blank\">generator-future-static</a>提供对应脚手架项目<code>webpack-react</code></p>\n<p>\n    最后<code>page</code>方法将决定具体哪个Component在页面的哪个节点中渲染。\n</p>\n<h3>安装</h3>\n<pre class=\"code prettyprint\">\nnpm install gfs-react-dm --save\n</pre>\n<h3>表单元素数据更新方式</h3>\n<pre class=\"code prettyprint\">\n    后续完善...\n</pre>\n<h3>使用(一个改变年龄的简单例子,适用于2.0以上版本)</h3>\n* View\n<pre class=\"code prettyprint\">\nimport React, { Component /*,PropTypes*/} from 'react'\nimport {Model,Control,Sync,View,page} from 'gfs-react-dm'\n\n@View(TestControl)\nclass TestComponent extends Component {\n    constructor(props) {\n        super(props)\n    }\n\n    componentDidMount(){\n        setTimeout(()=>{\n            //调用control中的方法改变age\n            this.props.changeAge(this)\n        },1000)\n    }\n\n    static defaultProps={}\n\n    render() {\n        console.log('age:',this.props.testmodel.get('age') )\n        return (\n            <div>\n                {this.props.testmodel.get('age')}\n            </div>\n        )\n    }\n}\n\n//渲染到页面\npage(TestComponent)\n</pre>\n\n* Control\n<pre class=\"code prettyprint\">\nimport {Control,fetch,action} from 'gfs-react-dm'\nimport TestModel from '../model/TestModel'\n\n@Control(TestModel)\nclass TestControl {\n    constructor(){\n\n    }\n\n    @action\n    changeAge(){\n        \n        //方法之间可以相互调用\n        book = this.getBook()\n\n        fetch('/test.json',/*params*/).then((data)=>{\n            //control中默认提供update、del、insert、save四种操作数据方法\n\n            this.update('age','ajax改变的age：'+data.age)\n        })\n    }\n    //pojo\n    getBook(){\n        return {}\n    }\n}\n</pre>\n\n* Model\n<pre class=\"code prettyprint\">\nimport {Model} from 'gfs-react-dm'\n\n@Model\nclass TestModel {\n    //必须赋予__name值，否则无法正确查找到store\n    static __name = 'test'\n    static age = 20\n}\n</pre>",
        "version": "2.0.1-beta",
        "hideFoundAt": "true",
        "hideClassItemTable": "true",
        "hideTabItemList": "true",
        "hideViewDemo": "true",
        "hideEditCode": "true",
        "activeTab": "method",
        "url": "",
        "navs": [
            {
                "name": "主页",
                "url": "index.html"
            }
        ]
    },
    "files": {
        "src/control.js": {
            "name": "src/control.js",
            "modules": {},
            "classes": {
                "Control": 1
            },
            "fors": {},
            "namespaces": {}
        },
        "src/index.js": {
            "name": "src/index.js",
            "modules": {
                "gfs-react-mvc": 1
            },
            "classes": {
                "Page": 1
            },
            "fors": {},
            "namespaces": {}
        },
        "src/model.js": {
            "name": "src/model.js",
            "modules": {},
            "classes": {
                "Model": 1
            },
            "fors": {},
            "namespaces": {}
        },
        "src/view.js": {
            "name": "src/view.js",
            "modules": {},
            "classes": {
                "View": 1
            },
            "fors": {},
            "namespaces": {}
        }
    },
    "modules": {
        "gfs-react-mvc": {
            "name": "gfs-react-mvc",
            "submodules": {},
            "classes": {
                "Control": 1,
                "Page": 1,
                "Model": 1,
                "View": 1
            },
            "fors": {},
            "namespaces": {},
            "tag": "module",
            "file": "src/view.js",
            "line": 4,
            "description": "提供Model、View、Control、Sync、RTools等系列便捷类库"
        }
    },
    "classes": {
        "Control": {
            "name": "Control",
            "shortname": "Control",
            "classitems": [],
            "plugins": [],
            "extensions": [],
            "plugin_for": [],
            "extension_for": [],
            "module": "gfs-react-mvc",
            "file": "src/control.js",
            "line": 6,
            "description": "控制器"
        },
        "Page": {
            "name": "Page",
            "shortname": "Page",
            "classitems": [],
            "plugins": [],
            "extensions": [],
            "plugin_for": [],
            "extension_for": [],
            "module": "gfs-react-mvc",
            "namespace": "",
            "file": "src/index.js",
            "line": 17,
            "description": "页面渲染"
        },
        "Model": {
            "name": "Model",
            "shortname": "Model",
            "classitems": [],
            "plugins": [],
            "extensions": [],
            "plugin_for": [],
            "extension_for": [],
            "module": "gfs-react-mvc",
            "namespace": "",
            "file": "src/model.js",
            "line": 3,
            "description": "实体、数据模型，model中的方法和属性都该设置成静态类型"
        },
        "View": {
            "name": "View",
            "shortname": "View",
            "classitems": [],
            "plugins": [],
            "extensions": [],
            "plugin_for": [],
            "extension_for": [],
            "module": "gfs-react-mvc",
            "namespace": "",
            "file": "src/view.js",
            "line": 4,
            "description": "视图"
        }
    },
    "classitems": [
        {
            "file": "src/control.js",
            "line": 16,
            "description": "删除store中某条数据",
            "itemtype": "method",
            "name": "del",
            "params": [
                {
                    "name": "path",
                    "description": "需要被删除的属性地址，根据具体的对象结构，例如一个结构为：var data={name:'test',other:{age:18}}的对象，如果想删除age的值应该是这样:this.del('data.other.age')",
                    "type": "String"
                },
                {
                    "name": "modelName",
                    "description": "model名字，默认是绑定model之后的modelname",
                    "type": "String"
                }
            ],
            "return": {
                "description": "Function"
            },
            "example": [
                "\n       $Control(TestModel)\n       class TestControl {\n           delTest(data,dispatch,modelJson,model){\n               this.del('age')\n           }\n       }"
            ],
            "class": "Control"
        },
        {
            "file": "src/control.js",
            "line": 41,
            "description": "更新store中某条数据,主要已合并为主，如果是想将新值覆盖旧值，请使用save方法",
            "itemtype": "method",
            "name": "update",
            "params": [
                {
                    "name": "path",
                    "description": "需要被删除的属性地址，根据具体的对象结构，例如一个结构为：var data={name:'test',other:{age:18}}的对象，如果想修改age的值应该是这样:this.update('data.other.age',20)",
                    "type": "String"
                },
                {
                    "name": "data",
                    "description": "需要合并的值",
                    "type": "String | objaect"
                },
                {
                    "name": "modelName",
                    "description": "model名字，默认是绑定model之后的modelname",
                    "type": "String"
                }
            ],
            "return": {
                "description": "Function"
            },
            "example": [
                "\n       $Control(TestModel)\n       class TestControl {\n           updateTest(data,dispatch,modelJson,model){\n               fetch('/test').then((data)=>{\n                   this.update('age',data.age)\n               })\n           }\n       }"
            ],
            "class": "Control"
        },
        {
            "file": "src/control.js",
            "line": 74,
            "description": "更新store中某条数据，可自定义合并规则",
            "itemtype": "method",
            "name": "updateWith",
            "params": [
                {
                    "name": "data",
                    "description": "需要合并的值",
                    "type": "Object"
                },
                {
                    "name": "merge",
                    "description": "自定义合并规则方法",
                    "type": "Function"
                },
                {
                    "name": "modelName",
                    "description": "model名字，默认是绑定model之后的modelname",
                    "type": "String"
                }
            ],
            "return": {
                "description": "Function"
            },
            "example": [
                "\n       $Control(TestModel)\n       class TestControl {\n           updateTest(data,dispatch,modelJson,model){\n               return \n                   fetch('/test').then((data)=>{\n                       this.updateWith({\n                           names:['test','test1','test2']\n                       },function merger(prev,next){\n                           if( Immutable.List.isList(prev) &&  Immutable.List.isList(next)){\n                               return next\n                           }\n                           if(prev && prev.mergeWith){\n                               return prev.mergeWith(merger,next)\n                           }\n                           return next\n                       }) \n                   })\n               \n           }\n       }"
            ],
            "class": "Control"
        },
        {
            "file": "src/control.js",
            "line": 113,
            "description": "插入store中某条数据",
            "itemtype": "method",
            "name": "insert",
            "params": [
                {
                    "name": "path",
                    "description": "需要被删除的属性地址，根据具体的对象结构，例如一个结构为：var data={name:'test',other:{age:18}}的对象，如果想要在data中新增一些字段应该这样:this.insert({sex:'男'})",
                    "type": "String"
                },
                {
                    "name": "data",
                    "description": "需要保存的值，新的值会覆盖之前的值",
                    "type": "String | object"
                },
                {
                    "name": "isImmutable",
                    "description": "是否将值转换为Immutable类型，默认为false，如果更新的值为object类型建议设置为true",
                    "type": "Boolean"
                },
                {
                    "name": "modelName",
                    "description": "model名字，默认是绑定model之后的modelname",
                    "type": "String"
                }
            ],
            "return": {
                "description": "Function"
            },
            "example": [
                "\n       $Control(TestModel)\n       class TestControl {\n           insertTest(data,dispatch,modelJson,model){\n               \n               fetch('/test').then((data)=>{\n                   this.insert({\n                       sex:'男'\n                   })\n               })\n               \n           }\n       }"
            ],
            "class": "Control"
        },
        {
            "file": "src/control.js",
            "line": 151,
            "description": "保存store中某条数据",
            "itemtype": "method",
            "name": "save",
            "params": [
                {
                    "name": "path",
                    "description": "跟update一样",
                    "type": "String"
                },
                {
                    "name": "data",
                    "description": "需要保存的值，新的值会覆盖之前的值",
                    "type": "String | object"
                },
                {
                    "name": "isImmutable",
                    "description": "是否将值转换为Immutable类型，默认为false，如果更新的值为object类型建议设置为true",
                    "type": "Boolean"
                },
                {
                    "name": "modelName",
                    "description": "model名字，默认是绑定model之后的modelname",
                    "type": "String"
                }
            ],
            "return": {
                "description": "Function"
            },
            "example": [
                "\n       $Control(TestModel)\n       class TestControl {\n           saveTest(data,dispatch,modelJson,model){\n               \n               fetch('/test').then((data)=>{\n                   this.save('age',data.age) \n               })\n               \n           }\n       }"
            ],
            "class": "Control"
        },
        {
            "file": "src/control.js",
            "line": 184,
            "description": "异步操作，<strong style=\"color:red\">IE9以下不建议使用</strong>，Sync是一个装饰器（Decorator），用于装饰Control类中的方法，将原有的方法变成一个异步成功调用后执行结果方法，被装饰的方法需要返回数据或false，决定是否更新store刷新节点。\n- 由Sync装饰后的方法，其作用域为Control，依然可以调用类中其他方法\n- Sync参数error可以为Control中xxxError命名的方法替代，“xxx”命名规则必须与Sync装饰的方法名一致\n- 被装饰后的方法在View中调用时传入的参数将已第二个为准，第一个参数将永远是异步执行后的结果\n- 被装饰的方法名要和Model类中方法名对应",
            "itemtype": "method",
            "name": "Sync",
            "params": [
                {
                    "name": "anywhere",
                    "description": "参数为一个字符串时，anywhere为url，当方法拥有2个参数，第一个参数作为url，第二个参数为object类型",
                    "type": "Object|string",
                    "props": [
                        {
                            "name": "dataType",
                            "description": "数据返回类型 默认为json",
                            "type": "String"
                        },
                        {
                            "name": "asyn",
                            "description": "是否为异步请求，默认为true",
                            "type": "Boolean"
                        },
                        {
                            "name": "method",
                            "description": "数据请求方式，默认为GET，可选值有：POST、GET、OPTION、DEL、PUT",
                            "type": "String"
                        },
                        {
                            "name": "timeout",
                            "description": "请求超时时间，可选填",
                            "type": "Number"
                        },
                        {
                            "name": "credentials",
                            "description": "跨域是是否要包含cookie值，可选值：include",
                            "type": "Object"
                        },
                        {
                            "name": "error",
                            "description": "请求失败回调，可选",
                            "type": "Function"
                        },
                        {
                            "name": "header",
                            "description": "包含的请求头，可选",
                            "type": "Object"
                        },
                        {
                            "name": "body",
                            "description": "需要传递给服务端的属性字段值，可选",
                            "type": "Object"
                        },
                        {
                            "name": "cache",
                            "description": "请求数据是否缓存",
                            "type": "Boolean"
                        }
                    ]
                }
            ],
            "return": {
                "description": "function"
            },
            "example": [
                "\n     import {Sync,Control} from 'gfs-react-mvc'\n\n     class TestControl{\n         constructor(){}\n         //这里由于@为文档关键符号，所以下面将以$代替\n         $Sync('/test',{\n             method:'get'\n         })\n         save(data){\n             //此处data是异步请求后服务器返回的结果\n             if(data){\n                 //返回数据更新页面节点信息\n                 return data\n             }\n             //不做任何改变\n             return false\n         } \n         $Sync('/del',{\n             method:'get'\n         })\n         del(data){\n             //此处data是异步请求后服务器返回的结果\n             if(data){\n                 //返回数据更新页面节点信息\n                 return {\n                     //手动指定model对应方法\n                     type:this.getModelName('del'),\n                     data:data\n                 }\n             }\n             //不做任何改变\n             return false\n         }\n         //也可直接使用\n         $Sync()\n         update(data){\n             //此处data是异步请求后服务器返回的结果\n             if(data){\n                 //返回数据更新页面节点信息\n                 return {\n                     //手动指定model对应方法\n                     type:this.getModelName('update'),\n                     data:data\n                 }\n             }\n             //不做任何改变\n             return false\n         }\n     }"
            ],
            "class": "Control"
        },
        {
            "file": "src/control.js",
            "line": 324,
            "description": "此方法是一个装饰器，只能用于类，被装饰后的类会变成对象列表（JSON）格式，主要目的是传递给组件使用，通过redux connect连接。\n被装饰的类将成为一个控制器，处理异步数据逻辑或业务逻辑，将数据传递给视图或服务器",
            "itemtype": "method",
            "name": "Control",
            "params": [
                {
                    "name": "modelName",
                    "description": "实体类对象",
                    "type": "Object"
                },
                {
                    "name": "loadingbar",
                    "description": "废弃",
                    "type": "Loadingbar"
                },
                {
                    "name": "mock",
                    "description": "废弃",
                    "type": "Mock"
                }
            ],
            "return": {
                "description": "object"
            },
            "example": [
                "\n     import {Sync,Control} from 'gfs-react-mvc'\n     import TestModel from '../model/TestModel'\n     //这里由于@为文档关键符号，所以下面将以$代替\n     //@Control(TestModel)\n     class TestControl{\n         constructor(){}\n         $action\n         changeAge(){\n\n              \n             fetch('/test.json'[,params]).then((data)=>{\n                 //control中默认提供update、del、insert、save四种操作数据方法，会根据不同的control名生成，如下根据testControl生成的方法testControlUpdate\n\n                 dispatch(this.testControlUpdate('age','ajax改变的age：'+data.age) )\n             })\n              \n          }\n         //不建议使用下列方式\n         //这里由于@为文档关键符号，所以下面将以$代替\n         $Sync('/test',{\n             method:'get'\n         })\n         $action\n         save(data){\n             //此处data是异步请求后服务器返回的结果\n             if(data){\n                 //返回数据更新页面节点信息\n                 return data\n             }\n             //不做任何改变\n             return false\n         }\n     }"
            ],
            "class": "Control"
        },
        {
            "file": "src/control.js",
            "line": 406,
            "description": "获取model方法名全名，在未传任何值时返回方法前缀",
            "itemtype": "method",
            "name": "getModelName",
            "params": [
                {
                    "name": "actionName",
                    "description": "default='',方法名，可选",
                    "type": "String"
                },
                {
                    "name": "isDefault",
                    "description": "是否获取系统中提供的方法名,默认false，可选",
                    "type": "Boolean"
                },
                {
                    "name": "modelName",
                    "description": "model名字，可选",
                    "type": "String"
                }
            ],
            "return": {
                "description": "string"
            },
            "class": "Control"
        },
        {
            "file": "src/index.js",
            "line": 22,
            "itemtype": "method",
            "name": "page",
            "params": [
                {
                    "name": "opts",
                    "description": "可以直接等于react component",
                    "type": "Object",
                    "props": [
                        {
                            "name": "middleware",
                            "description": "可选，中间件集合",
                            "type": "Array"
                        },
                        {
                            "name": "module",
                            "description": "必填，需要渲染在页面的组件",
                            "type": "React component"
                        },
                        {
                            "name": "devTools",
                            "description": "可选，数据模型调试，可视化面板，可以查看数据模型结构",
                            "type": "Object"
                        },
                        {
                            "name": "bar",
                            "description": "可选，异步数据请求时加载状态栏",
                            "type": "Object"
                        },
                        {
                            "name": "debug",
                            "description": "可选，是否是调试状态，调试状态下会输出日志信息",
                            "type": "Boolean"
                        },
                        {
                            "name": "agent",
                            "description": "可选，默认值为pc，三种可选值：pc、wap、other，other已bar字段对象为准",
                            "type": "String"
                        },
                        {
                            "name": "container",
                            "description": "可选，默认为root，组件放在页面的容器id",
                            "type": "String"
                        }
                    ]
                }
            ],
            "return": {
                "description": "RTools"
            },
            "example": [
                "\n     imoprt {page} from 'gfs-react-mvc'\n      import Module from './TestComponent'\n     //渲染到页面\n      page(Module)"
            ],
            "class": "Page",
            "module": "gfs-react-mvc"
        },
        {
            "file": "src/model.js",
            "line": 110,
            "description": "一个类装饰器，被装饰的类会变成store，默认不需要额外提供对数据操作的方法，在control中默认会提供del、update、insert等数据操作方法；如果有特殊需求无法满足使用场景可按照example中给出的方式自行编写数据处理方法<br />\n<strong style=\"color:red\">注意：model类中`__name`属性必须要有，这是为了能在各个component正常使用model必备的一个属性,必须小写，默认会在字符串后面添加上\"model\",例如：`static __name='test'`,那么在实际中运用应该是this.props.testmodel</strong>",
            "itemtype": "method",
            "name": "Model",
            "params": [
                {
                    "name": "target",
                    "description": "被包装的对象",
                    "type": "Object"
                }
            ],
            "example": [
                "\n\n      import {Model} from 'gfs-react-mvc'\n      //这里由于@为文档关键符号，所以下面将以$代替\n      //@Model\n      $Model\n        class TestModel {\n           //__name必须要有，这是为了能再各个component正常使用model必备的一个属性,必须小写\n           static __name = 'testmodel'\n           //数据模型\n           static age = 20\n           static xq = {}\n           //可以自行定义数据操作方法，在control中通过\n           //dispatch({\n           //    type:`testmodel$$save`,\n           //    data:data\n           //})\n           //这种方式变更数据，其中type值的组成是通过：类名（全小写）+ 方法名组成\n           static save(data, action){\n               if(action.data){\n                   return data.merge(Immutable.fromJS(action.data) )\n               }\n           }\n           //dispatch({\n           //    type:`testmodel$$del`,\n           //    data:data\n           //})\n           static del(data, action){\n               if(action.data){\n                   return data.merge(Immutable.fromJS(action.data) )\n               }\n           }\n       }"
            ],
            "class": "Model",
            "module": "gfs-react-mvc"
        },
        {
            "file": "src/view.js",
            "line": 8,
            "description": "一个装饰器方法，用于装饰类，被装饰的类为页面视图，或者说是react的component，并不是每一个component都需要被装饰",
            "itemtype": "method",
            "name": "View",
            "params": [
                {
                    "name": "action",
                    "description": "control对象，可以是一个数组，比如：View([TestControl,Test2Control] )",
                    "type": "Object"
                }
            ],
            "return": {
                "description": "class"
            },
            "example": [
                "\n\n      import {View} from 'gfs-react-mvc'\n      import TestControl from './TestControl'\n      //这里由于@为文档关键符号，所以下面将以$代替\n      //@View(TestControl)\n      $View(TestControl)\n        class TestComponent extends Component {\n           constructor(props) {\n               super(props)\n           }\n\n           componentDidMount(){\n               setTimeout(()=>{\n                   //调用control中的action\n                   this.props.save(this)\n               },1000)\n           }\n\n           static defaultProps={}\n\n           render() {\n               console.log('age:',this.props.testmodel.get('age') )\n               return (\n                   <div>\n                       {this.props.testmodel.get('age')}\n                   </div>\n               )\n           }\n       }"
            ],
            "class": "View",
            "module": "gfs-react-mvc"
        }
    ],
    "warnings": []
}