Javascript 更改其他函数内的变量值或告诉如何改进'；功能方法'；_Javascript_Variables_Scope_Refactoring

Javascript 更改其他函数内的变量值或告诉如何改进'；功能方法'；

javascript variables

Javascript 更改其他函数内的变量值或告诉如何改进'；功能方法'；,javascript,variables,scope,refactoring,Javascript,Variables,Scope,Refactoring,我在做一个项目工作，遇到了一些麻烦。第一次，我在一个文件中编写了与页面的所有关系，然后我决定将其模块化，但由此带来了一些问题。我有一个index.js文件，它调用我页面的所有其他功能，如下所示： import initializeMarksFunctions from "./marks.js"; import intializeCommentFunction from "./comments.js"; import initializeChangeMark

我在做一个项目工作，遇到了一些麻烦。第一次，我在一个文件中编写了与页面的所有关系，然后我决定将其模块化，但由此带来了一些问题。我有一个index.js文件，它调用我页面的所有其他功能，如下所示：

import initializeMarksFunctions from "./marks.js";
import intializeCommentFunction from "./comments.js";
import initializeChangeMarksTypesFunction from "./changeMarksTypes.js";
import initializeSendToServerFunctions from "./sendToServer.js";
import initializeDownloadFunctions from "./downloadEssay.js";

import draw from "../utils/draw.js";
import formatMark from "../utils/formatMark.js";


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

canvas.width = "730";
canvas.height = "891";

const imageSrc = document.getElementById("essay-image").src;



let typeOfDraw = "line";
let typeOfMark = {
  type: "normal",
  color: "black",
};
let actualDraw;

let specificTypeErrorFilter = { name: null };
let specificTypeError = { name: null };

let drawsInfos = [];
let removedMarksIds = [];
let initialCoordinates = {};
let finalCoordinates = {};

// ----------------------------------- //

window.onload = function () {
  const marks = JSON.parse(document.getElementById("mydata").textContent);

  const formatedMarks = formatMark(marks);

  drawsInfos.push(...formatedMarks);

  const image = new Image();

  image.onload = function () {
    ctx.drawImage(image, 0, 0);
    draw(drawsInfos, ctx);
  };

  image.src = imageSrc;

  // define configurações para padrão
  typeOfDraw = "line";
  typeOfMark = {
    type: "normal",
    color: "black",
  };

  ctx.globalAlpha = 1.0;
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
};

initializeMarksFunctions(
  canvas,
  ctx,
  drawsInfos,
  initialCoordinates,
  finalCoordinates,
  typeOfDraw,
  typeOfMark,
  removedMarksIds,
  specificTypeError,
  imageSrc
);

intializeCommentFunction(canvas, drawsInfos, actualDraw);

initializeChangeMarksTypesFunction(
  ctx,
  typeOfDraw,
  typeOfMark,
  specificTypeErrorFilter,
  specificTypeError
);

initializeSendToServerFunctions(drawsInfos, removedMarksIds);

initializeDownloadFunctions(canvas);

for (let btnMarkEl of buttonsMark) {
    btnMarkEl.addEventListener("click", function (e) {
      for (let el of buttonsMark) {
        el.classList.remove("btn-active");
      }
      let buttonsOKEl = e.currentTarget;
      buttonsOKEl.classList.add("btn-active");
      applyMarking(buttonsOKEl.id);
    });
  }

  function applyMarking(idButton) {
    switch (idButton) {
      case "btn-mark-line":
        document.getElementById("btn-mark-line").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        document.getElementById("nome").innerText = "Espessura da linha";
        tamLine.style.display = "block";
        ctx.globalAlpha = 1.0;

        typeOfDraw = "line";
        break;

      case "btn-rectangle":
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        typeOfDraw = "rectangle";
        ctx.globalAlpha = 0.3;
        break;

      case "btn-type":
        buttonsPush.style.display = "block";
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        tiposMarcacao.style.display = "block";
        break;
    }
  }

