Глобальная переменная JS не обновляется.

Вопрос или проблема

Как я могу обновить глобальную переменную URL? Я пытаюсь сделать это последние 3 дня, но пока безуспешно

var output="";
var pageNum = '';
url="";
function post_ajax_get(pagination) {
    $("#loading-animation").show();
    var query = 'nazwa=";
    var time = "gr=";
    var output = "';
    $("[data-category-menu] a.current").each(function(){
        if($(this).data('time')) {
            if(time != 'gr=") {
                time+= ",'; 
            };
            time+= $(this).data('time');
        }
        if($(this).data('slug')) {
            if(query != 'nazwa=") {
                query+= ",'; 
            };
            query+= $(this).data('slug');
        }
        if (query != 'nazwa=" && time == "gr="){
            output = query;
        }
        else if (query == "nazwa=" && time != "gr="){
            output = time;
        }
        else if (query != "nazwa=" && time != "gr="){
            output = time + "&' + query;
        }
    });
    if(pagination) {
        $("[data-pagination] a.current").each(function(){
            if(output != '') output+= '&';
            output+= $(this).data('slug');
        });
    }
    url = window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname + '?' + output;
    //window.location.href = url;
    if ($('body.category').length > 0 && output == '') {
        var adres = window.location.pathname;
        var cat = adres.split("https://wordpress.stackexchange.com/")[3];
        url = window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname + '?' + 'nazwa=" + cat;
        $("[data-category-menu] li a').each(function() {
            if($(this).attr('id') == cat) {
                $(this).addClass('current');
            }

            $('[data-category-menu] li a.current').click(function() {
                $(this).removeClass('current');
            }) 
        })
    }

    $('[data-category-menu] li a.current').click(function() {
        updateURL(); 
    })

    function updateURL() {
        console.log('fire');
        url = window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname + '?' + 'nazwa=pusty';
    }
    console.log(url);
    var pageNum = url.substr(url.indexOf("md_page=") + 8);
    //var pagNum = pageNum.toString();
    $('#md-products').load(url + ' #md-products > *', function() {
        $("#loading-animation").hide();
        $('#md-products [data-pagination] a').on('click', function() {
            $(this).addClass('current');
            post_ajax_get(true);
        })
    });
}

console.log(url);

Если вы хотите намеренно создать глобальную переменную, вам нужно сделать следующее.

window['your_variable_name']= 'Some variable value';

Затем вы сможете получить к ней доступ как window.your_variable_name – такой способ создания и доступа к глобальной переменной гарантирует, что вы будете работать с той же переменной независимо от того, какие инструменты сборки, такие как webpack, вы используете или откуда вы к ней обращаетесь. Например, вам может понадобиться обратиться к ней из другой функции, у которой также есть переменная с таким же именем, поэтому без обращения к вашей переменной через нотацию window.variable_name вы получите доступ к переменной родительской области видимости, а не к глобальной.

Также, если вам нужна глобальная переменная, ее имя должно быть действительно уникальным, и это хорошая практика называть ее, как ваше имя плагина или что-то такое, что не будет перезаписано каким-то другим кодом, избегайте общих имен, таких как url.

Таким образом, вы можете сделать так: window['YourUniquePluginGlobal'] = {url: 'your_url'};

Затем вы сможете получить доступ к вашим переменным как window.YourUniquePluginGlobal.url

Не полагайтесь на опускание ключевого слова var.

И даже больше – НИКОГДА не опускайте var (или let, const в ES6), когда вы объявляете переменную, так как это сделает ваш код ненадежным и трудно поддерживаемым.

Всегда используйте var, let \ const при объявлении переменной в JS, и пусть хороший код будет с вами 🙂

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

//инициализируем пользовательский интерфейс
$('#md-products [data-pagination] a').on('click', function () {
    $(this).addClass('current');
    var pageToLoad = $(this).attr('data-page'); // установите на атрибут, который содержит страницу для загрузки.
    var url2Load = getUpdatedUrl(pageToLoad);
    post_ajax_get(url2Load);
});

$('[data-category-menu] li a').each(function () {
    var cat = getCurrentCategoryFromPathName();
    if ($(this).attr('id') === cat) {
        $(this).addClass('current');
    }
});

$('[data-category-menu] li a.current').on('click', function () {
    $(this).removeClass('current');
    updateURL();
});

/**
 * Функция, где вы выполняете что-то - например, загрузку элементов новой категории. см. выше.
 */
