如何将 javascript 文件包含到另一个 javascript 文件中？

Question

I have tried several ways but nothing is working, I want to put the contents of one javascript file into the other, the code I tried is:

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 
}

The code in the script I want to include is:

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();

            }
        }

I have tried several other ways too but this was the only one without errors but unfortunately no output.

Answer 1

In modern JavaScript it would look something like this:

export something from a file

export c = //whatever

import it dynamically from another file

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

Read more on exports on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Read more about imports on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

Answer 2

What you can do is create a function out of the second file, then check to see if K exists and the corresponding canvas exists on the page and run it for the other pages.

So for example this would be script.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);
}

Then to include it:

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