Как включить файл javascript в другой файл javascript?

Question

Я пробовал несколько способов, но ничего не работает, я хочу поместить содержимое одного javascript файла в другой, код, который я пробовал:

for (k = 0; k < js_array2; k++) {
    p[k]=Math.random();
    if(p[k]<0.5){
        $.getScript('/path/to/imported/script.js')

    } else {
//Some  code 
}

Код в скрипте I хочу включить:

var c = document.getElementById("canvas[" + k + "]");
        document.getElementById("shape[" + k + "]").innerHTML = "Square";
        var ctx = c.getContext("2d");
        var width = c.width;
        var height = c.height;
        //ctx.strokeRect(0, 0, 120, 120);
        var n = hour2[k];
        var z = 0;
        var m = minute2[k];
        for (i = 1; i <= n; i++) {
            for (j = 1; j <= n; j++) {

                var x = 0 + (i - 1) * width / n;
                var y = 0 + (j - 1) * height / n;
                ctx.beginPath();
                ctx.rect(x, y, width / n, height / n);
                ctx.fillStyle = "cyan"
                if (z < m) {
                    ctx.fillRect(x, y, width / n, height / n);
                    z = z + 1;
                }
                ctx.stroke();

            }
        }

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

Answer 1

В современном JavaScript это будет выглядеть примерно так:

экспортировать что-то из файла

export c = //whatever

импортировать динамически из другого файла

if(some_condition){
  {c} = await import('/path/to/imported/script.js')
  // do whatever with c
}

Подробнее об экспорте в MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Подробнее об импорте в MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

Answer 2

Что вы можете сделать, так это создать функцию из второго файла, затем проверить, существует ли K и соответствующий холст существует на странице, и запустить его для других страниц.

Итак например, это будет скрипт. js:

function createSquare(k){

var c = document.getElementById("canvas[" + k + "]");
        document.getElementById("shape[" + k + "]").innerHTML = "Square";
        var ctx = c.getContext("2d");
        var width = c.width;
        var height = c.height;
        //ctx.strokeRect(0, 0, 120, 120);
        var n = hour2[k];
        var z = 0;
        var m = minute2[k];
        for (i = 1; i <= n; i++) {
            for (j = 1; j <= n; j++) {

                var x = 0 + (i - 1) * width / n;
                var y = 0 + (j - 1) * height / n;
                ctx.beginPath();
                ctx.rect(x, y, width / n, height / n);
                ctx.fillStyle = "cyan"
                if (z < m) {
                    ctx.fillRect(x, y, width / n, height / n);
                    z = z + 1;
                }
                ctx.stroke();

            }
        }
}

if(typeof k != "undefined" && document.getElementById("canvas[" + k + "]") != null){
 createSquare(k);
}

Затем, чтобы включить его:

$.getScript('/path/to/imported/script.js',function(){
     createSquare(k);
});

Answer 3

Вы можете попробовать создать два файла: main.js содержащий ваш основной l oop и aux.js, скажем, содержащий код, который вы хотите включить. Поскольку вы хотите, чтобы переменная k была доступна в скрипте в aux.js, вы можете создать функцию с k в качестве аргумента и включить два тега скрипта в свой. html файл:

<script scr="aux.js"></script>
<script src="main.js"></script>

где приведенный ниже код будет в вашем main.js файле:

for (k = 0; k < js_array2; k++) {
    p[k]=Math.random();
    if(p[k]<0.5){
        doSomething(k);
    } else {
//Some  code 
}

А в файле aux.js у вас может быть что-то вроде этого:

function doSomething(k){
  var c = document.getElementById("canvas[" + k + "]");
  document.getElementById("shape[" + k + "]").innerHTML = "Square";
  var ctx = c.getContext("2d");
  var width = c.width;
  var height = c.height;
  //ctx.strokeRect(0, 0, 120, 120);
  var n = hour2[k];
  var z = 0;
  var m = minute2[k];
  for (i = 1; i <= n; i++) {
      for (j = 1; j <= n; j++) {
          var x = 0 + (i - 1) * width / n;
          var y = 0 + (j - 1) * height / n;
          ctx.beginPath();
          ctx.rect(x, y, width / n, height / n);
          ctx.fillStyle = "cyan"
          if (z < m) {
              ctx.fillRect(x, y, width / n, height / n);
              z = z + 1;
          }
          ctx.stroke();
      }
  }
}