vue 里的代码该如何组织

  • Z时代
  • 2024-02-21
  • 分类：IT

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 用来控制流程。
不然这样涉及修改的话，方法一个依赖一个修改起来会很麻烦。

回答：

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

  • 理解 JavaScript 的 async/await
  • ↓↓↓突然想起来写过一篇关于异步弹框的，来补个参考链接↓↓↓
  • 网页弹框的异步行为分析

回答：

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

  • https://www.npmjs.com/package...
    滴滴出品的，但是好像很久没有维护了。
    他可以将一个弹框做到promise中，达到下面的效果：
// 打开弹开
await xxxModel.open(配置)
// 只有在弹框被关闭后才执行。

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

以上是 vue 里的代码该如何组织 的全部内容， 来源链接： utcz.com/p/937434.html

回到顶部