Как создать функцию/переменную с проверкой, что они еще не созданы?

Question

[Анатолий]

Существует js-файл, функции из которого, используют другие js-файлы.

Файл с функциями может быть запущен более 1 раза, как сделать так, чтобы функции и переменные не создавались дважды?

Если делаю проверку на существование функции/переменной, и все функции "пихаю" в if,
то функции не видны за его приделами. Как быть?

Comments

[Сергей Соколов]

Минимальный пример кода не помешал бы.
Не понятно, в чем проблема "двойного" создания.
Не понятно, откуда бардак многократного вызова файла.
Не пора ли использовать модули?

[Анатолий]

Сергей Соколов,
пред история: на сайте работает 3 калькулятора.
Калькуляторы - это один js файл, с общими функциями и переменными для всех калькуляторов.

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

Схема запуска сейчас:
В тексте статьи вставляется js-код с запуском внешнего файла, например: calc_init.js?3
Файл calc_init.js "запускает" внешний скрипт калькулятора №3: calc_3.js

Сейчас все работает замечательно, но если предположить, что на странице будет запущено 2 калькулятора, то есть будет вызвано, к примеру:
calc_init.js?1
calc_init.js?3
то в консоли получаю ошибку, что переменная уже существует.

Пример:

==== часть calc_init.js ====

let scripts = document.getElementsByTagName( 'script' );
let thisScriptTag = scripts[ scripts.length - 1 ];

let calc_init = document.createElement("script");
let this_path = thisScriptTag.getAttribute('src').replace( /[^\/]+$/g, '' );
let calc_id = "calc_" + thisScriptTag.getAttribute('src').split('?')[1]; 
calc_init.src = this_path + calc_id + ".js";
calc_init.setAttribute('defer', '');
thisScriptTag.after(calc_init);

let elem_div = document.createElement("div");
elem_div.setAttribute('id', calc_id);
thisScriptTag.after(elem_div);





const date = new Date(), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate();

function addMonth(date, months, split_symbol){
  if (split_symbol == undefined) split_symbol = '.';
  date = date.split(split_symbol);
  date = new Date(date[2],date[1]-1,date[0]);
  date.setFullYear(date.getFullYear(), date.getMonth() + months, date.getDate()); 
  return ('0'+date.getDate()).slice(-2) +'.'+ ('0'+(date.getMonth()+1)).slice(-2) +'.'+ date.getFullYear();
}

==== часть calc_3.js ====

document.getElementById(calc_id).innerHTML = "<input type='text' id='"+ calc_id +"' value='"+ addMonth('01.'+month+'.'+year, -2) +"'>";

Answer 1

[Анатолий]

Раз вариантов на js нет.

Вопрос решил через php.

Answer 2

[zkrvndm]

Чтобы функции был видны глобально, достаточно объявить их в глобальной области видимости через window!
window.eval(function_code);

P. S. Проверить существование функции можно через typeof.

Comments

[Анатолий]

ИМХО eval путь к evil.

[zkrvndm]

Анатолий, какая разница? Главное здесь сам принцип, если хотите, можете так функции объявлять:
window.new_func = function() { ... }
Внутри if работать будет, что вам и надо.

Answer 3

[Сергей Соколов]

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

Ну вот практически уже используете модули, но ещё не совсем. Раз там какие-то переменные хранятся, значит для каждого калькулятора, видимо, нужна своя _копия_ этого общего куска.

Как вариант, оберните всё, что там общего, в класс или функцию или объект и создавайте для каждого калькулятора новую копию.

calc_init.js?1 не удачная идея. Именно потому, что возникают описанные в вопросе проблемы.
Лучше один раз его просто загрузить <script src="calc_init.js"></script>. Пусть там просто определяется единственная

функция

function calc_init(n, id) {
  let el_script = document.createElement("script");
  el_script.src = `/scripts/script_${n}.js`;
  el_script.setAttribute('defer', '');
  document.body.appendChild(el_script);

  let el_div = document.createElement("div");
  el_div.setAttribute('id', id);
  document.body.appendChild(el_div);
}

и потом вызывать его функцию:

calc_init(1, 'id_calc_1'); // номер калькулятора и id HTML-элемента, куда его впихнуть
calc_init(3, 'id_calc_3');

Comments

[Анатолий]

Лучше один раз его просто загрузить <script src="calc_init.js"></script>.

А как это сделать, если:
1) На 100 статей приходится только 1 статья с калькулятором (загружать всегда не варик!)
2) Человек, который публикует статью, должен об этом знать и не ошибиться

Решение нужно из коробки, чтобы нажал на кнопку и получил что-то.

[Сергей Соколов]

Анатолий, для удобства редакторов приходят на ум всякие спец-теги как в WordPress. Типа [calc1] если есть в материале, то CMS должна впихнуть правильный JS.

[Анатолий]

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

[Сергей Соколов]

Анатолий, ну вот я подсказал вариант: cal_init пусть загружает общую функцию, которую ещё надо вызвать с параметрами. Если такой загрузят дважды - не беда: она закэширован, и функция одна и та же.

[Анатолий]

Сергей Соколов, честно говоря я запутался.
Можно по порядку?
1) Т.е. мне нужно вызвать вначале загрузку calc_init? - это понятно
2) Но как мне вызвать calc_init(3, 'id_calc_3');? Если я дополнительно добавлю в документ: <script>calc_init(3, 'id_calc_3');</script> то будет ошибка, так как не успеет загрузился calc_init
3) Как мне создать

класс или функцию или объект и создавайте для каждого калькулятора новую копию

?
Последний пункт желательно более детально разжевать, так как я такое никогда не делал.