Приведение в порядок 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();
});

Но я не уверен, как это можно исправить с помощью троичного оператора, чтобы сделать его аккуратным и лаконичным. Мне всегда кажется, что я пишу слишком длинные операторы if/else с помощью Javascript, и я хотел бы понять, как этого не делать!

Редактировать: по умолчанию #tog-desc показывает "Показать описание", а.description скрыто, если это не очевидно

Благодарю.

Answer 1

$("#tog-desc").click(function(e) {
    var $this = $(this), has_cls = $this.hasClass("open");
    $this.toggleClass("open")
       .text((has_cls ? "Hide" : "Show") + " Description")
       .css("background-position", has_cls ? "85px 3px" : "88px -10px");

    $(".description").slideToggle()

    e.preventDefault();
});

---

Или сделайте фоновое положение частью .open класс CSS...

$("#tog-desc").click(function(e) {
    var $this = $(this);
    $this.toggleClass("open")
       .text(($this.hasClass("open") ? "Hide" : "Show") + " Description");

    $(".description").slideToggle();

    e.preventDefault();
});

Answer 2

Как вы видели в некоторых других ответах здесь, безусловно, возможно сократить ваш код на несколько строк, используя троичные операторы.

Тем не менее, я ставлю под сомнение ценность этого. Кодекс не является конкурсом для написания максимально короткой формы. С точки зрения производительности, в вашем коде нет ничего плохого; нет ничего более или менее неотъемлемо производного в троичном выражении по сравнению с оператором if.

Кроме того, необходимо принять во внимание ремонтопригодность. Ваш код в его нынешнем виде более читаем и понятен. Хотя троичный оператор может сэкономить вам несколько строк, опять же, речь идет не о линиях, а о предоставлении функциональности с разумной производительностью. Места, которые вы должны оценивать для улучшения, это не длина кода как таковая, а повторное использование кода, эффективность и, наконец, размер файла с помощью минификатора.

Существуют времена и места для использования троичных операторов - это не то, что вы должны посыпать уже работающим кодом, просто чтобы исключить несколько четких, функциональных строк кода.

Больше чтения

• http://blog.ashodnakashian.com/2011/03/code-readability/
• https://docs.google.com/presentation/d/1zHb855D5fQAKix47YCeVCH6QUQFzwCTxuz5GFMoNQyc/edit?pli=1
• В разделе "Искусство читаемого кода" есть раздел, посвященный троичным файлам - 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");
});

Answer 3

Я не уверен, что это чище, но это должно работать:

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

    var open = $(this).hasClass("open");
    $(this).html((open ? "Hide" : "Show") + " Description")
           .css("background-position", "85px " + (open ? "85px" : "3px");

    e.preventDefault();
});

Answer 4

var open = $(this).hasClass('open');
$(this)
  .html( ( open ? "Show" : "Hide" ) + " Description")
  .css("background-position", open ? '85px 3px' : '88px -10px' );

Это то, что вы после? В принципе:

<condition> ? <true_result> : <false_result>

Answer 5

Ну, я не знаю, будет ли это лучше, но вы могли бы сделать что-то вроде этого:

var update = $(this).hasClass('open') ? 
  { label: "Hide Description", position: "85px 3px" } :
  { label: "Show Description", position: "88px -10px" };

$(this).html(update.label).css("background-position", update.position);