大型前端开发过程中的数据存放位置

示例图

硬编码——>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列表，它的每一个项的内容是不同的

  要在详情页获取相关项内容可以采取如下步骤

  1. 路由跳转到detail/:id(对应项id)　 when 组件触发事件
  2. 获取id —> 修改model里的currentItem when subscriber 监听路由变化
  3. 渲染详情页 (对应组件) when router　监听路由
  4. 获取currentItem when 组件connect model

• api

  待更新...

优势

采用分步开发，虽然多了些看似无关的代码，但是减轻了任务的复杂性，同时也方便了在调试中对于问题的定位

另外一点问题

在编写model时往往可以复用文件,甚至是以前项目的代码