canvas.addEventListener("mouseup", function finishDraw(event) {
    if (
      initialCoordinates.x == event.offsetX &&
      initialCoordinates.y == event.offsetY
    ) {
      return;
    }

    switch (typeOfDraw) {
      case "line":
      case "markText":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
        break;
      case "rectangle":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };

        ctx.fillStyle = ctx.strokeStyle;

        ctx.fillRect(
          initialCoordinates.x,
          initialCoordinates.y,
          finalCoordinates.x - initialCoordinates.x,
          finalCoordinates.y - initialCoordinates.y
        );

        break;
    }

    drawsInfos.push({
      type: typeOfDraw,
      initialCoordinates,
      finalCoordinates,
      specificTypeError: { ...specificTypeError },
      lineWidth: ctx.lineWidth,
      color: typeOfMark.color,
      opacity: ctx.globalAlpha,
      typeMark: typeOfMark.type,
      comment: null,
    });
  });

import getCookie from "../utils/getCookie.js";

function intializeSendToServerFunctions(drawsInfos, removedMarksIds) {
  const saveMarksButton = document.getElementById("salvar-marcacoes");
  const essayId = document.getElementById("essay_id").value;

  saveMarksButton.addEventListener("click", async function () {
    document.getElementById("save").innerText =
      "As alterações foram salvas com sucesso!";
    const finalData = [[...drawsInfos], [...removedMarksIds]];

    console.log(drawsInfos);

    await fetch(
      `http://127.0.0.1:8000/plataforma/salvar-marcacoes/${essayId}/`,
      {
        credentials: "same-origin",
        mode: "same-origin",
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": getCookie("csrftoken"),
        },
        body: JSON.stringify(finalData),
      }
    );
  });
}

export default intializeSendToServerFunctions;

我只是定义了一些变量，调用了一些函数，把这些变量作为参数传递，但有一个问题。在'initializeChangeMarksTypesFunction'中，我有一个按钮的侦听器，用于更改de'typeOfMark'变量以更改画布中的绘图，该函数如下所示：

import initializeMarksFunctions from "./marks.js";
import intializeCommentFunction from "./comments.js";
import initializeChangeMarksTypesFunction from "./changeMarksTypes.js";
import initializeSendToServerFunctions from "./sendToServer.js";
import initializeDownloadFunctions from "./downloadEssay.js";

import draw from "../utils/draw.js";
import formatMark from "../utils/formatMark.js";


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

canvas.width = "730";
canvas.height = "891";

const imageSrc = document.getElementById("essay-image").src;



let typeOfDraw = "line";
let typeOfMark = {
  type: "normal",
  color: "black",
};
let actualDraw;

let specificTypeErrorFilter = { name: null };
let specificTypeError = { name: null };

let drawsInfos = [];
let removedMarksIds = [];
let initialCoordinates = {};
let finalCoordinates = {};

// ----------------------------------- //

window.onload = function () {
  const marks = JSON.parse(document.getElementById("mydata").textContent);

  const formatedMarks = formatMark(marks);

  drawsInfos.push(...formatedMarks);

  const image = new Image();

  image.onload = function () {
    ctx.drawImage(image, 0, 0);
    draw(drawsInfos, ctx);
  };

  image.src = imageSrc;

  // define configurações para padrão
  typeOfDraw = "line";
  typeOfMark = {
    type: "normal",
    color: "black",
  };

  ctx.globalAlpha = 1.0;
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
};

initializeMarksFunctions(
  canvas,
  ctx,
  drawsInfos,
  initialCoordinates,
  finalCoordinates,
  typeOfDraw,
  typeOfMark,
  removedMarksIds,
  specificTypeError,
  imageSrc
);

intializeCommentFunction(canvas, drawsInfos, actualDraw);

initializeChangeMarksTypesFunction(
  ctx,
  typeOfDraw,
  typeOfMark,
  specificTypeErrorFilter,
  specificTypeError
);

initializeSendToServerFunctions(drawsInfos, removedMarksIds);

initializeDownloadFunctions(canvas);

for (let btnMarkEl of buttonsMark) {
    btnMarkEl.addEventListener("click", function (e) {
      for (let el of buttonsMark) {
        el.classList.remove("btn-active");
      }
      let buttonsOKEl = e.currentTarget;
      buttonsOKEl.classList.add("btn-active");
      applyMarking(buttonsOKEl.id);
    });
  }

  function applyMarking(idButton) {
    switch (idButton) {
      case "btn-mark-line":
        document.getElementById("btn-mark-line").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        document.getElementById("nome").innerText = "Espessura da linha";
        tamLine.style.display = "block";
        ctx.globalAlpha = 1.0;

        typeOfDraw = "line";
        break;

      case "btn-rectangle":
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        typeOfDraw = "rectangle";
        ctx.globalAlpha = 0.3;
        break;

      case "btn-type":
        buttonsPush.style.display = "block";
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        tiposMarcacao.style.display = "block";
        break;
    }
  }

