Предоставление записи часов времени человека в формате HTML со многими цветовыми кодировками

Я закодировал этот беспорядок JavaScript и немного jQuery. Все здесь работает идеально по назначению, однако это настоящий беспорядок. Какой был бы лучший способ очистить это с помощью лучших практик и т. Д.

$.getJSON("People.json",
    function(data) {
        $.each(data.People, function(i, PersonObj) {
            var Person = PersonObj[Object.keys(PersonObj)[0]];

            content = '<tr>';
            content += '<tbody>';
            content += '<td>' + Person.Op + ' </td>';

            // if the person has swiped off but not back on and one hour has elapsed                                  
            if (Person.DifHours > 1 && Person.ON === false) {
                content += '<td style=" background: red;">' + Person.Name;
            } else if (Person.OUT !== false) {
                content += '<td style=" background: red;">' + Person.Name;
                // If the person has swiped back on from dinner set to lime 
            } else if (Person.ON !== false) {
                content += '<td style=" background: lime;">' + Person.Name;
                // If the person has swipped of for dinner but 1 hour has not elapsed set to yellow
            } else if (Person.OFF !== false) {
                content += '<td style=" background: yellow;">' + Person.Name;
            } else if (Person.Clock !== false) {
                // If the person has clocked on set to lime
                content += '<td style=" background: lime;">' + Person.Name;
            } else {
                content += '<td style=" background: Red;">' + Person.Name;
            }
            // putting values in to the table without formatting 

            content += '<td>' + Person.WorkHours + ' </td>';
            content += '<td>' + Person.Start + ' </td>';
            content += '<td>' + Person.End + ' </td>';

            // if the person has not clocked in set the text to white
            if (Person.Clock === false) {
                content += '<td style="  background: white; color: white;">' + Person.Clock;
            }
            // if the person is late by 10 mins set to cyan
            else if (Person.Late > 10) {
                content += '<td style=" background: cyan;">' + Person.Clock;
                // if the person is early by 10 mins set to orange
            } else if (Person.Late < -10) {
                content += '<td style=" background: Orange;">' + Person.Clock;
                // Setting text color based on conditions 
            } else {
                content += '<td style=" background: Lime;">' + Person.Clock + ' </td>';
            }
            // Setting text color based on conditions 
            if (Person.OFF === false) {
                content += '<td style=" background: white; color: white;">' + Person.OFF;
            } else {
                content += '<td>' + Person.OFF + ' </td>';

            }// Setting text color based on conditions 
            if (Person.ON === false) {
                content += '<td style=" background: white; color: white;">' + Person.ON;
            } else {
                content += '<td>' + Person.ON + ' </td>';

            }


             if (Person.Clock == false){
                 content += '<td style=" background: white; color: white;">' + Person.OUT;
            }else if (Person.DifHours > 1 && Person.ON == false && Person.HomeEarly > 10){
            content += '<td style=" background: cyan;">' + Person.OFF;
            }else if (Person.DifHours > 1 && Person.ON == false && Person.HomeEarly < - 10){
                content += '<td style=" background: orange;">' + Person.OFF;
            }else if(Person.DifHours > 1 && Person.ON == false){
                content += '<td style=" background: lime;">' + Person.OFF;
            }else if (Person.OUT === false) {
                content += '<td style=" background: white; color: white;">' + Person.OUT;
            }
            //Setting home colum formatting based on if they are in or out and if they locked early or late
            else if (Person.Home > 10) {
                content += '<td style=" background: cyan;">' + Person.OUT;
            } else if (Person.Home < -10) {
                content += '<td style=" background: Orange;">' + Person.OUT;
            }else {
                content += '<td style=" background: Lime;">' + Person.OUT + ' </td>';
            }

            content += '</tr>';
            content += '</tbody>';
            content += '<p>';
            $(content).appendTo("tbody");

        });
    });
37 голосов | спросил Josh Kirkpatrick 20 PM00000070000003231 2014, 19:39:32

8 ответов


41

Существует несколько хороших практик, которые помогут в этом коде.

Закройте теги HTML, которые вы открываете, - создайте действительный HTML

Более новые браузеры будут , вероятно, правильно отображать ваш контент, но старые браузеры не могут. Вы также можете получить странные ошибки форматирования, которые трудно отлаживать. Сохраните головную боль и всегда закрывайте теги в обратном порядке, чтобы их открывать.

<tbody><tr><td>....</td></tr></tbody>

