Как я могу поместить константы в функцию, а не сделать их глобальными

Question

Как я могу поместить константы в функцию (я думаю, что это полная страница) и не делать их глобальными. Я думаю, что это плохая практика. Но я не хочу дублировать их в каждом событии, я хотел бы указать только один раз. Я хотел бы знать, что можно сделать с этим.

// This constants
const tl = new TimelineMax({ delay: 0.5 });
const title = destination.item.querySelector("h1");

new fullpage('#fullpage', {
  navigation: true,


  afterLoad: function (destination) {
    // I do not want to repeat them here

    if (destination.index === 0) {
      tl.fromTo(title, 1, { y: "20", opacity: 0 }, { y: "0", opacity: 1 });
    }
  },


  onLeave: (destination) => {
    // And here

    tl.fromTo(title, 1, { y: "20", opacity: 0 }, { y: "0", opacity: 1 });


    if (destination.index === 1) {
      const chairs = document.querySelectorAll(".chair");
      const description = document.querySelector(".description");

      // Here i animate "chairs" and "description"
    }
  }
})

Answer 1

Обратите внимание, что title на самом деле не является константой, поэтому вам нужна просто функция.

{
const tl = new TimelineMax({delay: 0.5});
const title_of = x => x.item.querySelector("h1");

new fullpage('#fullpage', {

  //well why you use normal function here (I shortened it a little)
  afterLoad(destination) {
    const title = title_of(destination)
    //...
  },

  //and arrow function here?
  onLeave: (destination) => {
    const title = title_of(destination)
    //...
  }
})

---

** Этот блок ответа на самом деле не отражает потребности ОП, но так как это отвечает названию, я бы оставил это здесь. **

просто оберните их в блок. поскольку const определяет уровень блока переменная

{
   const tl = new TimelineMax({ delay: 0.5 });
   const title = destination.item.querySelector("h1");

   new fullpage('#fullpage', {...})
}

Answer 2

Оберните код в IIFE, чтобы они соответствовали этой функции.

(function () {
    const foo = 1; // Local to the function defined on the previous line

    // and accessible to any function defined here
})();

Answer 3

Вы можете просто поместить свой код в блок, так как const и let имеют вид блока [1]:

{
  const tl = new TimelineMax({ delay: 0.5 });
  const title = destination.item.querySelector("h1");

  new fullpage('#fullpage', {
    // you can use `tl` and `title` here`...
  })
}

// ...but not here
console.log(tl) //=> ReferenceError: tl is not defined

[1] https://wesbos.com/javascript-scoping/