canvas.addEventListener("mouseup", function finishDraw(event) {
    if (
      initialCoordinates.x == event.offsetX &&
      initialCoordinates.y == event.offsetY
    ) {
      return;
    }

    switch (typeOfDraw) {
      case "line":
      case "markText":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
        break;
      case "rectangle":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };

        ctx.fillStyle = ctx.strokeStyle;

        ctx.fillRect(
          initialCoordinates.x,
          initialCoordinates.y,
          finalCoordinates.x - initialCoordinates.x,
          finalCoordinates.y - initialCoordinates.y
        );

        break;
    }

    drawsInfos.push({
      type: typeOfDraw,
      initialCoordinates,
      finalCoordinates,
      specificTypeError: { ...specificTypeError },
      lineWidth: ctx.lineWidth,
      color: typeOfMark.color,
      opacity: ctx.globalAlpha,
      typeMark: typeOfMark.type,
      comment: null,
    });
  });

import getCookie from "../utils/getCookie.js";

function intializeSendToServerFunctions(drawsInfos, removedMarksIds) {
  const saveMarksButton = document.getElementById("salvar-marcacoes");
  const essayId = document.getElementById("essay_id").value;

  saveMarksButton.addEventListener("click", async function () {
    document.getElementById("save").innerText =
      "As alterações foram salvas com sucesso!";
    const finalData = [[...drawsInfos], [...removedMarksIds]];

    console.log(drawsInfos);

    await fetch(
      `http://127.0.0.1:8000/plataforma/salvar-marcacoes/${essayId}/`,
      {
        credentials: "same-origin",
        mode: "same-origin",
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": getCookie("csrftoken"),
        },
        body: JSON.stringify(finalData),
      }
    );
  });
}

export default intializeSendToServerFunctions;

我作为参数传递的图形类型。在“initializeMarksFunctions”中，我有一些函数要添加到我的数组“drawInfos”中，如下所示：

import initializeMarksFunctions from "./marks.js";
import intializeCommentFunction from "./comments.js";
import initializeChangeMarksTypesFunction from "./changeMarksTypes.js";
import initializeSendToServerFunctions from "./sendToServer.js";
import initializeDownloadFunctions from "./downloadEssay.js";

import draw from "../utils/draw.js";
import formatMark from "../utils/formatMark.js";


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

canvas.width = "730";
canvas.height = "891";

const imageSrc = document.getElementById("essay-image").src;



let typeOfDraw = "line";
let typeOfMark = {
  type: "normal",
  color: "black",
};
let actualDraw;

let specificTypeErrorFilter = { name: null };
let specificTypeError = { name: null };

let drawsInfos = [];
let removedMarksIds = [];
let initialCoordinates = {};
let finalCoordinates = {};

// ----------------------------------- //

window.onload = function () {
  const marks = JSON.parse(document.getElementById("mydata").textContent);

  const formatedMarks = formatMark(marks);

  drawsInfos.push(...formatedMarks);

  const image = new Image();

  image.onload = function () {
    ctx.drawImage(image, 0, 0);
    draw(drawsInfos, ctx);
  };

  image.src = imageSrc;

  // define configurações para padrão
  typeOfDraw = "line";
  typeOfMark = {
    type: "normal",
    color: "black",
  };

  ctx.globalAlpha = 1.0;
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
};

initializeMarksFunctions(
  canvas,
  ctx,
  drawsInfos,
  initialCoordinates,
  finalCoordinates,
  typeOfDraw,
  typeOfMark,
  removedMarksIds,
  specificTypeError,
  imageSrc
);

intializeCommentFunction(canvas, drawsInfos, actualDraw);

initializeChangeMarksTypesFunction(
  ctx,
  typeOfDraw,
  typeOfMark,
  specificTypeErrorFilter,
  specificTypeError
);

initializeSendToServerFunctions(drawsInfos, removedMarksIds);

initializeDownloadFunctions(canvas);

