vue 里的代码该如何组织

element-ui 的后台,vue 是版本 2。

//...
methods: {
    showDialog1() {
        // ...
        // 弹出第一个窗口,有确认和取消按钮
    },
    showDialog2() {
        // ...
        // 弹出第二个窗口,有确认和取消按钮
    },
    showDialog3() {
        // ...
        // 弹出第三个窗口,有确认和取消按钮
    },
    // 第一个窗口确认按钮的点击事件
    handleDialog1Confirm() {
        this.showDialog3();
    },
    // 第一个窗口 点击取消按钮
    handleDialog1Cancel() {
        this.showDialog2();
    }
    // 第二个窗口确认按钮的点击事件
    handleDialog2Confirm() {
        this.doMethodA();
    },
    // 第三个窗口确认按钮的点击事件
    async handleDialog3Confirm() {
        await this.doMethodB();    // 可能是异步方法
        await this.doMethodC();
        this.doMethodA();
    },
    doSomething() {
        // 这里需要执行一个类似流程的事件
        // 比如 dialog 1 点击了取消,弹出 dialog 2
        // dialog 1 点击了确认, 弹出 dialog 3
        // dialog 2 点击确认, 直接执行 A 方法。
        // dialog 3 点击确认 执行 B C 方法 改变某些数据再执行 A 方法。
    },
    // ...其余的方法
}

类似以上代码(会有多个弹出窗口和各种依赖操作),有没有更好的组织办法,比如 RxJS 用来控制流程。
不然这样涉及修改的话,方法一个依赖一个修改起来会很麻烦。

回复
阅读 1.3k
2 个回答

学编程的时候,顺序、分支、循环 —— 不就是最基本也最重要的流程控制么?
如果说是因为异步的问题造成了代码流程看不顺眼,那就用 await 写法。

如果是觉得使用弹框回调函数打破已有的逻辑,跟上面老兄一样,建议使用async/await.
且推荐一个工具库:

// 打开弹开
await xxxModel.open(配置)
// 只有在弹框被关闭后才执行。

这样就没有打破流程的痛苦感了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