Блог

Я создал некоторый код для проверки URL-адреса, если в нем есть строка запроса, а затем, если он использовал JavaScript, добавьте элементы в поля ввода, теперь так, как я это сделал, работает. Однако, поскольку он более простой, мне все время приходится добавлять дополнительные тесты в future, что просто сильно раздувает мой код. Я попытался преобразовать в более объектно-ориентированный метод, чтобы моя функция была такой же, но я могу просто добавить новую переменную в массив, чтобы мне не приходилось дублировать функцию, но она не работает, и я не совсем уверен, как получилось (я все еще новичок в объектно-ориентированном)

Я попытался преобразовать его в объектно-ориентированный, подобный такому (часть кода, с которым я получил помощь) Это моя попытка, которая в конечном итоге не сработала * обратите внимание, что код, о котором я говорю, находится в function init() * Примечание функция init() вызывается выше для автоматического запуска при загрузке страницы для проверки состояния наличия строки запроса или нет

 function getUrlVars(urlVariable) {
    var vars = {};
    window.location.href.replace(/[?amp;] ([^=amp;] )=([^amp;]*)/gi, function (m, key, value) {
            if (key === urlVariable) vars[key] = value;
        }
    );

    return vars;
}

function init() {
    var screensize = screen.width;
    var itemQuery = {
        moreBikes:{
            urlVar: getUrlVars("currentbike"),
            selector: '#currentbikes',
            newElement: '<div class=""><input type="text" name="currentbike[]" class="currentbikesadd" value="${morebikes[i]}" ><button class="delete">Delete</button></div>',
            oldElement: '<input type="text" name="currentbike[]" class="currentbike">'
        }     
    }

    if (urlVar) {
        var item = itemQuery[item];
        let urlVaribale = item.urlVar.split('_');
        for (let i = 0; i < item.urlVaribale.length; i  ){
            $(item.selector).append(decodeURI(item.newElement))
        }
    } else if (!urlVar) {
         $(item.selector).append(item.oldElement);
    }

}

  

Я пытался сделать что-то подобное, однако это не сработало. (Я думаю, это может быть связано с отсутствием жизнеспособного in init() , но не слишком уверен. Также в будущем, когда я добавлю другие свои поля, поскольку некоторые из них имеют другие проверки (см. Код ниже для моего старого кода, и то, что я имею в виду, имеет некоторые другие поля). Итак, как бы мне объединить его в один Ниже приведена более старая (рабочая) не объектно-ориентированная версия кода

это оригинальная версия моего кода, которая работает

 function getUrlVars(urlVariable) {
    var vars = {};
    window.location.href.replace(/[?amp;] ([^=amp;] )=([^amp;]*)/gi, function (m, key, value) {
            if (key === urlVariable) vars[key] = value;
        }
    );
    return vars;
}

function init() {
    var screensize = screen.width;
    var othersocial_p = getUrlVars("kothersocial");
    var othersocialqty_p = getUrlVars("kothersocialqty");
    var morebikes_p = getUrlVars("currentbike");

    //more bikes
    if (morebikes_p['currentbike']) {
        //create the array
        let morebikes = morebikes_p['currentbike'].split('_');
        //loops
        for (let i = 0; i < morebikes.length; i  ) {
            $(wrapper_bike).append(decodeURI(`<div class=""><input type="text" name="currentbike[]" class="currentbikesadd" value="${morebikes[i]}" ><button class="delete">Delete</button></div>`))
        }
    } else if (!morebikes_p['currentbike']) {
        $(wrapper_bike).append(`<input type="text" name="currentbike[]" class="currentbike">`);
    }

    //other social media
    if (othersocial_p['kothersocial'] amp;amp; othersocialqty_p['kothersocialqty']) {
        //create the array
        let othersocial = othersocial_p['kothersocial'].split('_');
        let othersocialqty = othersocialqty_p['kothersocialqty'].split('_');
        if (screensize < 800) {
            //loops the length of the username
            for (let i = 0; i < othersocial.length; i  ) {
                $(wrapper_othersocial).append(decodeURI(`<div class="more800 A"><label for="othersocial" id="othersocialmedia">Other - Please specify <br><input name="othersocial[]" class="othersocial addedothersocial" value="${othersocial[i]}" style="margin-bottom:5px;"></label><label for="otherqtys" id="otherqty"> Followers Count: <br>
<input name="otherqty[]" class="otherqtys addothersocquantity" value="${othersocialqty[i]} " style="margin-bottom:5px;" ></label><button style="margin-top:10px;" class="delete">Delete</button><div class="clearfix"></div></div>`));
            }
        } else {
            $(othersocialid).append(`<div class="more800 b"><label for="othersocial" id="othersocialmedia">Other - Please specify <br></label><label for="otherqtys" id="otherqty"> Followers Count: <br></label> <div class="clearfix"></div></div>`);
            //loops the length of the username
            for (let i = 0; i < othersocial.length; i  ) {
                $(wrapper_othersocial).append(decodeURI(`<input name="othersocial[]" class="othersocial addedothersocial" value="${othersocial[i]}" style="margin-bottom:5px;"><input name="otherqty[]" class="otherqtys addothersocquantity" value="${othersocialqty[i]} " style="margin-bottom:5px;" ><button style="margin-top:10px;" class="delete">Delete</button></div>`));
            }
        }
    } else if (!othersocial_p['kothersocial']) {
        counter_social  ;
        if (screensize < 800) {
            $(othersocialid).append(`<div style="display:inline-block;width: 100%;;" class="less800">
<label for="othersocial" id="othersocialmedia">Other - Please specify <br><input type="text" name="othersocial[]" id="othersocial" class="othersocial"></label>
<label for="otherqtys" id="otherqty"> Followers Count: <br><input type="text" name="otherqty[]" id="otherqtys" style="margin: 10px 0"></label> <div class="clearfix"></div></div>`)
        } else {
            $(othersocialid).append(`<div class="more800"><label for="othersocial" id="othersocialmedia">Other - Please specify <br><input type="text" name="othersocial[]" id="othersocial" class="othersocial"></label><label for="otherqtys" id="otherqty"> Followers Count: <br><input type="text" name="otherqty[]" id="otherqtys" style="margin: 10px 0"></label> <div class="clearfix"></div></div>`)
        }
    }
}    
  

В основном код проверяет, содержит ли строка запроса массив, относящийся к переменной, которая заканчивается, variable_p[''].split('_') и разделяет их, поскольку я сохранил их таким образом как массив в строке запроса.
Затем здесь он разделяется на элементы, содержащие 1 элемент:
как и другие велосипеды, он переходит прямо в for loops вывод значения, куда он отправится, чтобы проверить, нет ли значения в строке запроса, а затем просто введите пустое поле ввода
Однако для разделений, содержащих 2 элемента:
сначала проверьте размер экрана, так как в зависимости от размера экрана он будет немного отличаться. Таким образом, в зависимости от размера экрана он будет отображать разные макеты одной и той же информации, только в другом порядке.
В противном случае, как и раньше, он будет показывать пустые входные данные, но также в зависимости от размера экрана будет иметь немного другой макет.

Есть ли способ превратить это в одну объектно-ориентированную функцию или я должен разделить функцию на те, у которых есть 2 переменные и разделение по размеру экрана, или есть способ протестировать ее и просто сделать это как одну простую функцию? Любая помощь будет оценена