웹 프런트 엔드 주 자바 스크립트 일반적인 안티 패턴, 서문 : 안티 패턴이 그 같은 실수를 말하고, 디자인 패턴과 비효율적 인 반복의 일반적인 문제를 설계하는 무능력을 의미합니다. 이 문서에서는 일반적인 자바 스크립트 안티 패턴뿐만 아니라이를 피하기 위해 몇 가지 방법을.
하드
하드 코딩 ( 하드 코딩) 문자열, 숫자, 날짜는 ...... 당신은 모든 죽은 사람들이 일을 죽을 것이다 쓰기 쓸 수 있습니다. 이것은 또한 여성과 어린이를 포함한 안티 패턴 있지만, 가장 널리 사용되는 안티 패턴이다. 가장 일반적으로 하드 코딩 아마 제대로 만 컴퓨터에서 실행 될 수 실행할 수있는 특정 시스템이나 환경에 대한 코드를 의미 네이티브 코드 (플랫폼 관련), 그것은 윈도우에서만 할 수있다 실행에서.
예를 들어,에 NPM 스크립트 죽은 스크립트 경로 / 사용자 / harttle / 빈 / fis3를 작성 , 그들은 단순히 그것 때문에 그렇게 될 수있다, 그 이유는 매우 어려운를 설치할 수 있으며 중복을 피하기 위해 설치 될 수있다. 어떤 경우에는, 모든 동료가 물어 당신에게 올 수 있습니다 "왜 불평 내가 여기." 다른 모든 외부 종속성 (예 힘내 같은) 로컬 구성 파일 버전 제어에서 배치 및 제거 될 수 있으므로이를 간주 될 수 실패하면 특정 버전 요구 패키지 록을 사용할 수있을 경우 상기 용액 의존성 관리에 넣어이다.
예를 들어,에서 CLI 도구 ~ / .cache 또는 경로 분리 또는 \\ /, 특수 폴더를 죽음 / tmp 디렉토리를 작성합니다. 이러한 문자열은 일반적으로 얻어 질 수 Node.js를 예처럼 사용 os.homedir, os.tmpdir, path.sep 같은 내장 모듈 (또는 다른 런타임 API).
코드를 반복
반복 코드 ( 복제)는 비즈니스 코드에서 특히 일반적이다, 거의 모든 사업의 안정성을 유지의 원래 의도. 예를 들어 페이지가 멋진 검색 상자를 필요로하고 페이지 B는 정확히 하나가있다. 그리고 프로그래머 형제 (직접 복사가 약간 단어에 의해 방해 될 경우) 어려운 선택에 직면
- B 사본, 방법 A를 변경하려면
- 검색 창에서 B는 C, B를 복원하고,이 기준 코드를한다.
시간 제약이 나쁜 변경하거나 인해, 초기 작품을 떠나고 싶어 인해 B의 필요 (PM을? : A B 당신이이 질문에 나쁜 대답은 어디에서 처음 건너 뛰고, 더 복잡 할 수 있습니다 이유) 책임을, 몇 가지 생각이 (2)를 통해 프로그램을하기로 결정 후.
이 시점에서 모든 이야기는 아마도 널리 사용되는 반복 코드에 대한 이유이다, 매우 자연스럽고 매우 부드럽게합니다. 이 이야기는 질문에 대한 몇 가지 포인트가 있습니다 :
- 재사용을 고려하지 않는 B의 잘못된 설명을 변경하는 B 쉽습니다. 이 유지 보수를 인수하기로 결정하지 않는 한 그런 다음, 코드 B를 재사용해서는 안된다.
- 저자는 B 테스트, 테스터 회귀 테스트 B 페이지를 작성했습니다 있는지 여부 : 나쁜 프로그래머 형제를 변경하는 것보다 B의 책임?
- 시간은 필요하지 자신을 설득하는 이유로, 안티 패턴으로 이어질하지 않는 실행 중입니다. 우아함을 달성하기 위해 단기 계획도 있습니다.
용액은 추출하는 코드 B 재개발이 검색 창 어셈블리 C를 형성한다 페이지를 사용. 동시에 저자는 또한 C에 B가 통합 유지 보수를 마이그레이션 촉구를 포함하여, 미래의 주니어 파트너를 사용할 수 있습니다.
거짓 AMD
모듈은 별도의 모듈로 분리하는 소프트웨어의 기능을 의미, 각 모듈은 기능의 완전한 파괴를 포함하는 방법. 에서 자바 스크립트는 별도로 절단 상황에 맞는 스크립트에 고유 한 재사용 가능한 코드를 의미한다.
때문에 원래의 페이지 스크립트와 자바 스크립트, 문법의 전역에 많은 참조뿐만 아니라 글로벌 변수에 따라 많은 사례가있다. $의 JQuery와 예제, BOM은 var에 정의 된 변수를 생략 창을 제공합니다. AMD는 자바 스크립트 커뮤니티 이전 모듈 사양입니다. 이 문제는 여기에있다, 신사의 계약입니다. 가짜 AMD 모듈을 작성하는 수많은 방법이 있습니다 :
- 아니 반환 값이 없습니다. 네, 부작용에있다.
- 직접 정의해야합니다. 오른쪽, 즉시 실행하는 것입니다.
- 부작용. 수정 창 또는 다른 모듈의 정적 속성과 같은 다른 공유 변수를.
- 동시성 문제. 알 수없는 종속 쉽게 동시성 문제로 이어집니다.
전체적인 부작용의 단점을 거의 모든 전역 변수를 정확히 동일한 글로벌 변수에 영향을 실행 로직은 쉽게 이해되지 않고 암시 적 결합 관계, 기록 된 테스트가 곤란. 구체적인 예를 아래 :
| // 파일 : login.js () {( "로그인"함수를 정의한 페치 ( '/ 계정 / 로그인'). 다음 (X => { window.login = TRUE }) }) 요구 ([ '로그인']) |
AMD 모듈 및 <script>에서 직접 물품 차이가보다 정밀하게 제어 할 수없는 (requirejs 구현 비동기 없음). 그것은 어떤 인터페이스를 반환하지 않았습니다 때문에, (예를 들어, 로그 오프 후 다시 로그인 달성하기 위해) 다른 모듈에서 사용할 수 없습니다. 또한이 모듈 동시성 문제 (경쟁 조건)의 존재 : 사용 터치의 서명 여부를 결정 window.login.
이 솔루션에 외부 기호 실행을 제어하고 결과를 얻을, 그것을 추상적 모듈을 배치하는 것입니다. 모듈러 좋은 프로젝트에서 모두 최종 상태 생성 APP 엔트리는 모듈 사이의 공유 상태에 가장 가까운 공통 조상 당겨진다.
| () {(함수를 정의 ( '/ 계정 / 로그인')을 가져 오기를 돌려주는 그 때는 (() => TRUE) .catch (E => { console.error (E) false를 반환 } }) |
참고 확장
메모 의도는 독자 코드의 의도에 대한 이해를 제공하는 것입니다,하지만 실제로는 그 반대 일 수도있다. 예를 들어, 직접 수명 :
| 휴대 전화의 // 판사 바이 버전보다 15 경우 (navigator.userAgent.match (/ 크롬 (\ D +)) [1] <15) { // ... } |
이 단락을 읽을 때 하하, 나는 위의 댓글이 성공적으로이 시간을 소비 있다고 생각합니다. 처음하는 경우에는 의견이 믿을 수 있습니다 볼 수 있지만, 실제 프로젝트는이 상태로 대부분의 의견이다. 코드는 항상 코드를 유지하는 것이 일반적으로 더 이상 사람 외에, 유지 보수 메모를 유지하기 위해 기억하지 않기 때문에. 라는 이름의 변수보다는 C 언어 프로그램의 후유증도 아주 나쁜 가르침 "장 주석이 쓴".
다음과 같이 맑은 용액 댓글을 배치 할 논리를 사용하는 것입니다, 예제 코드를 재 작성 :
| 경우 (isHttpsSupported ()) { // 기능 + 이름을 추출하여, 의견을 추가 피하기 위해 } () {isHttpsSupported를 작동 navigator.userAgent.match 리턴 (/ 크롬 (\ D +)) [1] <15 } |
기능 - 확장
"보통"전역 변수와 함수 확장 알고리즘 클래스 후유증 생각합니다. 하지만 실제로는 다른 복잡한 비즈니스 시나리오 및 알고리즘, 전자는 개념과 작동 및 마무리를 설명하기보다 필요가있다. 가장 효과적인 방법의 비즈니스 로직을 마무리보다 변수 이름을 추출하는 수단 (물론, 해당 폐쇄 또는 물체가).
그러나 실제 비즈니스 유지 보수, 합리적 쉽지 않다 남아있다. 당신이 비즈니스 로직을 추가 할 수 수십 번을 같은 파일을 입력하면, 함수는 걸레 바인딩 같은 길고 악취 될 것입니다 :
| SubmitForm에 함수 () { var username = $('form input#username').val() if (username === 'harttle') { username = 'God' } else { username = 'Mortal' if ($('form input#words').val().indexOf('harttle')) { username = 'prophet' } } $('form input#username').val(username) $('form').submit() } |
这只是用来示例，十几行还远远没有达到“又臭又长”的地步。 但已经可以看到各种目的的修改让 submitForm() 的职责远不止提交一个表单。 一个可能的重构方案是这样的：
| function submitForm() { normalize() $('form').submit() } function normalize() { var username = parseUsername( $('form input#username').val(), $('form input#words').val() ) $('form input#username').val(username) } function parseUsername(username, words) if (username === 'harttle') { return 'God' } return words.indexOf('harttle') ? 'prophet' : 'Mortal' } |
在重构后的版本中，我们把原始输入解析、数据归一化等操作分离到了不同的函数， 这些抽离不仅让 submitForm() 更容易理解，也让进一步扩展业务更为方便。 比如在 normalize() 方法中对 input#password 字段也进行检查， 比如新增一个 parseWords() 方法对 input#words 字段进行解析等等。
总结
常见的反模式还有许多，比如 == 和 != 的使用；扩展原生对象；还有 Promise 相关的 等等。