for (let btnMarkEl of buttonsMark) {
    btnMarkEl.addEventListener("click", function (e) {
      for (let el of buttonsMark) {
        el.classList.remove("btn-active");
      }
      let buttonsOKEl = e.currentTarget;
      buttonsOKEl.classList.add("btn-active");
      applyMarking(buttonsOKEl.id);
    });
  }

  function applyMarking(idButton) {
    switch (idButton) {
      case "btn-mark-line":
        document.getElementById("btn-mark-line").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        document.getElementById("nome").innerText = "Espessura da linha";
        tamLine.style.display = "block";
        ctx.globalAlpha = 1.0;

        typeOfDraw = "line";
        break;

      case "btn-rectangle":
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        typeOfDraw = "rectangle";
        ctx.globalAlpha = 0.3;
        break;

      case "btn-type":
        buttonsPush.style.display = "block";
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        tiposMarcacao.style.display = "block";
        break;
    }
  }

canvas.addEventListener("mouseup", function finishDraw(event) {
    if (
      initialCoordinates.x == event.offsetX &&
      initialCoordinates.y == event.offsetY
    ) {
      return;
    }

    switch (typeOfDraw) {
      case "line":
      case "markText":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
        break;
      case "rectangle":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };

        ctx.fillStyle = ctx.strokeStyle;

        ctx.fillRect(
          initialCoordinates.x,
          initialCoordinates.y,
          finalCoordinates.x - initialCoordinates.x,
          finalCoordinates.y - initialCoordinates.y
        );

        break;
    }

    drawsInfos.push({
      type: typeOfDraw,
      initialCoordinates,
      finalCoordinates,
      specificTypeError: { ...specificTypeError },
      lineWidth: ctx.lineWidth,
      color: typeOfMark.color,
      opacity: ctx.globalAlpha,
      typeMark: typeOfMark.type,
      comment: null,
    });
  });

import getCookie from "../utils/getCookie.js";

function intializeSendToServerFunctions(drawsInfos, removedMarksIds) {
  const saveMarksButton = document.getElementById("salvar-marcacoes");
  const essayId = document.getElementById("essay_id").value;

  saveMarksButton.addEventListener("click", async function () {
    document.getElementById("save").innerText =
      "As alterações foram salvas com sucesso!";
    const finalData = [[...drawsInfos], [...removedMarksIds]];

    console.log(drawsInfos);

    await fetch(
      `http://127.0.0.1:8000/plataforma/salvar-marcacoes/${essayId}/`,
      {
        credentials: "same-origin",
        mode: "same-origin",
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": getCookie("csrftoken"),
        },
        body: JSON.stringify(finalData),
      }
    );
  });
}

export default intializeSendToServerFunctions;

这样我就可以完成标记并更改“typeOfDraw变量”。之后，当我的用户保存标记时，我使用'initializeSendToServerFunctions'函数进行此操作，如下所示：

import initializeMarksFunctions from "./marks.js";
import intializeCommentFunction from "./comments.js";
import initializeChangeMarksTypesFunction from "./changeMarksTypes.js";
import initializeSendToServerFunctions from "./sendToServer.js";
import initializeDownloadFunctions from "./downloadEssay.js";

import draw from "../utils/draw.js";
import formatMark from "../utils/formatMark.js";


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

canvas.width = "730";
canvas.height = "891";

const imageSrc = document.getElementById("essay-image").src;



let typeOfDraw = "line";
let typeOfMark = {
  type: "normal",
  color: "black",
};
let actualDraw;

let specificTypeErrorFilter = { name: null };
let specificTypeError = { name: null };

let drawsInfos = [];
let removedMarksIds = [];
let initialCoordinates = {};
let finalCoordinates = {};

// ----------------------------------- //

window.onload = function () {
  const marks = JSON.parse(document.getElementById("mydata").textContent);

  const formatedMarks = formatMark(marks);

  drawsInfos.push(...formatedMarks);

  const image = new Image();

  image.onload = function () {
    ctx.drawImage(image, 0, 0);
    draw(drawsInfos, ctx);
  };

  image.src = imageSrc;

  // define configurações para padrão
  typeOfDraw = "line";
  typeOfMark = {
    type: "normal",
    color: "black",
  };

  ctx.globalAlpha = 1.0;
  ctx.strokeStyle = "black";
  ctx.lineWidth = 1;
};

initializeMarksFunctions(
  canvas,
  ctx,
  drawsInfos,
  initialCoordinates,
  finalCoordinates,
  typeOfDraw,
  typeOfMark,
  removedMarksIds,
  specificTypeError,
  imageSrc
);

intializeCommentFunction(canvas, drawsInfos, actualDraw);

