Question

我正在使用一个javascript，我使用if条件来验证两个以上的变量，基于我设置数据。以下是javascript代码：

＆＃13;

if (twitterPicLink != "" || twitterMediaLink != "" || twitteHeartServeLink != "") {
      htmlDiv += "<div class='tweet'>";
      htmlDiv += "<div class='tweet-image'><img src='" + imgSrc + "' title='Tweet icon'></div>";
}
if (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink != "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + "&nbsp;<br/>" + twitterPicLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitteHeartServeLink + "&nbsp;<br/>" + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink == "" && twitteHeartServeLink != "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitteHeartServeLink + "</p></div></div>";
}
else if (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink != "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + "&nbsp;" + twitterPicLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink == "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitterPicLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
}
else if (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink == "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitterPicLink + "</p></div></div>";
}
else if (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink == "") {
      htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitterMediaLink + "</p></div></div>";
}

＆＃13;

如何更改上述代码以切换案例验证？

Answer 1

我希望这会有所帮助

switch (twitterPicLink) {
  case "":
    switch (twitterMediaLink) {
        case "":
            switch (twitteHeartServeLink) {
                case "":

                [break;]
                default:                    
                    htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitteHeartServeLink + "</p></div></div>";
                [break;]
            }
        [break;]
        default:
            switch (twitteHeartServeLink) {
                case "":
                    htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitterMediaLink + "</p></div></div>";
                [break;]
                default:
                    htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitteHeartServeLink + "&nbsp;<br/>" + twitterMediaLink + "</p></div></div>";
                [break;]
            }

        [break;]
    }
    [break;]

  default:    
    switch (twitterMediaLink) {
        case "":
            switch (twitteHeartServeLink) {
                case "":
                    htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitterPicLink + "</p></div></div>";
                [break;]
                default:
                    htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + "&nbsp;" + twitterPicLink + "</p></div></div>";
                [break;]
            }
        [break;]
        default:
            switch (twitteHeartServeLink) {
                case "":
                    htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitterPicLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
                [break;]
                default:
                    htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + "&nbsp;<br/>" + twitterPicLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
                [break;]
            }
        [break;]
    }
    [break;]
}

Answer 2

考虑一下你的设计。即使这在技术上没有回答你可以通过工厂级别

来解决的问题

if (twitterPicLink != "" || twitterMediaLink != "" || twitteHeartServeLink != "") {
      htmlDiv += "<div class='tweet'>";
      htmlDiv += "<div class='tweet-image'><img src='" + imgSrc + "' title='Tweet icon'></div>";
}
htmlDiv += tweetBodyFactory.create(twitterPicLink, twitterMediaLink, twitterHeartSaveLink);

在工厂内，您可以使用合成来保存工厂实施，定义字段PicLinkIsDefined，MediaLinkIsDefined和HeartSaveLinkIsDefined。随着

var matchingFactory = factories.find(f => (f.PicLinkIsDefined && twitterPicLink != "" || !f.PicLinkIsDefined && tweitterPicLink == "")
    && (f.MediaLinkIsDefined && twitterMediaLink != "" || !f.MediaLinkIsDefined && twitterMediaLink == "")
    && (f.HeartSaveLinkIsDefined && twitterHeartSaveLink != "" || !f.HeartSaveLinkIsDefined && twitterHeartSaveLink == ""));
if(matchingFactory != undefined)
{
    return matchingFactory.create(twitterPicLink, twitterMediaLink, twitterHeartSaveLink);
}
// error handling here

您可以选择匹配的工厂并构建HTML。它将是更多的代码（与所有工厂实现），但最终它会更清洁。

我知道它对工厂模式的解释有点松散，但仍然是构建需求的好方法。

Answer 3

尝试在开关案例中覆盖您的代码..

请检查一次..

switch (true) {
        case (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink != ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + " " + twitteHeartServeLink + "&nbsp;<br/>" + twitterPicLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
            break;
        case (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitteHeartServeLink + "&nbsp;<br/>" + twitterMediaLink + "</p></div></div>";
            break;
        case (twitterPicLink == "" && twitterMediaLink == "" && twitteHeartServeLink != ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitteHeartServeLink + "</p></div></div>";
            break;
        case (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink != ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + "&nbsp;" + twitterPicLink + "</p></div></div>";
            break;
        case (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink != ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitteHeartServeLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
            break;
        case (twitterPicLink != "" && twitterMediaLink != "" && twitteHeartServeLink == ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + "<br/>" + twitterPicLink + "&nbsp;" + twitterMediaLink + "</p></div></div>";
            break;
        case (twitterPicLink != "" && twitterMediaLink == "" && twitteHeartServeLink == ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitterPicLink + "</p></div></div>";
            break;
        case (twitterPicLink == "" && twitterMediaLink != "" && twitteHeartServeLink == ""):
            htmlDiv += "<div class='tweet-body'><p>" + twittedText + "&nbsp;" + twitterMediaLink + "</p></div></div>";
            break;
            htmlDiv += "<div class='tweet'>";
            htmlDiv += "<div class='tweet-image'><img src='" + imgSrc + "' title='Tweet icon'></div>";

        default:

    }

Answer 4

您可以从MDN学习switch - JavaScript

这是关于如何使用它的代码synxtax。

switch (expression) {
  case value1:
    //Statements executed when the result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the result of expression matches valueN
    [break;]
  default:
    //Statements executed when none of the values match the value of the expression
    [break;]
}

如何使用switch case验证多个变量

4 个答案: