Как передавать свой аргумент в функцию?

280

14 августа 2021, 23:50

Пишу свой плагин для форм отправки. Возник вопрос, как передавать свой аргумент, как это делается например в методе jquery

$('tut selector').each(function(item) {
})

Тут автоматом как-то передается аргумент item, который я могу использовать.

; 
(() => { 
  class Validation { 
 
    constructor(options) { 
      this.fields = options.fields; 
      this.formElement = document.querySelector(options.formSelector); 
 
      this._checkRules = { 
        phone: /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/, 
        mail: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/, 
 
      } 
    } 
 
    init() { 
      if (Object.prototype.toString.call(this.fields) === '[object Array]') { 
        this.fields.map((item) => { 
          document.querySelector(item.fieldSelector).addEventListener('blur', (e) => { 
            //target - DOM элемент, поле 
            //item.text - Условие, по которому нужно проверять строку или регулярное выражение 
            //item.required - Обязательное ли поле 
            let failCallback = item.onFail ? item.onFail : this.onFail; 
            const target = event.target; 
 
            if (this.fieldTest(target, item.test, item.required) === false) { 
              failCallback(); 
            } else { 
              onSuccess(); 
            } 
 
          }) 
        }) 
      } else { 
 
      } 
    } 
 
    onSuccess() { 
 
    } 
 
    onFail() { 
 
    } 
 
    fieldTest(field, test = 'default', required = false) { 
      if (required && field.value == '') { 
        return false; 
      } 
 
      switch (test) { 
        case 'phone': 
          return this._checkRules.phone.test(field.value); 
          break; 
        case 'mail': 
          return this._checkRules.mail.test(field.value); 
          break; 
        case 'message': 
          return field.value.length < 5 ? false : true; 
          break; 
        default: 
          return true; 
          break; 
      } 
    } 
 
  } 
 
  var valide = new Validation({ 
    formSelector: 'form', 
    fields: [{ 
        fieldSelector: '.name', 
        test: 'name', 
        required: true, 
 
      }, 
      { 
        fieldSelector: '.phone', 
        test: 'phone', 
        onFail: () => { 
          alert('Коллбэк сработал'); 
        } 
      }, 
      { 
        fieldSelector: '.mail', 
        test: 'mail' 
      }, 
      { 
        fieldSelector: '.ms', 
        test: 'message' 
      }, 
    ] 
  }).init(); 
 
})();

Заодно буду благодарен, если укажите на какие-то возможные улучшения моего кода.

Answer 1

На самом деле в приведенном тобой примере из jQuery, в метод each ты передаешь анонимную функцию, а метод each уже как то вызывает ее и передаёт в нее нужные аргументы.

Если конкретнее то jQuery в этом примере выполнит следующие:

Получит коллекцию HTMLElement
Пробежиться циклом по коллекции, где для каждого его элемента вызовет переданную тобой анонимную функцию и в качестве аргумента передаст текущий элемент.

Для примера ты можешь сделать в своем классе метод

each(cb) {
    this.fields.forEach(function (field) {
        cb(field);
    }
    return this;
}

Который будет вызываться так если init() так же будет возвращать this

const validator = new Validator(/*arguments*/)
        .init()
        .each(function(field) {
            console.log(field)
     })

P.S this возвращается что бы последовательно вызывать методы.

Проверить на массив можно с помощью оператора instanseof Array. MDN

Answer 2

test, callback - аргументы функции.

callback - так же и функция обратного вызова.

При вызове функции log() мы передаём ссылку на функцию. Обязательно без оператора вызова функции ().

// Просто выводит T 
const echoT = () => console.log('() => t'); 
 
// Просто выводит T 
function logT () { 
  console.log('function t'); 
} 
 
function log (text, callback) { 
  console.log(text); 
  callback(); 
} 
 
log('test', () => { 
  console.info('Отработал callback'); 
}); 
 
log('test', echoT); 
 
log('test', logT);

Вызов обратной функции с аргументами:

function log (text, callback) { 
 
  let count  = 2; 
  console.log(text); 
  callback(count); 
} 
// Стрелочная функция 
log('test', i => console.log(i)); 
 
log('test', function(i) { 
  console.log(i); 
});