Вопрос или проблема
Как я могу обновить глобальную переменную 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 и недоработок в логике обновления этой переменной. Давайте разберемся с этими вопросами.
Шаги для решения проблемы
-
Объявление переменных
Убедитесь, что переменные объявлены и используются корректно. В вашем коде переменная
url
объявлена без использованияlet
,const
илиvar
, что может привести к непредвиденным последствиям. Всегда используйтеlet
илиconst
для создания более безопасного и предсказуемого кода. Например:const baseURL = window.location.protocol + '//' + window.location.host + "https://wordpress.stackexchange.com/" + window.location.pathname; let url = baseURL;
-
Определение глобального пространства
Для управления глобальными переменными на странице разумнее использовать объект
window
. Это позволяет избежать конфликта имен между различными скриптами на странице:window.YourUniquePluginGlobal = { url: baseURL };
-
Обновление переменной
Когда вы обновляете
url
, убедитесь, что это изменение понятно и недвусмысленно. Измените функциюupdateURL
, чтобы она четко назначила новое значение переменнойurl
:function updateURL() { window.YourUniquePluginGlobal.url = baseURL + '?nazwa=pusty'; console.log(window.YourUniquePluginGlobal.url); }
-
Логика обработки кликов
Убедитесь, что логика обработки событий кликов работает правильно и ваши изменения переменной
url
учитываются:$('[data-category-menu] li a.current').on('click', function() { $(this).removeClass('current'); updateURL(); // Возможно, потребуется добавить дополнительные действия, такие как перезагрузка контента });
-
Тестирование и отладка
Проверяйте результаты на каждом этапе, используя
console.log()
для диагностики того, что конкретно происходит с переменнойurl
в различных точках вашего кода. -
Структура и читаемость кода
Переорганизуйте код так, чтобы он стал более модульным и читабельным. Разделите функции на независимые блоки, которые легко тестировать и поддерживать.
Рекомендации по улучшению кода
-
Используйте ES6: Переход на
let
иconst
поможет избежать проблем с замыканиями и глобальным областью видимости. -
Создайте уникальные названия переменных: Ваша переменная должна быть уникальной, чтобы избежать конфликта с другими скриптами. Подумайте о создании неймспейса или специального объекта для хранения переменных вашего плагина.
-
Используйте комментарии и документацию: Это помогает другим (и вам в будущем) понять вашу логику.
-
Избегайте дублирования кода: Выделите повторяющиеся куски кода в отдельные функции.
Следуя вышеописанным рекомендациям, вы должны заметить улучшение в управлении и обновлении вашего кода. Надеюсь, это поможет вам в достижении целей вашего проекта. Удачи!