Javascript 有什么方法可以最小化js代码吗？

我是javascript的初学者。看起来代码太乱了。我写的代码是我的极限。如何最小化代码

我知道有一种方法可以在不单独编写代码的情况下简洁地编写它，但仍然很难。请帮帮我

const CloseBtn01 = document.querySelector(".close01");
const CloseBtn02 = document.querySelector(".close02");
const CloseBtn03 = document.querySelector(".close03");


const btn01 = document.querySelector("#gnbBtn01");
const btn02 = document.querySelector("#gnbBtn02");
const btn03 = document.querySelector("#gnbBtn03");
const layout01 = document.querySelector(".layout01")
const layout02 = document.querySelector(".layout02")
const layout03 = document.querySelector(".layout03")

function closeLayout01() {
   CloseBtn01.addEventListener("click", function(){
      layout01.style.display = "none";
      gsap.to(camera.position, {
         x: cameraPosition.x,
         y: cameraPosition.y,
         z: cameraPosition.z,
         duration: 1.2
      })
   })
}
function closeLayout02() {
   CloseBtn02.addEventListener("click", function(){
      layout02.style.display = "none";
      gsap.to(camera.position, {
         x: cameraPosition.x,
         y: cameraPosition.y,
         z: cameraPosition.z,
         duration: 1.2
      })
   })
}
function closeLayout03() {
   CloseBtn03.addEventListener("click", function(){
      layout03.style.display = "none";
      gsap.to(camera.position, {
         x: cameraPosition.x,
         y: cameraPosition.y,
         z: cameraPosition.z,
         duration: 1.2
      })
   })
}

btn01.addEventListener("click", function(){
   gsap.to(camera.position, {
      x: -4,
      y: 1,
      z: 3.4,
      duration: 1.2,
      onComplete: () => {
         layout01.style.display = "block";
         closeLayout01();
      }
   })
})


btn02.addEventListener("click", function(){
   gsap.to(camera.position, {
      x: 4,
      y: 0.5,
      z: 0,
      duration: 1.2,
      onComplete: () => {
         layout02.style.display = "block";
         closeLayout02();
      }
   })
})

btn03.addEventListener("click", function(){
   gsap.to(camera.position, {
      x: 3,
      y: 0.5,
      z: 5,
      duration: 1.2,
      onComplete: () => {
         layout03.style.display = "block";
         closeLayout03();
      }
   })
})

你好!！我是javascript的初学者。看起来代码太乱了。我写的代码是我的极限。如何最小化代码

---

我知道有一种方法可以在不单独编写代码的情况下简洁地编写它，但仍然很难。请帮帮我。

虽然没有大的改进，但绝对可以消除两面性

const CloseBtn01 = document.querySelector(".close01");
const CloseBtn02 = document.querySelector(".close02");
const CloseBtn03 = document.querySelector(".close03");


const btn01 = document.querySelector("#gnbBtn01");
const btn02 = document.querySelector("#gnbBtn02");
const btn03 = document.querySelector("#gnbBtn03");
const layout01 = document.querySelector(".layout01")
const layout02 = document.querySelector(".layout02")
const layout03 = document.querySelector(".layout03")

function closeLayout01() {
   CloseBtn01.addEventListener("click", function(){
      layout01.style.display = "none";
      gsap.to(camera.position, {
         x: cameraPosition.x,
         y: cameraPosition.y,
         z: cameraPosition.z,
         duration: 1.2
      })
   })
}
function closeLayout02() {
   CloseBtn02.addEventListener("click", function(){
      layout02.style.display = "none";
      gsap.to(camera.position, {
         x: cameraPosition.x,
         y: cameraPosition.y,
         z: cameraPosition.z,
         duration: 1.2
      })
   })
}
function closeLayout03() {
   CloseBtn03.addEventListener("click", function(){
      layout03.style.display = "none";
      gsap.to(camera.position, {
         x: cameraPosition.x,
         y: cameraPosition.y,
         z: cameraPosition.z,
         duration: 1.2
      })
   })
}

btn01.addEventListener("click", function(){
   gsap.to(camera.position, {
      x: -4,
      y: 1,
      z: 3.4,
      duration: 1.2,
      onComplete: () => {
         layout01.style.display = "block";
         closeLayout01();
      }
   })
})


btn02.addEventListener("click", function(){
   gsap.to(camera.position, {
      x: 4,
      y: 0.5,
      z: 0,
      duration: 1.2,
      onComplete: () => {
         layout02.style.display = "block";
         closeLayout02();
      }
   })
})

btn03.addEventListener("click", function(){
   gsap.to(camera.position, {
      x: 3,
      y: 0.5,
      z: 5,
      duration: 1.2,
      onComplete: () => {
         layout03.style.display = "block";
         closeLayout03();
      }
   })
})

下面是：

函数closeLayout03（）{
CloseBtn03.addEventListener（“单击”，函数（）{
layout03.style.display=“无”；
gsap.to（摄像机位置{
x:cameraPosition.x，
y:cameraPosition.y，
z:cameraPosition.z，
持续时间：1.2
})
})
}
//对此
功能关闭布局（关闭BTN，布局）{
closeBtn.addEventListener（“单击”，函数（）{
layout.style.display=“无”；
gsap.to（摄像机位置{
x:cameraPosition.x，
y:cameraPosition.y，
z:cameraPosition.z，
持续时间：1.2
})
})
}
//并将其称为
btn01.addEventListener（“单击”，函数（）{
gsap.to（摄像机位置{
x:-4，
y:1,，
z:3.4，
持续时间：1.2，
未完成：（）=>{
layout01.style.display=“块”；
closeLayout（CloseBtn01，layout01）；
//类似地，对于其他BTN，它将替换为
//closeLayout（CloseBtn02，layout02）；
//closeLayout（CloseBtn03，layout03）；
}
})
})

在此处添加HTML代码我将添加一个

closeLayout

，并将元素作为参数传递给该元素，以保持其干燥

• 您好，欢迎来到stackoverflow。试着编辑你的文章以包含上面的html。如果您这样做，您可以让语法高亮显示来处理显示，这将使您更容易阅读和理解问题，并且您将更有可能获得问题的答案。