initializeChangeMarksTypesFunction(
  ctx,
  typeOfDraw,
  typeOfMark,
  specificTypeErrorFilter,
  specificTypeError
);

initializeSendToServerFunctions(drawsInfos, removedMarksIds);

initializeDownloadFunctions(canvas);

for (let btnMarkEl of buttonsMark) {
    btnMarkEl.addEventListener("click", function (e) {
      for (let el of buttonsMark) {
        el.classList.remove("btn-active");
      }
      let buttonsOKEl = e.currentTarget;
      buttonsOKEl.classList.add("btn-active");
      applyMarking(buttonsOKEl.id);
    });
  }

  function applyMarking(idButton) {
    switch (idButton) {
      case "btn-mark-line":
        document.getElementById("btn-mark-line").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        document.getElementById("nome").innerText = "Espessura da linha";
        tamLine.style.display = "block";
        ctx.globalAlpha = 1.0;

        typeOfDraw = "line";
        break;

      case "btn-rectangle":
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor =
          "#d9d9d9";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        typeOfDraw = "rectangle";
        ctx.globalAlpha = 0.3;
        break;

      case "btn-type":
        buttonsPush.style.display = "block";
        document.getElementById("btn-mark-line").style.backgroundColor = "#fff";
        document.getElementById("btn-mark-marking").style.backgroundColor =
          "#fff";
        document.getElementById("btn-rectangle").style.backgroundColor = "#fff";
        document.getElementById("btn-type").style.backgroundColor = "#505050";
        tamLine.style.display = "none";
        tiposMarcacao.style.display = "block";
        break;
    }
  }

canvas.addEventListener("mouseup", function finishDraw(event) {
    if (
      initialCoordinates.x == event.offsetX &&
      initialCoordinates.y == event.offsetY
    ) {
      return;
    }

    switch (typeOfDraw) {
      case "line":
      case "markText":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };
        ctx.lineTo(event.offsetX, event.offsetY);
        ctx.stroke();
        break;
      case "rectangle":
        finalCoordinates = { x: event.offsetX, y: event.offsetY };

        ctx.fillStyle = ctx.strokeStyle;

        ctx.fillRect(
          initialCoordinates.x,
          initialCoordinates.y,
          finalCoordinates.x - initialCoordinates.x,
          finalCoordinates.y - initialCoordinates.y
        );

        break;
    }

    drawsInfos.push({
      type: typeOfDraw,
      initialCoordinates,
      finalCoordinates,
      specificTypeError: { ...specificTypeError },
      lineWidth: ctx.lineWidth,
      color: typeOfMark.color,
      opacity: ctx.globalAlpha,
      typeMark: typeOfMark.type,
      comment: null,
    });
  });

import getCookie from "../utils/getCookie.js";

function intializeSendToServerFunctions(drawsInfos, removedMarksIds) {
  const saveMarksButton = document.getElementById("salvar-marcacoes");
  const essayId = document.getElementById("essay_id").value;

  saveMarksButton.addEventListener("click", async function () {
    document.getElementById("save").innerText =
      "As alterações foram salvas com sucesso!";
    const finalData = [[...drawsInfos], [...removedMarksIds]];

    console.log(drawsInfos);

    await fetch(
      `http://127.0.0.1:8000/plataforma/salvar-marcacoes/${essayId}/`,
      {
        credentials: "same-origin",
        mode: "same-origin",
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": getCookie("csrftoken"),
        },
        body: JSON.stringify(finalData),
      }
    );
  });
}

export default intializeSendToServerFunctions;

我将我的标记发送给服务器。很抱歉有这么大的背景，但我认为是neede。所以，我的问题是：

当我作为参数传递时，为什么其他函数中的'drawsInfos'数组会发生变化，而变量'typeOfDraw'和所有其他变量都不会发生变化？？当我发送到服务器时，即使我使用按钮列表器更改，“typeOfDraw”始终定义为“line”。为什么？？

我知道这种将所有内容分离成函数并传递参数的方法不是最好的，但现在是我能做的最好的方法。请问，有人能告诉我如何改进我的方法或帮助处理不变的变量吗？谢谢

我刚刚意识到在JS中，变量是通过复制传递的，我可以更改数组。但是，有人能告诉我如何改进这个方法吗？我可以把每个变量放在数组或对象中，但我不想这样，这不是一个好方法