关于前端数据&逻辑的思考
这里我是基于典型的MVC模型，那么为了将现有代码重构为理想的模型，我需要做以下几步：拆分组件，逻辑处理，抽象、聚合数据
组件化
// 充血组件 // 贫血组件
组件A | 组件B | 组件C 组件A | 组件B | 组件C
逻辑A | 逻辑B | 逻辑C ---------------------
数据A | 数据B | 数据C 逻辑层
------------------- ---------------------
全局逻辑 数据层
这种组件提炼出来的状态只和自己有关，强制被放在Store中就会带来Store复杂度的上升，如果你的组件足够多，那么全局的Store会膨胀的特别明显，更重要的是如果你的状态是和组件成树形对应的话，Store中将会冗余很多重复的数据。
描述组件的状态被转移到外部，导致操作组件的成本变高，对于组件内的一些简单操作将变得复杂繁琐。
树形结构
平行结构
input => merge(name, password) => filter(校验合法性) => post(服务器) var clicks = Rx.Observable.fromEvent(document, 'click');
clicks.subscribe(x => console.log(x));
// 结果:
// 每次点击 document 时，都会在控制台上输出 MouseEvent 。
逻辑处理
input => merge(async(name), password) => filter(校验合法性) => post(服务器) let age$ = Observable.of<number>(27, 25, 29);
let name$ = Observable.of<string>('Foo', 'Bar', 'Beer');
let isDev$ = Observable.of<boolean>(true, true, false);
Observable
.zip(age$,
name$,
isDev$,
(age: number, name: string, isDev: boolean) => ({ age, name, isDev }))
.subscribe(x => console.log(x));
// 输出：
// { age: 27, name: 'Foo', isDev: true }
// { age: 25, name: 'Bar', isDev: true }
// { age: 29, name: 'Beer', isDev: false } const getInfo = (params) => async (dispatch, getState) => {
// TODO...
dispatch(actionaA);
// TODO...
dispatch(actionaA);
} const somethingEpic = (action$, store) =>
action$.ofType(SOMETHING)
.switchMap(() =>
ajax('/something')
.do(() => store.dispatch({ type: SOMETHING_ELSE }))
.map(response => ({ type: SUCCESS, response }))
); const somethingEpic = action$ =>
action$.ofType(SOMETHING)
.switchMap(() =>
ajax('/something')
.mergeMap(response => Observable.of(
{ type: SOMETHING_ELSE },
{ type: SUCCESS, response }
))
);
// 上面这两段demo来着redux-observable的文档 @UserInfoPipe({ name: 'Model.UserInfo.name' })
class LoginDemo extends Component {
constructor(props) {
super(props);
}
render(){
return (
<View>
<Text>{this.props.name}</Text>
</View>
);
}
}
抽象、聚合数据
第一阶段
第二阶段
第三阶段
数据按照域分类，存在不同的表中，每张表存储的字段不重复
每张表中每条数据都有一个唯一主键
表中除了主键外其它列，相互不存在依赖关系
把整个项目按照一定模型去分离为若干子状态，这些子状态之间不存在重复冗余的数据。
{
activeLine: 1,
list: [
{
name: 'test1',
},
{
name: 'test2',
},
{
name: 'test3',
},
{
name: 'test4',
},
]
}
以键值对的结构存储数据，用key/ID作为记录的索引，记录中的其他字段都依赖于索引。
状态树中不保存可以通过已有数据计算出来的数据，也就是这些数据都是相互独立的，都可以被称为原子数据。
按照贫血模型分离组件
通过订阅的形式采集数据源
通过数据库的形式去保存数据
通过流的方式去处理和分发数据
通过流的形式去格式化数据
作者：jonnyF
链接：https://juejin.im/post/5a7b29caf265da4e995775db
来源：掘金
原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
服务热线 19970861797