function updateURL() {
    console.log('fire');
    // url = window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname + '?' + 'nazwa=pusty';
    var updatedUrl = getUpdatedUrl(0); // я думаю, по умолчанию вы хотите отображать первую страницу при изменении категории.
    // делайте что-то с этой URL.
    console.log(updatedUrl);
    // так что вы действительно можете сделать для загрузки новых элементов.
    post_ajax_get(updatedUrl);
}

/**
 * Действительно упрощенный, просто загружает, что вы передаете.
 * @param URL url_to_load
 */
function post_ajax_get(url_to_load) {

    $("#loading-animation").show();

    $('#md-products').load(url_to_load, function () {
        $("#loading-animation").hide();
    });
}

/**
 * Он возвращает URL на основе текущей категории и состояния пользовательского интерфейса, а также получает номер страницы для загрузки, если она постраничная
 * 
 * @param pageNumber
 * @returns {string} URL, который вы можете загрузить или работать с которым.
 */
function getUpdatedUrl(pageNumber){
    var newUrl =  window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname;
    var query = 'nazwa=";
    var time = "gr=";
    var output = "';

    $("[data-category-menu] a.current").each(function () {
        if ($(this).data('time')) {
            if (time != 'gr=") {
                time += ",';
            };
            time += $(this).data('time');
        }
        if ($(this).data('slug')) {
            if (query != 'nazwa=") {
                query += ",';
            };
            query += $(this).data('slug');
        }
        if (query != 'nazwa=" && time == "gr=") {
            output = query;
        } else if (query == "nazwa=" && time != "gr=") {
            output = time;
        } else if (query != "nazwa=" && time != "gr=") {
            output = time + "&' + query;
        }
    });

    newUrl = newUrl + '?' + output;

    if ($('body.category').length > 0 && output === '') {
        var cat = getCurrentCategoryFromPathName();
        newUrl = window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname + '?' + 'nazwa=" + cat;
    }

    if(pageNumber){
        newUrl = newUrl + "&md_page=" + pageNumber;
    }

    return newUrl;
}

/**
 * Просто извлеченная логика получения категории из пути.
 * @returns string
 */
function getCurrentCategoryFromPathName(){
    return  window.location.pathname.split("https://wordpress.stackexchange.com/")[3];
}

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

Ответ или решение

Проблема с обновлением глобальной переменной в JavaScript

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

Фон проблемы

Исходный код указывает на попытки управления переменной url, которую предполагается изменить в зависимости от действий пользователя. Вероятно, вы сталкиваетесь с проблемами из-за особенностей JavaScript и недоработок в логике обновления этой переменной. Давайте разберемся с этими вопросами.

Шаги для решения проблемы

  1. Объявление переменных

    Убедитесь, что переменные объявлены и используются корректно. В вашем коде переменная url объявлена без использования let, const или var, что может привести к непредвиденным последствиям. Всегда используйте let или const для создания более безопасного и предсказуемого кода. Например:

    const baseURL = window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname;
    
    let url = baseURL;
  2. Определение глобального пространства

    Для управления глобальными переменными на странице разумнее использовать объект window. Это позволяет избежать конфликта имен между различными скриптами на странице:

    window.YourUniquePluginGlobal = { url: baseURL };
  3. Обновление переменной

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

    function updateURL() {
       window.YourUniquePluginGlobal.url = baseURL + '?nazwa=pusty';
       console.log(window.YourUniquePluginGlobal.url);
    }
  4. Логика обработки кликов

    Убедитесь, что логика обработки событий кликов работает правильно и ваши изменения переменной url учитываются:

    $('[data-category-menu] li a.current').on('click', function() {
       $(this).removeClass('current');
       updateURL();
       // Возможно, потребуется добавить дополнительные действия, такие как перезагрузка контента
    });
  5. Тестирование и отладка

    Проверяйте результаты на каждом этапе, используя console.log() для диагностики того, что конкретно происходит с переменной url в различных точках вашего кода.

  6. Структура и читаемость кода

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

Рекомендации по улучшению кода

  • Используйте ES6: Переход на let и const поможет избежать проблем с замыканиями и глобальным областью видимости.

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

  • Используйте комментарии и документацию: Это помогает другим (и вам в будущем) понять вашу логику.

  • Избегайте дублирования кода: Выделите повторяющиеся куски кода в отдельные функции.

Следуя вышеописанным рекомендациям, вы должны заметить улучшение в управлении и обновлении вашего кода. Надеюсь, это поможет вам в достижении целей вашего проекта. Удачи!

Оцените материал
Добавить комментарий

Капча загружается...