代码解耦
今天看到前端小我伙伴的代码,发现两个js之间的耦合度高,一个方法里变量,两个js相互引用,这样的代码不适合阅读,更不适合未来的交接. 具体如下:
@action
getList = flow(
function* (data) {
try {
const res = yield modelProvider.getList(data);
this.List = this.List.concat(.res.data);
if (res.page) {
this.total = res.page.total;
}
if (res.data.length < this.PageSize) {
this.isMoreDisabled = true;
console.log(res.data)
return res.data;
}
this.PageNo = data.pageNo + 1;
return res.data;
} catch (e) {
return handleError(e);
}
}
).bind(this)
复制代码
这里是store里的代码
//获取设备列表下一页
getMore = () => {
const { PageNo, List, PageSize } = this.targetStore;
this.setState({
deviceLoading: true
});
getList({
pageNo: PageNo,
pageSize: PageSize,
})
.then(res => {
console.log(res);
message.destroy();
this.setState({
deviceLoading: false
});
if (res.length) {
this.Progress();
}
})
};
复制代码
这里是index.js里的文件的代码.
很正常的获取列表的内容,在index.js里调用getMore函数,获取store里的PageNo, List, PageSize,这些变量获取后传递给store里的函数getList从后端拉取数据,然后store里返回数据给index.js做判断.
以下是个人的看法 index.js里的文件引用store里的变量:PageNo,PageSize,index.js里的getList里的方法里需要接受来着store里的变量:res,两个js文件相互依赖,相互耦合,不利于后面的代码的维护,可能新增需求后要维护原来的代码会造成一定的困难,增加后续交接小伙伴交接难度. 在这里如果需要解耦的话,则index.js里面就不应该处理业务逻辑,把所有的业务逻辑都提到store里.