JavaScript를 분리할 수 있게 해주는 기능 공유-JS 튜토리얼-php.cn

이 글은 자바스크립트에서 벗어나기 위해 함수형 프로그래밍을 활용하는 방법을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 이제 공유하고 참고하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

DHTML에 대하여

DHTML은 Dynamic HTML의 약자로, 기존의 정적 HTML에 비해 웹 페이지를 만드는 개념입니다. 소위 동적 HTML(줄여서 DHTML)은 실제로 새로운 언어가 아닙니다. 이는 단지 HTML, CSS 및 클라이언트측 스크립트의 통합입니다. 즉, 페이지에는 html+css+javascript(또는 기타 클라이언트측 스크립트)가 포함됩니다. scripts). 여기서 CSS 및 클라이언트 측 스크립트는 관련 파일에 연결하는 대신 페이지에 직접 작성됩니다.

당시 JavaScript는 천천히 발전하여 주로 양식 유효성 검사에 사용되었습니다. 그래서 지금처럼 대중적이지 못했고 크게 주목받지도 못했습니다. 이는 단지 금상첨화라고 할 수 있습니다. 브라우저에서 JavaScript가 비활성화된 후에도 애플리케이션이 계속 정상적으로 사용될 수 있는지 확인해야 합니다. 이후 jQuery, Knockout, Angular, React, Vue 등 프레임워크가 차례로 등장했습니다.

마찬가지로 JavaScript도 빠른 속도로 발전하고 있습니다. 우리는 ES6를 사용한 지 얼마 되지 않았는데 이제 사람들은 ES7을 거의 건너뛰고 ES8에 대해 이야기하기 시작했습니다.

그리고 TypeScript, CoffeScript, ClojureScript, ELM 등과 같은 다양한 대안이 있습니다.

우리는 너무 많은 프레임워크와 언어에 압도당했고, 그것들을 모두 추적하고 마스터하는 것이 어렵습니다.

잘못된 경로

JavaScript가 성숙해지면서 객체 지향 프로그래밍(OOP)의 개념이 스며들었고 저는 그것을 좋아했습니다.

클래스를 만들기 위해 다양한 방법을 시도하기 시작했고 마침내 상속을 올바르게 사용할 수 있게 되었습니다. 나는 스스로에게 이렇게 말했습니다. JavaScript는 정말 언어처럼 보이기 시작했습니다!

그러나 몇 년이 지나서야 OOP가 JavaScript가 도입한 최악의 디자인이라는 사실을 알게 되었습니다!

나는 C#에 대한 나의 이해를 JavaScript로 가져오려고 노력합니다. 처음에는 기대가 가득했지만 나중에 보니 너무 복잡하고 머리가 아팠습니다.

이것은 주로 JavaScript의 프로토타입 상속이 C#과 다르기 때문입니다. 나는 매일 console.log(this)와 같은 우아한 코드를 작성하는 데 익숙합니다. 하지만 지금은 어떻습니까? 실수로 규칙을 따르지 않으면 악몽을 꿀 것입니다. 프라이빗 메서드와 프라이빗 값은 이름 앞에 밑줄을 표시해야 하며, 개인정보 보호를 위해 클로저도 사용해야 합니다.

따라서 OOP는 많은 문제를 야기했을 뿐만 아니라 OOP의 추가로 인해 많은 새로운 문제가 발생했습니다.

함수형 프로그래밍

처음에는 이해가 안 됐어요. 나는 이 기능 코드를 읽고 이해할 수 있지만 왜 그런지 모르겠습니다! 결국 나는 그것을 배우도록 강요당했습니다.

함수형 언어는 나에게 새로운 관점을 주고 프로그래밍을 완전히 다른 방식으로 볼 수 있게 해주었습니다.

처음에는 부자연스럽게 느껴지고 적응하는 데 시간이 걸릴 것입니다. 모든 정의는 함수를 기반으로 하며 값을 변경할 수 없으며 상태도 없습니다. 나는 문제를 해결하기 위해 기능적 사고를 사용합니다. 익숙하지 않아서 배우는 데 시간이 더 걸렸습니다. 점차적으로 저는 함수형 방법을 사용하여 프로그래밍하는 데 능숙해졌습니다. 그리고 이렇게 작성된 모든 코드의 기본 의미도 알고 있습니다.

