Рубрики
Без рубрики

В поисках ресурсов JavaScript/jQuery для написания чистого, краткого кода (приведены примеры кода)

Стремясь улучшить писать чистоту, краткий JavaScript/jQuery. Tagged с помощью, JavaScript, jQuery.

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

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

Недавно я работал над проектом, который включал написание некоторых пользовательских функций для пошаговой формы (первые два шага, включенные в этот пост). Это будет развиваться в шаги 3 и 4, но сейчас они находятся на заднем плане.

  1. Выберите уровень членства в зависимости от суммы, которую вы готовы предоставить в течение года. Это предоставит детали членства на основе выбранного вами уровня, прежде чем продолжить шаг 2.
    • Значения членства изменятся на 50%, если вы недавний выпускник.
    • Вы не можете быть нынешним студентом и недавним выпускником, поэтому текущая опция студента будет отключена, если недавний выпускник будет проверен.
  2. Дайте несколько небольших деталей, таких как имя и фамилия, а также ваше письмо. Форма представит то, что пользователь также выбрал на шаге 1, а затем перенаправляет пользователя на другой сайт, где он может следовать шагам 3 и 4.
  3. Создайте свою учетную запись членства.
  4. Зарегистрируйте свою учетную запись, предоставив дополнительную информацию.

Как я настроил это четыре основных функция С местом для небольших задач:

  • changeAmount ();
    • Основная функция верхнего уровня, которая изменила бы значения членства в зависимости от того, была ли проверена 50% скидка вместе с различными базовыми условными функциями.
  • mediceiv ();
    • Если уровень членства будет проверен, то будут отображаться соответствующие преимущества, и все остальные будут скрыты.
  • showlevel ();
    • Если выбран уровень членства, то значения, основанные на том, составляют ли они 50% скидки, будут заполнены в рамках шага 2.
  • recewsteps ();
    • Показать шаги индивидуально (1-4). Это в основном скрывает все остальные взгляды на основе шага, который вы сейчас находитесь.

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

Если недавний выпускник UNC (50% любого уровня) проверяется, то все членские годовые и ежемесячные значения изменятся на 50%.

if($('input[name=halfoff]').is(':checked')) {
    $("#recentUNCGradLevel2 label").removeClass('bg-white').addClass('bg-secondary  text-white');

    var radioTarHeelAnnualValue = (100 / 2);
    var radioTarHeelMonthlyValue = (8.34 / 2);
    $("#tarHeelLevel3").html("Tar Heel" + "\n" + "$" + radioTarHeelAnnualValue + " Annually" + "\n" + "$" + radioTarHeelMonthlyValue + "/month");
    $(".display-annual-amount.tarHeelAnnualAmount").html('$' + radioTarHeelAnnualValue);

    $("#currentUNCStudentLevel2").html("");

    var radioRamAnnualValue = (200 / 2);
    var numRamMonthlyValue = Number(16.67 / 2);
    var roundedRamMonthlyString = numRamMonthlyValue.toFixed(2);
    var roundedRamMonthlyValue = Number(roundedRamMonthlyString);
    $("#ramLevel3").html("Ram" + "\n" + "$" + radioRamAnnualValue + " Annually" + "\n" + "$" + roundedRamMonthlyValue + "/month");
    $(".display-annual-amount.ramAnnualAmount").html('$' + radioRamAnnualValue);

    ...

Если выбран уровень членства, то значения, основанные на том, составляют ли они 50% скидки, будут заполнены в рамках шага 2.

showLevel: function() {
    $(document).ready(function(){
        $("input[type=radio]").change(function(){
            if($("input[type=radio][name=what][value='Tar Heel']").is(':checked')) {
                $(".display-level.tarHeel").addClass('d-inline-block');
            } else {
                $(".display-level.tarHeel").removeClass('d-inline-block').addClass('d-none');
            }

            if($("input[type=radio][name=what][value='Current UNC Student']").is(':checked')) {
                $(".display-level.currentUNCStudent").removeClass('d-none').addClass('d-inline-block');
            } else {
                $(".display-level.currentUNCStudent").removeClass('d-inline-block').addClass('d-none');
            }

            ...

Основываясь на том, какой уровень членства выбирается, когда нажимается недавний выпускник UNC (50% любого уровня), это убедится, что уровень членства и годовая сумма отображаются на шаге 2.

$(document).ready(function(){
    $("input[type=radio]").change(function(){
        if($("input[type=radio][name=what][value='Tar Heel']").is(':checked')) {
            $(".display-level.tarHeel").addClass('d-inline-block');
        } else {
            $(".display-level.tarHeel").removeClass('d-inline-block').addClass('d-none');
        }

        if($("input[type=radio][name=what][value='Current UNC Student']").is(':checked')) {
            $(".display-level.currentUNCStudent").removeClass('d-none').addClass('d-inline-block');
        } else {
            $(".display-level.currentUNCStudent").removeClass('d-inline-block').addClass('d-none');
        }

        ...

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

Спасибо и очень ценят!

Оригинал: “https://dev.to/mjericsson/looking-for-javascriptjquery-resources-to-write-cleaner-concise-code-code-examples-provided-kna”

Читайте ещё по теме: