Как дать Javascript callback аргумент - PullRequest
Новая
       40

Как дать Javascript callback аргумент

0 голосов
/ 19 марта 2020

Я новичок с Javascript, и у меня есть вопрос о том, как я должен предоставить аргументы для моих обратных вызовов. В настоящее время у меня есть два блока кода, которые по существу идентичны приведенным ниже. 

let backArrow = document.createElement("INPUT")
backArrow.type = "image"
backArrow.src = "./images/noun_back_878298.png"
backArrow.alt = "Back"
backArrow.onclick = removeModuleMobile
backArrow.id = "back-arrow"
document.body.appendChild(backArrow)

Единственное различие между ними состоит в том, что вместо них устанавливается backArrow.onclick для удаленияModule вместо removeModuleMobile. Вместо этого я хотел бы сделать что-то, где я предоставляю аргумент для обратного вызова, но отправляю их тому же самому обратному вызову, таким образом устраняя повторяющийся код и имея более логичный рабочий процесс. Например, 

backArrow.onclick = removeModule(notMobile)

или 

backArrow.onclick = removeModule(mobile)

Я не думаю, что это разрешено, поскольку это вызов функции? Я видел много вещей, но должен ли я использовать здесь bind () или есть какой-то другой метод для замыканий. Спасибо за помощь.

Ответы [ 4 ]

0 голосов
/ 20 марта 2020

Ответ 

function removeModule() {
  console.log("not mobile");
}

function removeModuleMobile() {
  console.log("mobile");
}

function addBackArrow(clickFn) {
  let backArrow = document.createElement("INPUT")
  backArrow.type = "image"
  backArrow.src = ".jpg"
  backArrow.alt = "Back"
  backArrow.onclick = clickFn;
  backArrow.id = "back-arrow"

  document.body.appendChild(backArrow)
}

addBackArrow(removeModule);
addBackArrow(removeModuleMobile);

Объяснение:

Чтобы преобразовать строки кода в Function, вы должны обернуть строки с помощью объявления функции . Вы можете думать об этом как объявление переменной с let, var или const, за исключением того, что вы используете слово function.

Объявление функции содержит три части

Во-первых : имя переменной (например, addBackArrow) 

function addBackArrow

Во-вторых : Любые ожидаемые переменные, которые могут быть переданы в используемую функцию, например name , age или, в данном случае, функцию.

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

Эти переменные называются аргументами для нашей функции и записываются после нашего имени функции в скобках.

В нашем случае мы передадим функцию, которая будет срабатывать при щелчке элемента.

Мы можем назвать ее clickFn ( fn - типичная сокращенная запись для function , таким образом, «clickFn» читается как «Click Function») 

function addBackArrow( clickFn )

Наконец : мы помещаем строки кода для запуска внутри наша функция .

Линии расположены между фигурными скобками ({ и }) 

function addBackArrow(clickFn) {
    ...

  backArrow.onclick = clickFn;
}

В приведенном выше примере вы заметили, что мы изменили onclick на значение clickFn. Это потому, что мы передадим в addBackArrow функцию, которую мы хотим вызвать при щелчке элемента.

Чтобы вызвать addBackArrow и выполнить код внутри него дважды, один раз для каждой функции вы пишете имя функции и предоставляете ей аргументы в скобках: 

 addBackArrow( removeModule );
 addBackArrow( removeModuleMobile );

Полный код: 

function addBackArrow(clickFn) {
  let backArrow = document.createElement("INPUT")
  backArrow.type = "image"
  backArrow.src = ".jpg"
  backArrow.alt = "Back"
  backArrow.onclick = clickFn;
  backArrow.id = "back-arrow"

  document.body.appendChild(backArrow)
}

addBackArrow(removeModule);
addBackArrow(removeModuleMobile);
0 голосов
/ 19 марта 2020

Если вы используете один и тот же фрагмент кода несколько раз, создайте его функцию с аргументами, которые вы хотите изменить, и вызовите эту функцию с помощью «removeModuleMobile», а в другой раз - с «RemoveModule».

0 голосов
/ 20 марта 2020

Вы можете использовать bind : 

backArrow.onclick = removeModule.bind(backArrow, mobile)

функции стрелок : 

backArrow.onclick = () => removeModule(mobile);

или просто обычную функцию: 

backArrow.onclick = function() {
  removeModule(mobile);
}

Есть несколько различий, в основном в значении this будет внутри removeModule после вызова. Первый, с bind, является самым близким, чтобы просто назначить backArrow.onclick = removeModule, так как мы навязываем (см. Первый аргумент связывания) контекстный объект this, чтобы быть backArrow.

В В случае функций со стрелками this получит значение this при объявлении функции со стрелкой, а для обычной функции (если не принудительно применяет или вызов ) - быть глобальным объектом (window, если вы находитесь в браузере).

PS Возможно, вы захотите использовать addEventListener вместо установки onclick: это дает вам лучший контроль над событиями и он более гибкий.

0 голосов
/ 19 марта 2020

Вы можете назначить button.onclick, как показано ниже. 

button.onclick = () => {removeModule(mobile)}

Ваша функция не будет вызываться сразу, а будет вызываться при нажатии кнопки.

...