내 코드가 더 간결해지고 재사용이 쉬워졌습니다. 점차적으로 내가 사용하던 언어 기능이 코드에서 사라지고 내 코드가 다른 언어로 작성된 것처럼 보였습니다. 나는 아직도 자바스크립트를 사용하고 있나요?

1. 더 이상 var를 사용하지 마세요

var를 const로 바꿨습니다. 기능적인 디자인을 통해 나의 기능은 순수합니다. 변수의 값은 다시 변경되지 않으며 해당 변수가 작동되지 않도록 합니다.

코드를 확인하여 모든 var, 심지어 let, 모든 선언이 const를 사용하는지 확인하겠습니다.

2. for 루프가 없습니다

프로그래밍 언어를 배울 때 처음에는 for 루프를 배우게 됩니다. 그런데 함수형 프로그래밍을 배운 이후로 필터, 맵, 축소를 사용하도록 for 루프를 변경했습니다. 추가 계산이 필요한 경우 재귀 또는lazy.js와 같은 타사 라이브러리를 사용합니다.

이제 내 코드에는 for 루프가 없습니다. 보이면 알려주시면 제거하겠습니다.

3. if도 단순화할 수 있습니다

저는 if 안에 큰 코드 블록을 작성하는 것을 중단하기 시작했습니다. 내부의 로직을 추출하여 별도의 함수에 넣었습니다. 이런 식으로 삼항 연산자(a?b:c)를 사용하면 단순화할 수 있습니다.

요즘 내 코드에는 if 문이 거의 없습니다. 다른 개발자가 내 코드를 더 쉽게 이해할 수 있도록 거의 사용하지 않습니다.

4. 스위치와 작별하세요

저도 스위치를 별로 안 좋아하는데, 기능적인 글쓰기 방식을 찾고 있어요.

저는 또한 swtich 대신 Ramda의 cond 연산자를 사용하는 것을 좋아합니다.

5. 걱정하지 마세요

네, 맞습니다! 우리는 이것을 완전히 제거할 수도 있습니다.

Functional JavaScript를 사용하면 귀찮은 this의 사용을 완전히 버릴 수 있습니다.
이제 데이터와 함수만 있고 심지어 데이터도 함수의 특별한 표현일 뿐이므로 더 이상 필요하지 않습니다. 나는 객체를 함수형 언어의 상태와 함수로 이해하기 시작했습니다. OOP처럼 상태나 함수를 객체에 바인딩할 필요도 없습니다.

객체 지향 설계는 필요하지 않습니다

지금 돌이켜보면 표면 객체 프로그래밍이 가져온 복잡성은 정말 불필요하다는 것을 알았습니다. 기능적 언어를 사용하여 동일한 기능을 구현하고 동일한 작업을 수행할 수 있습니다. 게다가 복잡한 객체를 전달할 필요가 없기 때문에 코드가 더 가벼워졌습니다. 데이터와 함수만 있고 함수는 객체에 바인딩되지 않기 때문에 재사용이 더 쉽습니다. 전통적인 프로토타입 상속이 가져오는 모든 문제에 대해 더 이상 걱정할 필요가 없습니다.

JavaScript에 대한 비공개, 공개, 내부 또는 보호된 액세스 컨트롤러가 없다는 것은 더 이상 문제가 되지 않습니다. 액세스 컨트롤러는 객체 지향 프로그래밍의 도입으로 인한 문제를 해결하도록 설계되었습니다. 기능적 JavaScript에서는 이러한 문제가 더 이상 존재하지 않습니다.

요약

내 코드는 이제 완전히 달라 보입니다. 여기에는 다양한 ES6 모듈로 만든 많은 순수 기능이 포함되어 있습니다. 이러한 함수를 사용하여 보다 복잡한 함수를 구축할 수 있습니다. 많은 함수는 매우 간단한 한 줄 람다 표현식입니다.

이제 소프트웨어에 대한 나의 생각이 바뀌었습니다. 입력은 데이터 스트림이고, 프로그램은 데이터 스트림에서 작동하여 데이터에 대한 다양한 작업을 수행한 다음 새 데이터를 반환합니다.

기능적 디자인이 프로그래밍 언어에 미치는 영향은 어디에나 있으며 C#의 LINQ가 가장 좋은 예입니다. 마찬가지로 Java 8에는 함수형 언어 기능도 도입되었습니다.