是否可以在 JavaScript 類中插入 switch/case 語句？

Question

我想在 JavaScript 類中插入 switch/case 語句。 在各種情況下，我試圖創建一個類來顯示使用圖書館制作的導覽的特定步驟。 所以我問自己是否可以將這種語句插入到 JavaScript 類中以根據 PHP 路由名稱執行。 是否有可能？

class TourUtils {
    constructor(routeName) {
        switch (routeName) {
            case "host":
                $(document).ready(function () {
                    document
                        .querySelector(".dashboard__tour")
                        .addEventListener("click", () => {
                            window.TOUR.start();
                        });
                });
                break;
            case "Nuovo annuncio":
                $(document).ready(function () {
                    window.TOUR.show("new-ad-page-intro-step");
                });
                break;
            case "Modifica annuncio":
                $(document).ready(function () {
                    window.TOUR.show("new-ad-page-nineth-step");
                });
                break;
            case "Casa annuncio":
                $(document).ready(function () {
                    if ($("#save").is(":visible"))
                        window.TOUR.show("mod-house-page-intro-step");
                });
                break;
            case "Nuova casa":
                $(document).ready(function () {
                    window.TOUR.show("mod-house-page-second-step");
                });
                break;
            case "Modifica casa":
                $(document).ready(function () {
                    window.TOUR.show("mod-price-page-intro-step");
                });
                break;
            case "Calendario":
                $(document).ready(function () {
                    if ($(".update-btn").is(":visible"))
                        window.TOUR.show("final-step");
                    else if (!$(".update-btn").is(":visible")) {
                        window.TOUR.show("mod-price-page-second-step");
                    }
                });
                break;
            case "Aggiungi date":
                $(document).ready(function () {
                    window.TOUR.show("add-date-page-intro-step");
                });
                break;
        }
    }
}

Answer 1

我不明白為什么不。

一般來說，在論壇上詢問某些代碼是否有效之前，您可以做一件非常簡單的事情：嘗試一下。 您可以在 js 文件中嘗試並使用 node 或在瀏覽器的控制台中運行它。 做一個超級最小的測試並運行它，你會得到你的答案。

對於“是否可以在 JS 類構造函數中使用 switch case”這個問題，這是我要做的最小測試

class A {
  constructor(a) {
    switch (a) {
      case 1:
        this.a = 'one';
        break;
      case 2:
        this.a = 'two';
        break;
      default:
        this.a = 'something else';
        break;
    }
  }
}

let first = new A(1);
let second = new A(2);
let third = new A(93);

console.log({
  test1: first.a,
  test2: second.a,
  test3: third.a
});

並確保它顯示

{
  test1: 'one',
  test2: 'two',
  test3: 'something else'
}

Answer 2

您可以將代碼簡化為以下內容。 也許這有助於找到代碼的問題。

class TourUtils {
  constructor(routeName) {
    var routes = {
        "host": function () {
          document
            .querySelector(".dashboard__tour")
            .addEventListener("click", () => {
              window.TOUR.start();
            });
        },
        "Nuovo annuncio": "new-ad-page-intro-step",
        "Modifica annuncio": "new-ad-page-nineth-step",
        "Casa annuncio": function () {
          if ($("#save").is(":visible"))
            window.TOUR.show("mod-house-page-intro-step");
        },
        "Nuova casa": "mod-house-page-second-step",
        "Modifica casa": "mod-price-page-intro-step",
        "Calendario": function () {
          if ($(".update-btn").is(":visible")) window.TOUR.show("final-step");
          else if (!$(".update-btn").is(":visible")) {
            window.TOUR.show("mod-price-page-second-step");
          }
        },
        "Aggiungi date": "add-date-page-intro-step"
    };
    $(document).ready(function () {
      var route = routes[routeName];
      if (typeof route === 'function') {
        route();
      } else {
        window.TOUR.show(route);
      }
    }
  }
}