代码解耦

今天看到前端小我伙伴的代码,发现两个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里.

前端代码解耦,评审

代码解耦