Блог

Мне было интересно, как правильно экспортировать javascript и функции, чтобы они были доступны другим модулям, а также в глобальной области. Например, у меня есть этот файл .js с некоторыми служебными функциями.

 function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)   min); //The maximum is exclusive and the minimum is inclusive
}

function random_choice(arr){
  let index = getRandomInt(0,arr.length);
  return arr[index];
}

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime()   (exdays*24*60*60*1000));
  var expires = "expires="  d.toUTCString();
  document.cookie = cname   "="   cvalue   ";"   expires   ";path=/";
}

window.getRandomInt = getRandomInt;
window.random_choice = random_choice;
export {getRandomInt,random_choice,setCookie};
  

Я нашел ответ на stackoverflow, в котором говорилось, что для того, чтобы переменные и функции из модулей были доступны из глобальной области (окна), вы можете сделать window.VARIABLE = VARIABLE;
Это работает, но действительно ли так вы должны это делать? Как правильно поступить, если у вас есть некоторые переменные или функции, которые вы хотите сделать доступными как из других модулей, так и из области окна?

Это работает, но действительно ли так вы должны это делать?

Если вы используете модули, назначение window довольно странно — модули делают зависимости между частями вашего скрипта явными, что делает вещи НАМНОГО более управляемыми, когда скрипты становятся большими. В вашем случае подумайте, есть ли какой-либо способ провести рефакторинг кода, чтобы избежать глобального загрязнения — вместо этого у вас есть все, что нужно getRandomInt , чтобы явно импортировать его из этого модуля.

Тем не менее, присвоение окну не является чем-то совершенно неслыханным. Библиотеки часто назначают окну большой объект пространства имен. Например, я считаю, что jQuery делает что-то вроде:

 const jQuery = /* lots of code */;
export default jQuery;
window.$ = jQuery;
  

Но обычно такие вещи выполняются не более одного раза.

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

 window.shivanHelpers = {
  getRandomInt,
  random_choice,
};
  

Но ИМО, вы должны сначала подумать, абсолютно ли это необходимо. Обычно это не так.

если вы используете этот js-файл в браузере, window это место для хранения глобальной переменной; даже если вы используете var x = 1; not в какой-либо области, он автоматически привяжет его к window as window.x = 1 . если вы используете этот js-файл в nodejs в бэкэнде, вы можете использовать global или использовать process.env для хранения глобальной переменной, или, если это модуль, вы также можете использовать module.exports .

если вы хотите скрыть sth, вы можете попробовать эту форму:

 // set global = window / global, related to your runtime env
(function () {
   var hidden_var = 1;
   var export_var = 2;
   global.export_var = export_var;
})();
// then outside the function,
// you can use global.export_var to get the export_var
// but hidden_var is not available outside the function.

// if you do not want to use it any more
delete global.export_var;
  

таким образом, правильный способ зависит от вашего решения; до тех пор, пока данные доступны и не приводят к утечке памяти (устанавливается в любом месте и очищается, когда пришло время)