대상 vs 함수식 프로그래밍

47485 단어 oopjavascripttutorialfunctional

소개하다.


코드를 작성하기 전에 대상과 함수식 프로그래밍을 간략하게 소개해 드리겠습니다.
둘 다 허용과 금지의 기술적으로 다르다.
일부 프로그래밍 언어는 programming paradigms (순함수식) 과 같은 범례만 지원한다.
다양한 범례를 지원하는 언어 (예: Haskell) 를 제외하고, 자바스크립트를 사용하여 대상이나 함수식 코드, 심지어 둘을 혼합할 수 있습니다.

JavaScript 설치 프로그램


이 두 모델 간의 차이를 깊이 연구하기 전에 우리는 먼저 프로젝트를 설정해야 한다.
이렇게 하려면 다음과 같이 필요한 모든 파일과 폴더를 먼저 만듭니다.
$ mkdir func-vs-oop
$ cd ./func-vs-oop
$ cat index.html
$ cat functional.js
$ cat oop.js
cat 명령을 사용하는 이유는 Linux 시스템과 Windows Powershell에서 실행할 수 있기 때문입니다.
다음은 색인에 있는 곱셈 계산기를 위한 간단한 폼을 만들어야 합니다.html.
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <script src="functional.js" defer></script>
</head>
<body>
  <div class="container mt-5">
    <div class="container mt-3 mb-5 text-center">
      <h2>Functional vs OOP</h2>
    </div>
    <form id="factorial-form">
      <div class="form-group">
        <label for="factorial">Factorial</label>
        <input class="form-control" type="number" name="factorial" id="factorial" />
      </div>
      <button type="submit" class="btn btn-primary">Calculate</button>
    </form>
    <div class="container mt-3">
      <div class="row mt-4 text-center">
        <h3>Result:</h3>
        <h3 class="ml-5" id="factorial-result"></h3>
      </div>
    </div>
  </div>
</body>
</html>
이 폼에 더욱 좋은 외관과 느낌을 주기 위해 우리는 을 CSS 프레임워크로 사용한다.
브라우저에 HTML이 표시되면 다음과 같이 표시됩니다.
bootstrap
현재 이 표는 아무런 작용도 하지 않는다.
우리의 목표는 최대 100개의 숫자를 입력할 수 있는 논리를 실현하는 것입니다."계산"단추를 누르면result-div에 결과를 표시해야 합니다.
우리는 대상을 향한 방식과 함수의 방식으로 이 점을 실현할 것이다.

기능 구현


우선, 우리는 함수식 프로그래밍 방법을 위해 파일을 만들 것이다.
$ cat functional.js
시작하려면 이 파일을 브라우저에 불러올 때 이 함수를 호출하는 함수가 필요합니다.
이 함수는 폼을 가져와서 폼의 제출 이벤트에 추가해야 합니다.
function addSubmitHandler(tag, handler) {
  const form = getElement(tag);
  form.addEventListener('submit', handler);
}

addSubmitHandler("#factorial-form", factorialHandler);
우선, 우리는ddSubmitHandler라는 함수를 성명합니다.
이 함수는 두 개의 인자를 포함합니다. 첫 번째는 HTML에서 찾고자 하는 태그이고, 두 번째는 원소에 귀속되어 이벤트를 제출하고자 하는 함수입니다.
다음에 #factorial form과 함수 이름factorial Handler를 보내서 이 함수를 호출합니다.
태그 앞의 태그는 HTML에서 id 속성을 찾고 있음을 나타냅니다.
지금 실행하려고 시도하면, 이 코드는 함수 getElement과factorialHandler가 어느 곳에서도 정의되지 않았기 때문에 오류가 발생합니다.
먼저 다음과 같이 addSubmitHandler 함수에 getElement을 정의합니다.
function getElement(tag) {
  return document.querySelector(tag);
}
이 함수는 가져온 태그를 통해 찾은 HTML 요소만 반환하는 매우 간단합니다.
하지만 우리는 앞으로 이 함수를 다시 쓸 것이다.
이제 addSubmitHandler에factorialHandler 함수를 추가해서 핵심 논리를 만듭니다.
function factorialHandler(event) {
  event.preventDefault();

  const inputNumber = getValueFromElement('#factorial');

  try {
    const result = calculateFactorial(inputNumber);
    displayResult(result);
  } catch (error) {
    alert(error.message);
  } 
}
이 이벤트를 통해 즉시 으로 전화하겠습니다.
이벤트를 제출하는 기본 동작을 막습니다.preventDefault를 호출하지 않은 상태에서 단추를 누르십시오.
그런 다음 getValueFromElement 함수를 호출하여 입력 필드에서 사용자가 입력한 값을 가져옵니다.
숫자를 얻은 후, 우리는 함수calculateFactorial 계산 곱셈을 사용한 다음, 결과를 함수displayResult에 전달하여 결과를 페이지에 보여 주려고 합니다.
만약 값의 형식이 정확하지 않거나 숫자가 100보다 크다면, 우리는 오류를 던져서 경고로 표시할 것입니다.
이것이 바로 이런 특수한 상황에서try-catch 블록을 사용하는 원인이다.
다음 단계에서, 우리는 다른 두 개의 조수 함수인 getValueFromElement과 displayResult를 만들 것입니다.
getElement 함수 아래에 그것들을 추가합니다.
function getValueFromElement(tag) {
  return getElement(tag).value;
}

function displayResult(result) {
  getElement('#factorial-result').innerHTML = result
}
이 두 함수는 모두 GetElement 함수를 사용합니다.이런 중용성은 함수식 프로그래밍이 이렇게 효과적인 원인 중의 하나이다.
다시 사용하기 위해서 디스플레이 Result에 두 번째 인자를 추가할 수 있습니다. 이것은 tag입니다.
이렇게 하면 우리는 결과를 표시해야 하는 요소를 동적으로 설정할 수 있다.
그러나 이 예에서 나는 하드코딩 방식을 채택했다.
다음으로factorialHandler 위에calculateFactorial 함수를 만듭니다.
function calculateFactorial(number) {
  if (validate(number, REQUIRED) && validate(number, MAX_LENGTH, 100) && validate(number, IS_TYPE, 'number')) {
    return factorial(number);
  } else {
    throw new Error(
      'Invalid input - either the number is to big or it is not a number'
    );
  }
}
우리는 파라미터'number'가 비어 있는지, 100을 넘지 않는지,number 형식이 아닌지를 검증합니다.
이를 위해validate라는 함수를 사용했습니다. 다음에 이 함수를 만들어야 합니다.
검사가 통과되면 함수factorial을 호출하고 결과를 되돌려줍니다.
이 검사가 통과되지 않으면factorialHandler 함수에서 포획된 오류를 던집니다.
우선displayResult와 세 개의 상수 MAX LENGTH, IS TYPE 및 REQUIRED 아래에서validate 함수를 만듭니다.
const MAX_LENGTH = 'MAX_LENGTH';
const IS_TYPE = 'IS_TYPE';
const REQUIRED = 'REQUIRED';

function validate(value, flag, compareValue) {
  switch (flag) {
    case REQUIRED:
      return value.trim().length > 0;
    case MAX_LENGTH:
      return value <= compareValue;
    case IS_TYPE:
      if (compareValue === 'number') {
        return !isNaN(value);
      } else if (compareValue === 'string') {
        return isNaN(value);
      }
    default:
      break;
  }
}
이 함수에서, 우리는 어떤 검증을 실행할지 결정하기 위해 스위치를 사용한다.
확정된 후에 이것은 단지 간단한 값 검증일 뿐이다.
현재 우리는 calculate Factorial 성명의 바로 위에 실제 곱셈 함수를 추가할 것이다.
이것은 이런 방법의 마지막 기능이 될 것이다.
function factorial(number) {
  let returnValue = 1;
  for (let i = 2; i <= number; i++) {
    returnValue = returnValue * i;
  }
  return returnValue;
}
곱셈 계산을 실행하는 데는 많은 다른 방법이 있는데, 나는 교체 방법을 사용했다.
만약 다른 방법에 대한 정보를 더 알고 싶다면, Geeksforgeks에 관한 이 글을 보십시오.
  • preventDefault
    • 마지막 기능.js 파일은 다음과 같습니다.
    const MAX_LENGTH = 'MAX_LENGTH';
const IS_TYPE = 'IS_TYPE';
const REQUIRED = 'REQUIRED';

function getElement(tag) {
  return document.querySelector(tag);
}

function getValueFromElement(tag) {
  return getElement(tag).value;
}

function displayResult(result) {
  getElement('#factorial-result').innerHTML = result
}

function validate(value, flag, compareValue) {
  switch (flag) {
    case REQUIRED:
      return value.trim().length > 0;
    case MAX_LENGTH:
      return value <= compareValue;
    case IS_TYPE:
      if (compareValue === 'number') {
        return !isNaN(value);
      } else if (compareValue === 'string') {
        return isNaN(value);
      }
    default:
      break;
  }
}

function factorial(number) {
  let returnValue = 1;
  for (let i = 2; i <= number; i++) {
    returnValue = returnValue * i;
  }
  return returnValue;
}

function calculateFactorial(number) {
  if (validate(number, REQUIRED) && validate(number, MAX_LENGTH, 100) && validate(number, IS_TYPE, 'number')) {
    return factorial(number);
  } else {
    throw new Error(
      'Invalid input - either the number is to big or it is not a number'
    );
  }
}

function factorialHandler(event) {
  event.preventDefault();

  const inputNumber = getValueFromElement('#factorial');

  try {
    const result = calculateFactorial(inputNumber);
    displayResult(result);
  } catch (error) {
    alert(error.message);
  } 
}

function addSubmitHandler(tag, handler) {
  const form = getElement(tag);
  form.addEventListener('submit', handler);
}

addSubmitHandler("#factorial-form", factorialHandler);
    이런 방법에서 우리는 함수만 처리한다.모든 함수는 단일한 용도가 있는데, 그 중 대부분은 응용 프로그램의 다른 부분에서 다시 사용할 수 있다.
    이 간단한 웹 응용 프로그램에 대해 말하자면 기능적인 방법은 좀 지나치다.다음에 우리는 같은 기능을 작성할 것이지만 이번에는 대상을 대상으로 할 것이다.

    https://www.geeksforgeeks.org/program-for-factorial-of-a-number/ 대상을 향한 실현


    우선, 색인의script 표시에 있는 src를 변경해야 합니다.html 파일을 다음 내용으로 복사합니다.
    <script src="oop.js" defer></script>
    이제 oop을 만듭니다.js 파일.
    $ cat oop.js
    OOP 방법에 대해 우리는 세 가지 다른 종류를 만들고 싶다. 하나는 검증에 사용되고, 하나는 곱셈 계산에 사용되며, 하나는 폼을 처리하는 데 사용되기를 바란다.
    처리 폼을 만드는 클래스부터 시작합니다.
    class InputForm {
  constructor() {
    this.form = document.getElementById('factorial-form');
    this.numberInput = document.getElementById('factorial');

    this.form.addEventListener('submit', this.factorialHandler.bind(this));
  }

  factorialHandler(event) {
    event.preventDefault();

    const number = this.numberInput.value;

    if (!Validator.validate(number, Validator.REQUIRED) 
      || !Validator.validate(number, Validator.MAX_LENGTH, 100)
      || !Validator.validate(number, Validator.IS_TYPE, 'number'))
      {
        alert('Invalid input - either the number is to big or it is not a number');
        return;
      }

      const factorial = new Factorial(number);
      factorial.display();
  }
}

