3 Как объявлять переменные и функции JS в Тильде, чтобы не было проблем

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

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

Поэтому в своей практике стараюсь называть функции и переменные максимально уникально

Названия переменных

Мы знаем что в JS можно объявит переменные следующими способоами

let a
var b
const c

где let можно перезаписывать, var тоже самое, но переменную можно объявлять несколько раз, что не очень хорошо, а const переменная имеет только одно значение и переписать её нельзя

В Тильде я стараюсь задавать глобальные переменные под название проекта+функционала, например

//глобальная переменная
let weblifeAllProducts = [];

//ждем загрузки DOM 
document.addEventListener("DOMContentLoaded",(event)=>{
   //задаем локальные переменные
   let weblifeUrlForGetProducts,weblifeGetXhrProducts,weblifeCategoryProducts;
   ...............
});

Названия функций

С функциями похожая история, если создать JS с кодом

<script>
document.addEventListener("DOMContentLoaded", (event)=>{
  console.log(window);
});
</script>

И разместить его на странице Тильды, то увидите вот такую историю

Это все функции, переменные, объекты Тильды которые подгрузились при загрузке страницы. Отсюда напрашивается вывод что присваивать названия своим функциям нужно прям очень осторожно. Еще не забывайте про сторонние коды, их разработчики могут назвать функцию так же как ваша. Поэтому будьте аккуратны.

Пример названия моих функций

//ждем загрузки DOM 
document.addEventListener("DOMContentLoaded",(event)=>{

 //функция получения всех товаров из каталога
 function  weblifeGetAllProducts(){
   //задаем локальные переменные
   let weblifeUrlForGetProducts,weblifeGetXhrProducts,weblifeCategoryProducts;
   
   weblifeCategoryProducts = '45215689972';
   weblifeUrlForGetProducts = 'https://store.tildaapi.com/api/getproductslist/?size=500&storepartuid=';
   //Cоздаем запрос
   weblifeGetXhrProducts = new XMLHttpRequest();
   weblifeGetXhrProducts.open('GET', weblifeUrlForGetProducts + weblifeCategoryProducts)
   //Отсылаем запрос
   weblifeGetXhrProducts.send();
    
   //Обработка ответа
   weblifeGetXhrProducts.onload = function() {                  
    if (weblifeGetXhrProducts.status != 200) { 
      // анализируем HTTP-статус ответа, если статус не 200, то произошла ошибка                  
    } else { 
      // если всё прошло гладко, выводим результат    
    };
   };
 };
});

Вывод

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

Как со мной связаться

Если вы не нашли для себя ответ в моих статьях или у вас есть задача, присылайте ваше ТЗ задание под ваш проект.
Пишите https://t.me/vbalakin буду рад помочь с доработкой.