Вы также можете поместить теги <tbody> вне вашего цикла foreach, так как для общей таблицы должен быть один <tbody>, а не по одной в строке.

Вы также можете использовать официальный валидатор HTML W3C , чтобы убедиться, что вы создаете допустимый HTML , и настройте свой JavaScript для соответствия.

Задайте переменную в блоке if; конструировать контент только один раз

Это упрощает обновление, если позже вы решите изменить способ создания необработанного HTML (например, переход из таблиц в div и промежутки).

Избегайте сокращений CSS, если вы не используете все свойства

Использование фона background: XYZcolor; означает, что любые другие свойства фона CSS (background-image, background-repeat, background-attachment, background-position) уже установлено . Если это ваше намерение, держите его. Если нет, уточните свои стили и используйте только background-color: XYZcolor;. Это может не повлиять на вас сейчас, но это хорошая привычка избегать сюрпризов позже.

Использовать классы CSS; не используйте атрибут style=

Это позволяет:

  1. Дать значимые имена, указывающие, почему ячейка окрашена определенным образом (поэтому вы можете отлаживать использование «источника просмотра» в браузере)
  2. Отрегулируйте стили независимо от вашего JavaScript (так что вам не нужно привлекать разработчика JavaScript, если клиент хочет, чтобы красные ячейки были просто краснее)
  3. Избегайте проблем, упомянутых в этом вопросе SO: Что плохого в встроенном CSS?

В сочетании с более ранними предложениями мы получаем:

var swipeStatus;
 // if the person has swiped off but not back on and one hour has elapsed  
if (Person.DifHours > 1 && Person.ON === false) {
    swipeStatus = "lateByOneHour";
} else if (Person.OUT !== false) {
    swipeStatus = "notOutYet";
    // If the person has swiped back on from dinner set to lime 
} else if (Person.ON !== false) {
    swipeStatus = "backFromDinner";
    // If the person has swiped of for dinner but 1 hour has not elapsed set to yellow
} else if (Person.OFF !== false) {
    swipeStatus = "outForDinner";
} else if (Person.Clock !== false) {
    // If the person has clocked on set to lime
    swipeStatus = "inNormally";
} else {
    swipeStatus = "defaultStatus";
}
content += '<td class="'+ swipeStatus +'">' + Person.Name + '</td>';

С помощью соответствующего CSS:

 .lateByOneHour {
    background-color: red;
}
.notOutYet {
    background-color: red;
}
.backFromDinner {
    background-color: lime;
}
.outForDinner {
    background-color: yellow;
}
.inNormally {
    background-color: lime;
}
.defaultStatus {
    background-color: red;
}

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

Вы также можете добавить несколько классов CSS к одному тегу <td class="class1 class2">. Иногда это полезно для упрощения логики if /else, но, похоже, это не так. Хорошо держать в заднем кармане, хотя.

Для повышения производительности вызовите appendTo() вне цикла

На самом сайте jQuery есть страница почему append() медленнее в циклах , но суть в том, что прикоснуться к DOM очень дорого, так как append() и appendTo() do , Добавление гигантского фрагмента HTML (всей таблицы) один раз в конце цикла будет выполняться быстрее, чем добавление маленьких бит HTML (только строки) на каждой итерации цикла.

ответил Matt Giltaji 20 PM00000090000001331 2014, 21:46:13
18

Это большой беспорядок условностей. Надеемся, что все они соответствуют комментариям рядом с ними, хотя при типичном коде, скорее всего, это not . Вы повторяете много HTML-кода, который может быть рассмотрен с использованием переменных, как показано на рисунке @ V31.

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

Самое первое условие - хороший пример.