new InputForm();
    구조 함수에서, 우리는form원소와 input원소를 얻어 클래스 변수 (properties라고도 부른다) 에 저장한다.
    이후에factorialHandler 방법을submit 이벤트에 추가합니다.
    이런 상황에서 우리는 클래스의 'this'를 방법에 추가해야 한다.
    만약 우리가 이렇게 하지 않는다면, 우리는 이것을 호출하는 것과 같은 참고 오류를 얻을 것이다.숫자 입력.값이 정의되지 않습니다.
    다음에 이벤트를 매개 변수로 클래스를 만드는 방법factorialHandler입니다.
    이 방법의 코드는 익숙해 보일 것이다. 예를 들어if문장은 inputvalue가 유효한지 확인하는데, 우리가calculateFactorial 함수에서 한 것처럼.
    검증기.validate는 클래스 검증기의 정적 방법에 대한 호출입니다. 이 방법을 만들어야 합니다.
    정적 방법을 사용하면 대상의 새로운 실례를 초기화할 필요가 없습니다.
    검증이 통과된 후, 우리는 곱셈 클래스의 새로운 실례를 만들어서 inputvalue에 전송한 다음, 계산 결과를 사용자에게 표시합니다.
    그런 다음 InputForm 클래스 바로 위에 Validator 클래스를 만듭니다.
    class Validator {
  static MAX_LENGTH = 'MAX_LENGTH';
  static IS_TYPE = 'IS_TYPE';
  static REQUIRED = 'REQUIRED';

  static validate(value, flag, compareValue) {
    switch (flag) {
      case this.REQUIRED:
        return value.trim().length > 0;
      case this.MAX_LENGTH:
        return value <= compareValue;
      case this.IS_TYPE:
        if (compareValue === 'number') {
          return !isNaN(value);
        } else if (compareValue === 'string') {
          return isNaN(value);
        }
      default:
        break;
    }
  }
}
    보시다시피 이 클래스의 모든 내용은 정적, 방법validate, 그리고 세 가지 속성입니다.
    따라서 우리는 어떠한 구조 함수도 필요 없다.
    이렇게 하면 우리가 이 종류를 사용할 때마다 그것을 초기화할 필요가 없다는 장점이 있다.
    검증 기능과 검증 기능은 기본적으로 같다.우리 말고 이렇게 해.이것은 필수적이다.최대 길이랑 이거요.는 변수 이름뿐만 아니라 유형입니다.
    그런 다음 Validator 클래스의 바로 아래에 곱하기 클래스를 생성합니다.
    class Factorial {
  constructor(number) {
    this.resultElement = document.getElementById('factorial-result');
    this.number = number;
    this.factorial = this.calculate();
  }

  calculate() {
    let returnValue = 1;
    for (let i = 2; i <= this.number; i++) {
      returnValue = returnValue * i;
    }
    return returnValue;
  }

  display() {
    this.resultElement.innerHTML = this.factorial;
  }
}
    이 클래스의 실례를 초기화할 때,resultelement를 얻어 속성과 전송된 숫자로 저장합니다.
    다음에, 우리는 방법calculate를 호출하여 되돌아오는 값을 속성에 저장합니다.
    calculate 방법은functional의 곱셈 함수와 같은 코드를 포함합니다.js.
    마지막으로 가장 중요하지 않은 것은 디스플레이 방법을 얻었습니다. 이 방법은resultement의 innerHTML를 계산된 곱셈으로 설정합니다.
    온전한 oop.js 파일은 이렇습니다.
    class Validator {
  static MAX_LENGTH = 'MAX_LENGTH';
  static IS_TYPE = 'IS_TYPE';
  static REQUIRED = 'REQUIRED';

  static validate(value, flag, compareValue) {
    switch (flag) {
      case this.REQUIRED:
        return value.trim().length > 0;
      case this.MAX_LENGTH:
        return value <= compareValue;
      case this.IS_TYPE:
        if (compareValue === 'number') {
          return !isNaN(value);
        } else if (compareValue === 'string') {
          return isNaN(value);
        }
      default:
        break;
    }
  }
}

class Factorial {
  constructor(number) {
    this.resultElement = document.getElementById('factorial-result');
    this.number = number;
    this.factorial = this.calculate();
  }

  calculate() {
    let returnValue = 1;
    for (let i = 2; i <= this.number; i++) {
      returnValue = returnValue * i;
    }
    return returnValue;
  }

  display() {
    this.resultElement.innerHTML = this.factorial;
  }
}

class InputForm {
  constructor() {
    this.form = document.getElementById('factorial-form');
    this.numberInput = document.getElementById('factorial');

    this.form.addEventListener('submit', this.factorialHandler.bind(this));
  }

  factorialHandler(event) {
    event.preventDefault();

    const number = this.numberInput.value;

    if (!Validator.validate(number, Validator.REQUIRED) 
      || !Validator.validate(number, Validator.MAX_LENGTH, 100)
      || !Validator.validate(number, Validator.IS_TYPE, 'number'))
      {
        alert('Invalid input - either the number is to big or it is not a number');
        return;
      }

      const factorial = new Factorial(number);
      factorial.display();
  }
}

new InputForm();
    우리는 세 가지 다른 클래스를 만들어서 응용 프로그램의 세 가지 다른 측면을 처리했다.
  • 인증: 인증 클래스
  • 레벨 처리: 레벨 클래스
  • 양식 처리: InputForm 클래스

    • 얽어매다 결론


    이 두 가지 방법은 모두 코드를 구축하는 효과적인 방법이다.
    개인적으로 나는 내가 종사하는 다양한 항목 중에서 가장 효과적인 방법을 시도하는 것을 좋아한다.
    대다수 때, 심지어는 이 두 가지 모델을 이렇게 명확하게 구분할 수 없다.
    나는 이 작은 비교가 너로 하여금 서로 다른 방법에 대해 기본적으로 이해하게 할 수 있기를 바란다.
    예전과 같이, 너는 나의 에서 이 프로젝트의 코드를 찾을 수 있다.
    질문
    [NOI2002] 은하수 영웅전설(및 수집)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage