示例图
硬编码——>testdata——>model——>fake_api—>api
说明
前端项目在开发和调试中少不了对数据的展示和处理
如果是直接从api中获取数据涉及到的环节太多，对于初学者不太友好
所以在开发过程中可以数据存放可采用如上述动态的方式
-
第一步 硬编码
最初级的阶段，每个组件把它所需要的数据，声明成变量硬编码在代码文件中，方便组件的调用。
-
第二步 testdata
一般可以直接从第二步开始
在项目文件夹中创建个testdata文件夹,将数据按模块放入testdata文件夹上的文件中，如 将blogs 数据 在blog.js中声明成变量并导出,组件要使用数据直接引用即可。
- 优势 便于查找,方便数据的复用，同时还可以把数据的相关信息，如对应的api信息放入文件中，方便查阅
-
第三步 model
编写model,在model的state里引用testdata的文件，修改组件代码，更改获取数据的方式为connect,同时在model里面添加reducer,支持修改数据操作，让组件在提交数据时可以直接dispatch
-
可选步 subscribe
支持网页在变更路由时，对model里的数据进行变动，减少组件间数据的参数传递
例如对于一个list列表，它的每一个项的内容是不同的
要在详情页获取相关项内容可以采取如下步骤
- 路由跳转到detail/:id(对应项id) when 组件触发事件
- 获取id —> 修改model里的currentItem when subscriber 监听路由变化
- 渲染详情页 (对应组件) when router 监听路由
- 获取currentItem when 组件connect model
-
api
待更新...
优势
采用分步开发，虽然多了些看似无关的代码，但是减轻了任务的复杂性，同时也方便了在调试中对于问题的定位
另外一点问题
在编写model时往往可以复用文件,甚至是以前项目的代码