// if the person has swiped off but not back on and one hour has elapsed                                  
if (Person.DifHours > 1 && Person.ON === false) {

Я не вижу ссылки на Person.OFF. Это ошибка или умышленное? Обеспечивает ли система, чтобы Person.ON === false заставлял Person.OFF быть true? Предполагая, что код верен, мы можем определить

function hasBeenOutForLongerThanOneHour(person) {
    return !person.ON && person.DifHours > 1;
}

Применяя это к остальным условиям в первом множестве, получаем

function isOut(person) {
    return person.OUT;
}
function isBackFromDinner(person) {
    return person.ON;
}
function hasBeenOnBreakLessThanOneHour(person) {
    return person.OFF;
}
function hasClockedOn(person) {
    return person.Clock;
}

Я использовал ваши комментарии для имен функций, но, как вы, вероятно, увидите, что некоторые из них более наглядны, чем другие, и некоторые из них, по-видимому, указаны ниже. Например, isBackFromDinner выглядит только в Person.ON, но не будет ли кто-то, кто только что пришел на работу, тоже включен? Вы бы не назвали этого человека «обратно с обеда», если они еще не пошли на обед. И называть его «перерыв» более широко применимо, чем «ужин».

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

  • Все стили сводятся к двум вариантам: спрячьте ячейку с белым-на-белом или примените цвет фона. Давайте укажем первый вариант, используя цвет hide.

  • Само значение ячейки изменяется во втором и третьем блоках, но давайте добавим его в каждую таблицу для согласованности.

Вот таблица, которая управляет ячейкой Name:

var NAME_STYLE_FILTERS = [
        // filter function, field name, style to apply
        [hasBeenOutForLongerThanOneHour, 'Name', 'red'],
        [isOut, 'Name', 'red'],
        [isBackFromDinner, 'Name', 'lime'],
        [hasBeenOnBreakLessThanOneHour, 'Name', 'yellow'],
        [hasClockedOn, 'Name', 'lime'],
        [null, 'Name', 'red'],
    ];
  

Примечание. Я выбрал массивы, поскольку есть только три элемента, но использование объектов может сделать более ясным, что происходит.

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

function buildStyledCell(person, filters) {
    var match,
        text,
        style;
    filters.some(function (filter) {
        if (!style[0] || style[0](person) {
            match = filter;
            return true;
        }
    };
    text = person[match[1]];
    style = match[2] == 'hide' ? 'background-color: white; color: white'
            : 'background-color: ' + match[2];
    return '<td style="' + style + '">' + text + '</td>';
}

Поместите все это вместе, и у вас есть это:

var content = '<tr>'
content += '<tbody>';
content += '<td>' + Person.Op + '</td>';
content += buildStyledCell(Person, NAME_STYLE_FILTERS);
content += '<td>' + Person.WorkHours + ' </td>';
content += '<td>' + Person.Start + ' </td>';
content += '<td>' + Person.End + ' </td>';
content += buildStyledCell(Person, CLOCK_STYLE_FILTERS);
content += buildStyledCell(Person, OFF_OUT_STYLE_FILTERS);
content += '</tr>';
content += '</tbody>';
content += '<p>';
$(content).appendTo("tbody");

Кстати, что с вашими тегами здесь? Это выглядит неверно:

<tr>
    <tbody>             <-- why? only one per table
        <td>...</td>
        ...
    </tr>
</tbody>                <-- out of order with </tr>, but again not needed

Общие советы

  • Пока вы используете Object.keys, вы также можете использовать Array.prototype.forEach, который также находится на ES5. Имейте в виду, что он не сработает, если data.Peoplenull или undefined - точно так же, как $.each.

    data.People.forEach (function (PersonObj) {...});

  • Когда я прочитал

    if (Person.OUT !== false)
    

    Я сразу спрашиваю себя: «Какие другие значения помимо true и false могут Person.OUT взять и что они означают? Имеет ли null, что мы не знаем, если они отсутствуют, или это будет undefined, если они еще не установлены в настоящее время? "

    Скорее всего, что ON, OFF и OUT всегда будут содержать логические значения и использовать === и !== только усложняет код. То, что вы используете Person.ON == false позже, усугубляет путаницу читателя.

    Упростите их

    if (Person.OUT)
    

    и

    if (... && !Person.ON && ...)
    

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

  • Вы не закрываете элементы <td> внутри условных обозначений.

  • Вы можете оставить этот супер-полезный комментарий, который появляется несколько раз:

    // Setting text color based on conditions
    
ответил David Harkness 20 PM000000100000005931 2014, 22:46:59
14

Первый блок if может быть сужен с помощью цветовой переменной; что-то вроде этого:

var color = "red";
// if the person has swiped off but not back on and one hour has elapsed                                  
if (Person.DifHours > 1 && (Person.ON === false || Person.OUT !==false)) {
     color = "red";
 // If the person has swiped back on from dinner set to lime 
 } else if (Person.ON !== false || Person.Clock !== false) {
     color = "lime";
 // If the person has swiped off for dinner but 1 hour has not elapsed set to yellow
 } else if (Person.OFF !== false) {
     color = "yellow";
 } 
 content += "<td style=\" background: "+color+";\">" + Person.OUT;

Вы можете сделать то же самое для остальных блоков if. Если вы комбинируете условия, которые приводят к тому же цвету с помощью && и ||, вы можете уменьшить длину кода, делая его более читаемым.

ответил V31 20 PM00000070000004031 2014, 19:54:40
5

Как обычно, я опаздываю на день и коротким долларом. :)

У вас действительно есть хороший пример использования модели представления. Все if s будут методами в вашей модели представлений, чтобы вернуть правильный CSS-класс для тэгов <td>. Это имеет несколько преимуществ:

  1. Логика представления теперь является ее собственным компонентом и может быть протестирована с использованием любой из модулей тестирования модулей JavaScript там
  2. Код для конкатенации HTML становится намного более компактным и чистым.

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

EmployeeStatusViewModel.js

function EmployeeStatusViewModel(person) {
    this.person = person || null;
}

EmployeeStatusViewModel.prototype = {

    person: null,

    constructor: EmployeeStatusViewModel,

    getOffStatus: function() {
        return this.person.OFF ? "out" : "";
    },

    getOnStatus: function() {
        return this.person.ON ? "on" : "";
    },

    getSwipeStatus: function() {
        var swipeStatus = "defaultStatus";

        // if the person has swiped off but not back on and one hour has elapsed  
        if (this.person.DifHours > 1 && !this.person.ON) {
            swipeStatus = "lateByOneHour";
        } else if (this.person.OUT) {
            swipeStatus = "notOutYet";
        // If the this.person has swiped back on from dinner set to lime 
        } else if (this.person.ON) {
            swipeStatus = "backFromDinner";
        // If the this.person has swiped of for dinner but 1 hour has not elapsed set to yellow
        } else if (this.person.OFF) {
            swipeStatus = "outForDinner";
        // If the person has clocked on set to lime
        } else if (this.person.Clock) {
            swipeStatus = "inNormally";
        }

        return swipeStatus;
    }
};

Ваш вызов для получения данных и последующего построения HTML может использовать Array вместо конкатенации большей и большей строки. Во-вторых, вам нужен только один вызов appendTo:

$.getJSON("People.json", function(data) {
    // The "view model" encapsulating view logic
    var model = new EmployeeStatusViewModel(),
    // The Array to which we append HTML
        content = [];

    $.each(data.People, function(i, peopleObj) {
        var person = model.person = peopleObj[Object.keys(peopleObj)[0]];

        content.push(
            '<tr>',
                '<td>' + person.Op + '</td>',
                '<td class="' + model.getSwipeStatus() + '">' + person.Name + '</td>',
                '<td>' + person.WorkHours + ' </td>',
                '<td>' + person.Start + ' </td>',
                '<td>' + person.End + ' </td>',
                '<td class="' + model.getSwipeStatus() + '">' + person.Clock + '</td>',
                '<td class="' + model.getOffStatus() + '">' + person.OFF + '</td>',
                '<td class="' + model.getOnStatus() + '">' + person.ON + '</td>',
                // build the rest of your columns...
            '</tr>'
        );
    });

    // Join the Array on an empty string and append to a <tbody> only once
    $(content.join("")).appendTo("tbody");
});

Примечание. Я не полностью изложил этот пример кода, оставив некоторые из них для вас.

Стилистические изменения

Учитывая, что я вижу имена свойств, начинающиеся с заглавной буквы, вы можете использовать .NET на сервере? В JavaScript только функции конструктора начинаются с заглавной буквы, например. XMLHttpRequest, массив, объект. Локальные переменные должны начинаться с строчной буквы.

Действительно, имена свойств также должны начинаться с строчной буквы, но если вы используете .NET и сериализуете объект в JSON, он переводит имена свойств в буквальном смысле, а использование PascalCase в .NET для имен свойств является преобладающим шаблоном , поэтому не так много вы можете сделать в этом отношении.

ответил Greg Burghardt 21 PM00000050000000431 2014, 17:00:04
4

Отключившись от того, что сказал @Matt Giltaji, я удалил весь стиль HTML и переместил его в CSS. Затем я переместил $(content).appendTo("tbody"); за пределы цикла, чтобы помочь производительности. Затем я бросил его через HTML-валидатор после того, как я изменил пару вещей, и все это, похоже, проверяется.

$.getJSON("People.json",
function (data) {
content = '<tr>';
content += '<tbody>';
$.each(data.People, function (i, PersonObj) {
var Person = PersonObj[Object.keys(PersonObj)[0]];

content += '<td>' + Person.Op + ' </td>';

// if the person has swiped off but not back on and one hour has elapsed                                  
var swipeStatus;
// if the person has swiped off but not back on and one hour has elapsed  
if (Person.DifHours > 1 && Person.ON === false) {
    swipeStatus = "lateByOneHour";
} else if (Person.OUT !== false) {
    swipeStatus = "notOutYet";
    // If the person has swiped back on from dinner set to lime 
} else if (Person.ON !== false) {
    swipeStatus = "backFromDinner";
    // If the person has swiped of for dinner but 1 hour has not elapsed set to yellow
} else if (Person.OFF !== false) {
    swipeStatus = "outForDinner";
} else if (Person.Clock !== false) {
    // If the person has clocked on set to lime
    swipeStatus = "inNormally";
} else {
    swipeStatus = "defaultStatus";
}
//putting the vales in the table with the swipe status and the infomation
content += '<td class="' + swipeStatus + '">' + Person.Name + '</td>';
// putting values in to the table without formatting 
content += '<td>' + Person.WorkHours + ' </td>';
content += '<td>' + Person.Start + ' </td>';
content += '<td>' + Person.End + ' </td>';
// if the person has not clocked in set the text to white
if (Person.Clock === false) {
    swipeStatus = "NoClock";
}
// if the person is late by 10 mins set to cyan
else if (Person.Late > 10) {
    swipeStatus = "ClockLate";
    // if the person is early by 10 mins set to orange
} else if (Person.Late < -10) {
    swipeStatus = "ClockEarly";
    //if they are ontime with +-10 mins set to lime 
} else {
    swipeStatus = "ClockOntime";
}
//put the infomation in to colum 
content += '<td class="' + swipeStatus + '">' + Person.Clock + '</td>';
//if the person has notswiped off set cell to hidden
if (Person.OFF === false) {
    swipeStatus = "NoClock";
    //else set to a misleading rule name (no css styling plain cell)
} else {
    swipeStatus = "Blank";
}
//put the infomation in to colum 
content += '<td class="' + swipeStatus + '">' + Person.OFF + '</td>';
// if the person has no swipe back on infomation after swipping off set cell to blank
if (Person.ON === false) {
    swipeStatus = "NoClock";
    // else set the cell to the same unstyled cell
} else {
    swipeStatus = "Blank";
}
//put the infomation in to colum 
content += '<td class="' + swipeStatus + '">' + Person.ON + '</td>';

// this if statment hides the pertentially undeeded could just put another logic block at the bottom to black every cell in each row if there is 
//no clock info insted of blanking each cell of the logic blocks 
if (Person.Clock === false) {
    swipeStatus = "NoClock";
    content += '<td class="' + swipeStatus + '">' + Person.OFF + '</td>';
    //If the person goes home with only have 2 out of the standard 4 swiped through the day and there second swipse is 10 mins less than there assgined home time set to Cyan
} else if (Person.DifHours > 1 && Person.ON === false && Person.HomeEarly > 10) {
    swipeStatus = "ClockEarly";
    content += '<td class="' + swipeStatus + '">' + Person.OFF + '</td>';
    //same as above but 10 mins or over home time
} else if (Person.DifHours > 1 && Person.ON === false && Person.HomeEarly < -10) {
    swipeStatus = "ClockLate";
    content += '<td class="' + swipeStatus + '">' + Person.OFF + '</td>';
    //same as above but with the 10 mins either side
} else if (Person.DifHours > 1 && Person.ON === false) {
    swipeStatus = "ClockOntime";
    content += '<td class="' + swipeStatus + '">' + Person.OFF + '</td>';
} // if they didn't go home early and they don't have an out swipe yet then they are still there so just hide the cell
else if (Person.OUT === false) {
    swipeStatus = "NoClock";
    content += '<td class="' + swipeStatus + '">' + Person.OFF + '</td>';
}
//if the person doesn't fit the critria above then they must have 4 swipes and a Person.Home time which is a value that shows how many mins thay are over or under there
//offical home times they are, the formatting is alittle stange but if it's > than 10 they have gone 10 miniets or over early
else if (Person.Home > 10) {
    swipeStatus = "ClockEarly";
    content += '<td class="' + swipeStatus + '">' + Person.OUT + '</td>';
    //same as above but gone late
} else if (Person.Home < -10) {
    swipeStatus = "Clocklate";
    content += '<td class="' + swipeStatus + '">' + Person.OUT + '</td>';
    //if non of that is true they have been good people and gone when they should!
} else {
    swipeStatus = "ClockOntime";
    content += '<td class="' + swipeStatus + '">' + Person.OUT + '</td>';
}

content += '</tr>';

});
content += '</tbody>';
content += '<p>';
$(content).appendTo("tbody");
});
ответил Greg Burghardt 21 PM00000050000000431 2014, 17:00:04
3

Один трюк, который мне нравится, - это отделить информацию (знание) от логики принятия решений . Таким образом, без большого изменения кода:

// What we know
var isOut = Person.OUT !== false;
var hasSwipedBack = Person.ON !== false;
var hasSwipedOff = Person.OFF !== false;
var hasClockedOn = Person.Clock !== false;
var hasNotSwipedBackInOneHour = Person.DifHours > 1 && Person.ON === false;

// What we will do
if (hasNotSwipedBackInOneHour) {
    content += '<td style=" background: red;">' + Person.Name;
} else if (isOut) {
    content += '<td style=" background: red;">' + Person.Name;
} else if (hasSwipedBack) {
    content += '<td style=" background: lime;">' + Person.Name;
} else if (hasSwipedOff) {
    content += '<td style=" background: yellow;">' + Person.Name;
} else if (hasClockedOn) {
    content += '<td style=" background: lime;">' + Person.Name;
} else {
    content += '<td style=" background: Red;">' + Person.Name;
}

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

Недостатки: если определение знаний требует интенсивного процессора, а некоторые знания не всегда используются, то вычисление всего этого в верхней части неэффективно.

Мы также можем уменьшить количество дубликатов в вашем коде в соответствии с DRY :

// What we will do
var newColor = 'red';
if (hasNotSwipedBackInOneHour) {
    // keep "out" color
} else if (isOut) {
    // keep "out" color
} else if (hasSwipedBack) {
    newColor = 'lime';
} else if (hasSwipedOff) {
    newColor = 'yellow';
} else if (hasClockedOn) {
    newColor = 'lime';
} else {
    // keep "out" color
}

content += '<td style=" background: '+newColor+';">' + Person.Name;

Это было бы полезно, если в какой-то момент вы решите, что хотите установить (или просто поэкспериментировать) background-color или, возможно, border вместо background.

Наконец, приведенное выше может быть представлено одним выражением:

// Don't repeat color values, in case we want to change them in future
// Define them just once instead
var IN_COLOR  = 'lime';
var OUT_COLOR = 'red';

// What we will do
var newColor = isOut || hasNotSwipedBackInOneHour ? OUT_COLOR
               : hasSwipedBack                    ? IN_COLOR
               : hasSwipedOff                     ? 'yellow'
               : hasClockedOn                     ? IN_COLOR
               :                                    OUT_COLOR;
ответил joeytwiddle 22 AM000000110000004831 2014, 11:19:48
0

Я бы предложил начать с помощью операторов switch.

Всякий раз, когда я вижу глубоко вложенные /или многие из них, я смотрю, поддерживает ли язык оператор case или switch и javascript.

switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
} 

http://www.w3schools.com/js/js_switch.asp

ответил Michael Durrant 21 PM00000030000001831 2014, 15:12:18
0

Вы также можете начать с результатов и вернуться к аргументам. Затем вы увидите, что есть только 3 результата, причем «красный» цвет можно легко считать стандартным, что дает нам только 2 (!) Результата и значение по умолчанию «во всех остальных случаях». Я использовал синтаксис C (это почти то же самое с Java и JavaScript, я верю), где вы могли бы сказать «blah! = False» как «blah» и «||» означает логический "или". Надеюсь, язык, который вы используете, также не такой сложный и позволяет такие выражения.

if (Person.ON || Person.Clock) { //swipped back from dinner or clocked
  content += '<td style=" background: lime;">' + Person.Name;
} else if (Person.OFF) { //swipped off for dinner
  content += '<td style=" background: yellow;">' + Person.Name;
} else { // all other cases - very wrong person
  content += '<td style=" background: red;">' + Person.Name;
}

Это только первая часть вашего кода, рассмотрите ее как пример подхода.

Я также рекомендую вам использовать css вместо прямой записи html-тегов из кода. Это то, что я называю «разделение проблем», и это поможет вам в будущем справляться с большими проектами, так как вы сможете переключить свой мозг от задачи к задаче и не требовали бы держать большую картину в своем мозгу каждый время, просто небольшая часть. Мозгам это нравится.

ответил Павел 23 AM00000080000002931 2014, 08:18:29

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132