javascript - 用三元运算符整理 javascript

Question

我知道这段代码很困惑:

$("#tog-desc").click(function(e) {
    $(this).toggleClass("open");
    $(".description").slideToggle();

    if( $(this).hasClass("open") ) {
        $(this).html("Hide Description").css("background-position", "85px 3px");
    }
    else {
        $(this).html("Show Description").css("background-position", "88px -10px");
    }

    e.preventDefault();
});

但我不确定如何用三元运算符来整理它以使其整洁和简洁。我似乎总是用 Javascript 编写过长的 if/else 语句，我想了解如何不必这样做!

编辑:默认情况下#tog-desc显示“显示描述”，并且隐藏.description，以防这不明显

谢谢。

Answer 1

正如您在此处的一些其他答案中所看到的，使用三元运算符当然可以将代码缩短几行。

但是，我质疑这样做的值(value)。代码并不是编写尽可能短的形式的竞赛。就性能而言，您的代码绝对没有问题；与 if 语句相比，三元本身的性能并没有什么不同。

此外，还必须考虑可维护性。就目前的情况而言，您的代码在当前形式下更易于浏览和理解。虽然三元运算符可能会为您节省几行代码，但它与代码无关，而是以合理的性能提供功能。您应该评估改进的地方不是代码长度本身，而是代码重用、效率，以及最终通过压缩器实现的文件大小。

有时和某些地方需要使用三元运算符——您不应该为了消除一些清晰易读的功能性代码行而将其撒在已经可以工作的代码中。

更多阅读

• http://blog.ashodnakashian.com/2011/03/code-readability/
• https://docs.google.com/presentation/d/1zHb855D5fQAKix47YCeVCH6QUQFzwCTxuz5GFMoNQyc/edit?pli=1#slide=id.p
• 可读代码的艺术有一个关于三元的部分 - http://www.amazon.com/The-Readable-Code-Dustin-Boswell/dp/0596802293

编辑有一件事...您可以删除单行条件语句周围不必要的花括号:

$("#tog-desc").click(function(e) {
    e.preventDefault();

    $(this).toggleClass("open");
    $(".description").slideToggle();
    if( $(this).hasClass("open") )
        $(this).html("Hide Description").css("background-position", "85px 3px");
    else
        $(this).html("Show Description").css("background-position", "88px -10px");
});