개요

"순수 함수"를 작성하여 어떤 의미로든 작성된 HTML-CSS 양식의 양식 제출을 처리할 것입니다✨. 우리는 다음을 활용할 것입니다.

"일선"살찐 화살표 기능

객체 분해

filter

reduce

최종 결과🥅 사용자가 "제출"을 누르면, 우리는 동적으로 모든 폼 값을 수집하여, 그것들을 상응하는 입력과 맞추고, 그것들을 모두 하나의 대상에 묶을 것이다.
그래서 우리는 이런 일을 해야 한다.

{
  name: "Mark Galloway",
  // ... other values from the form paired with 'input ids'.
}

이것은 단지 logged일 수도 있습니다. 우리가 여기서 한 것처럼, 서버에 보내든지, 무엇이든지.중점📝 우리는 모든 유사한 응용 프로그램에서 사용할 수 있는 순수한 함수를 가지고 있을 것이다.

듣다👂🏽 양식 커밋의 경우

근거: <script src="./scripts.js"></script> 스크립트를 엽니다.다음 단계부터 시작합니다.

문서 객체 모델(DOM)을 사용하여 질의form를 수행합니다.

듣기👂🏽 "submit" 이벤트의 경우

브라우저가 백엔드 서버에 커밋하지 못하도록 하는 기본 비헤이비어입니다.

다음은 이 모든 절차를 포괄하는 코드입니다.👆🏽.

document.querySelector('form').addEventListener('submit', event => {
  event.preventDefault();
})

이 줄: addEventListener("submit", (event) => { 사용된 리셋 함수는 ES2015/ES6'fat arrow'/'lamda'문법으로 작성되었습니다.자세한 내용:

기능

마나프 미스라・ 20년10월28일・ 4분 읽기

#react #javascript #beginners #functional

이 매개변수 event 는 브라우저에서 발생하는 실제 "제출 이벤트"에 바인딩됩니다.
저희도 체인하고 있어요.⛓️ 우리의 전진에 따라 한 걸음 한 걸음 .s와 함께 있다.console.log(event)의 바로 아래에서 실행을 시도합니다preventDefault().다른 JS 객체일 뿐입니다.이것은 브라우저가 제공한 DOM API의 결과입니다. 대부분의 사물을 JS 대상 b/c로 쉽게 모델링할 수 있습니다. 이것은 JS가 진정으로 이해하는 것입니다.

이벤트목표원소

리셋 함수 내부, 오른쪽 아래: event.preventDefault(),do: console.log(event.target)👈🏽 마찬가지로'제출 이벤트'는 하나의 대상으로 모델링되었습니다. event. 현재 저희는 하나를 방문하고 있습니다.🔑, target 제출된 이벤트의 모든 요소를 트리거하는 객체 모델, 즉 form 자체를 제공합니다.
이제 양식을 작성하고 "개발 도구 콘솔"을 확인하십시오.

우리는 하나를 얻었다. HTMLFormControlsCollection - 기본적으로, 그것은 form 내부의 모든 것에서, 이 제출 사건은 그곳에서 발생한 것이다.

배열 방법을 통해 HTMLFormControlsCollection을 객체 문자로 변환 - 필터링 및 감소

Array.from(event.target.elements)
      .filter(({ id }) => id)
      .reduce((accumulator, { id, value }) => ({
        ...accumulator,
        ...{ [id]: value },
      }))

EnVogue 노래의 한 구절을 인용하여 "이제 무너질 때야..."

무더기에서 (이벤트. 대상. 요소)

filter과reduce를 사용하려면 먼저 하나의 수조가 필요합니다. Array.from(event.target.elements)

id가 있는 모든 요소를 필터링합니다

더 잘 이해하기 위해서 우리는 먼저 이렇게 쓸 수 있다. .filter(element => element.id)filter는 술어 리셋 함수입니다.이것은 "truthy"요소만 되돌아올 때마다element => element.id,"만약 그것이 확실히 있다면🔑, id.”
현재, 우리는 대상 분해를 사용하여 코드를 단축할 수 있다.전체element를 도입한 다음.을 사용하여 액세스를 시도할 필요가 없습니다id. "끌어내기"id만 하면 됩니다.🔑 매개변수에서: ({id}).나머지 부분의 작업 방식은 같다."id가 있습니까? 있으면 이 요소를 되돌려 주십시오."
예, 설령 우리가 분해하고 있다 하더라도 id 우리는 여전히 전체 원소를 되돌릴 수 있습니다.우리는 어떤 것도 손실하지 않았다. .filter(({ id }) => id)

모든 컨텐트를 하나의 객체로 축소

reduce에는 2개의 매개 변수를 수신하는 리셋 함수가 있습니다.첫 번째는'누적기'를 대표한다. 여기서 우리가'구축'하고 있는'대상'을 가리킨다필터링된 요소를 교체할 때, 우리는 다음 id 과 value (재구성 대상) 을 추가할 때마다'구축'을 계속하고 이 대상을 되돌려 주기를 희망합니다.

// The callback function inside of 'reduce'
(accumulator, { id, value }) => ({
          ...accumulator,
          ...{ [id]: value },
        })

통지, => ({.우리는 은밀하게 대상을 되돌려준다.그러나 이것은 확실히 우리가 하고 있는 일이라는 것을 JS에 분명히 밝혀야 한다. 그렇지 않으면 JS는 곤혹스러울 것이다. 왜냐하면 우리는 통상적으로 ( 우리의 기능체를 열고 있다는 것을 표시해야 하기 때문이다.{ 확장 중 - ...accumulator, - 모두🔑/...의 값이 맞습니다.accumulator과...{ [id]: value }를 현재 폼 요소에서 대상 문자로 잠시 포장합니다.이것은 즉각 전파되고 개방된 것이다.
현재, id 및 value 의 "가격 차이"가 "반환 대상"에 통합되었습니다.이것이 바로 accumulator 매번 교체될 때마다 누적되거나 증가하는 원인이다.

// Spread all the things and return a new 'merged' object
=> ({
  ...accumulator,
  ...{ [id]: value },
})

{[id]: value} accumulator - 원인을 확인하기 위해 남겨 드리겠습니다.그것을 꺼내서 무슨 일이 일어날지 보아라.

HTML 양식 제출을 처리하는 순수한 함수!

우리는 이미 "순수"함수를 만들었습니다. "복사/붙여넣기"를 할 수 있고, 코드를 변경할 필요가 없습니다. tt는 작업할 수 있습니다!우리의 유일한 가설은 우리가 의미 있고 접근 가능한 HTML을 작성하고 있는데 그 중에서 [ 는 id 에 정확하게 사용된다는 것이다.