유지보수가 가능한 JS 코드를 쓰는 방법을 가르쳐 드리겠습니다.

서비스 가능 코드

유지보수 가능한 코드는 다음과 같은 몇 가지 특징을 따라야 한다.
1. 이해성 - 다른 사람들은 코드를 인수하고 그 의도와 일반적인 경로를 이해할 수 있다.
2. 직관성 - 코드에 있는 것을 보면 그 조작 과정이 아무리 복잡해도 알 수 있다.
3. 적응성 - 코드는 데이터 변화가 완전히 다시 쓰기를 요구하지 않는 방법으로 작성한다.
4. 확장성 - 코드 구조상 미래에 핵심 기능을 확장할 수 있도록 고려되었다.
5. 디버깅 가능 - 오류가 있을 때 코드는 충분한 정보를 제공하여 문제의 소재를 신속하게 찾아낼 수 있다.

코드 규약

코드를 유지보수할 수 있는 간단한 방법은 자바스크립트 코드의 쓰기 약정을 형성하는 것이다.자바스크립트의 적응성 때문에 코드 약정은 매우 중요하다.다음 소절은 코드 약정의 개론을 토론한다.

1. 가독성

코드를 유지할 수 있게 하려면 우선 읽을 수 있어야 한다.읽을 수 있는 대부분의 내용은 코드의 축소와 관련이 있다. 코드의 정연한 축소는 코드 블록이 그 기능에 속하는 것을 한눈에 알 수 있다. 흔히 볼 수 있는 축소 크기는 4개의 공백이며, 현재 대부분의 편집기도 포맷된 코드를 지원한다.가독성은 다른 한편으로는 주석이다. 일반적으로 다음과 같은 부분이 있다.

함수와 방법 - 모든 방법이나 주석은 그 목적을 설명하고 임무를 완성하는 데 사용할 수 있는 알고리즘을 설명하는 주석을 포함해야 한다.

큰 코드 - 단일 작업을 완성하는 데 사용되는 여러 줄 코드는 앞에 임무를 설명하는 주석을 놓아야 한다.

복잡한 알고리즘 - 독특한 방식으로 어떤 문제를 해결하고 주석을 달아 어떻게 하는지 설명한다.

Hack- 브라우저 호환성 처리.

2. 변수와 함수의 이름

평상시 개발에서 가장 골치 아픈 일은 명명뿐이다.class의 명명이든 변수와 방법의 명명이든 간에 때로는 번역 소프트웨어로 명명을 도와야 한다.변수와 함수에 적당히 이름을 짓는 것은 코드의 이해성과 유지보수성을 높이는 데 매우 중요하다.명명 규칙은 일반적으로 다음과 같습니다.

변수명은 카나person 같은 명사여야 한다.

함수 이름은 getName () 과 같은 동사로 시작해야 합니다.

부울 유형을 반환하는 함수는 isEnable()과 같이 is로 시작합니다.

상수는 모든 대문자로 표시해야 합니다. 예를 들어 MAX_LENGTH.

3. 변수 유형 투명도

JavaScript에서 변수는 느슨한 유형이기 때문에 변수에 포함된 데이터 형식을 잊어버리기 쉽다.적당한 명명 방식은 어느 정도에 이 문제를 완화시킬 수 있지만 모든 상황에서 보기에는 부족하다. 그리고 세 가지 변수 데이터로 데이터 유형을 나타내는 방식도 있다.
3.3.1 초기화
변수를 정의한 후에 값을 초기화해서 앞으로 어떻게 응용해야 할지 암시해야 한다.

//  
var found=false; // 
var count=-1; // 
var name=""; // 
var person=null; // 

3.3.2 헝가리 표기법으로 변수 유형 지정
헝가리 표기법은 변수 이름 앞에 하나 이상의 문자를 붙여서 데이터 형식을 표시한다.js에서 가장 전통적인 헝가리 표기법은 하나의 문자로 기본 유형을 나타내는 것이다. 0-대상, s-문자열, i-정수, f-부동점수, b-블 유형이다.

//  
var bFound // 
var iCount; // 
var sName; // 
var oPerson; // 

헝가리 명명법의 장점은 함수 매개 변수도 마찬가지로 사용할 수 있지만, 코드를 어느 정도 읽게 하는 단점이 있다.
3.3.3 유형 주석 사용
마지막으로 변수 유형을 지정하는 방법은 유형 주석을 사용하는 것이다.형식 주석은 변수 이름 오른쪽에 있지만 초기화 앞에 있습니다.

//  
var found /*Boolean*/ = false;
var count /*int*/ = 10;
var name /*String*/ = "Tom";
var person /*Object*/ = null;

단점: 여러 줄 주석이 코드 블록과 충돌합니다.
이 세 가지 흔히 볼 수 있는 변수 데이터 유형을 지정하는 방법은 각각 장점과 열세가 있기 때문에 자신의 프로젝트에 따라 평가하고 사용하거나 다음 TypeScript를 사용하는 것을 배울 수 있다.

느슨한 결합

응용의 어떤 부분이 다른 부분에 지나치게 의존하기만 하면 코드는 간혹 너무 빡빡해서 유지하기 어렵다.웹 응용 기술은 여러 가지 상황이 결합을 너무 팽팽하게 하기 때문에 이러한 상황을 피하고 가능한 한 약한 결합 코드를 유지해야 한다.

1. html/JavaScript 결합 해제

html에 직접적으로 있는javaScript는 내부 코드를 포함하는 요소를 사용하거나 HTML 속성을 사용하여 이벤트 처리 순서를 분배하는 것은 너무 밀접한 결합이다.
아래의 코드를 보십시오

<button onclick="doSomeThing()">Click Me</button>

이 예에서 DoSomeThing () 함수를 사용하기 전에 단추를 누르면 js 오류가 발생할 수 있습니다. 단추 행위에 대한 변경 사항이 HTML과 js에 동시에 닿아야 하기 때문에 유지보수성에 영향을 줍니다.
같은 js에 대량의 HTML 포함

// 将HTML紧密耦合到js中
function insertMessage(){
  document.getElementById('container').innerHTML='<div>Hello World</div>'
}

이 코드의 방법은 동적으로 코드 블록을 만들어 페이지에 삽입할 수 있으며, 코드가 오류를 찾기 어려울 때가 많다.
HTML과 JavaScript를 결합하면 디버깅 과정에서 시간을 절약하고 오류의 출처를 쉽게 확인할 수 있으며 유지보수의 어려움을 줄일 수 있습니다. 동작 변경은 JavaScript 파일에서만 할 수 있고 태그 변경은 렌더링 파일에서만 할 수 있습니다.

2.解耦css/JavaScript

또 다른 웹 층은 css로 주로 페이지의 표시를 책임진다.JavaScript와 CSS도 매우 밀접한 관계를 가진다. 그들은 모두 HTML 위의 차원이기 때문에 자주 함께 사용된다.그러나 HTML과 JavaScript의 경우와 마찬가지로 CSS와 JavaScript도 지나치게 밀접하게 결합될 수 있다.가장 흔히 볼 수 있는 긴밀한 결합의 예는 다음과 같이 JavaScript를 사용하여 특정 스타일을 변경하는 것입니다.

//CSS 对 JavaScript 的紧密耦合
element.style.color = "red"; 
element.style.backgroundColor = "blue";

css 스타일을 직접 수정하는 경우, 우리는 요소 라벨class 클래스 이름을 수정하여 스타일을 제어하는 것이 더욱 편리합니다.

3.解耦应用逻辑/事件处理程序

모든 웹 응용 프로그램은 일반적으로 상당히 많은 사건 처리 프로그램을 가지고 무수한 다른 사건을 감청하고 있다.그러나 이벤트 처리 프로그램에서 응용 논리를 꼼꼼히 분리하는 경우는 드물다.다음 예를 참조하십시오.

function handleKeyPress(event) {
        event = EventUtil.getEvent(event);
        if (event.keyCode == 13) {
            var target = EventUtil.getTarget(event);
            var value = 5 * parseInt(target.value);
            if (value > 10) {
                document.getElementById("error-msg").style.display = "block";
            }
        }
    }

이 이벤트 처리 프로그램은 응용 논리를 포함하는 것 외에 이벤트 처리도 진행했다.이런 방식의 문제는 이중성이 있다.우선, 이벤트를 통과하는 것 외에 응용 논리를 실행할 방법이 없기 때문에 디버깅을 어렵게 한다.만약 예상한 결과가 발생하지 않으면 어떻게 합니까?이벤트 처리 프로그램이 호출되지 않았거나 응용 논리 실패를 가리키는 것입니까?그 다음에 만약에 후속 사건이 같은 응용 논리를 일으킨다면 기능 코드를 복제하거나 코드를 단독 함수에 추출해야 한다.어떤 방식이든지 실제보다 더 많은 변화를 해야 한다.
비교적 좋은 방법은 응용 논리와 이벤트 처리 프로그램을 분리하여 각자 물건을 처리하는 것이다.이벤트 처리 프로그램은 이벤트 대상에서 관련 정보를 추출하여 이 정보를 처리 응용 논리의 어떤 방법으로 전송해야 한다.예를 들어, 앞의 코드는 다음과 같이 다시 쓸 수 있습니다.

 function validateValue(value) {
        value = 5 * parseInt(value);
        if (value > 10) {
            document.getElementById("error-msg").style.display = "block";
        }
    }

    function handleKeyPress(event) {
        event = EventUtil.getEvent(event);
        if (event.keyCode == 13) {
            var target = EventUtil.getTarget(event);
            validateValue(target.value);
        }
    }

응용 프로그램과 비즈니스 논리 간의 느슨한 결합의 몇 가지 원칙:

이벤트 대상을 다른 방법으로 전송하지 마십시오.이벤트 대상에 필요한 데이터만 전송하기;

응용 차원에서 할 수 있는 모든 동작은 이벤트 처리 프로그램을 실행하지 않는 상황에서 할 수 있어야 한다.

모든 이벤트 처리 프로그램은 이벤트를 처리한 후에 처리를 응용 논리에 전달해야 한다.

이 몇 가지는 어떤 코드에서도 매우 큰 유지보수성 개선을 얻을 수 있을 뿐만 아니라, 진일보한 테스트와 개발을 위해 많은 가능성을 만들어 낼 수 있다는 것을 명심해라.

编程实践

유지 보수 가능한 JavaScript를 쓰는 것은 코드를 포맷하는 방법에 관한 것이 아니다.그것은 또 코드가 무엇을 하는지에 관한 문제이기도 하다.기업 환경에서 만들어진 웹 응용 프로그램은 왕왕 대량의 인원이 함께 창작한다.이러한 상황에서 목표는 모든 사람이 사용하는 브라우저 환경이 일치하고 변하지 않는 규칙을 확보하는 것이다.따라서 다음과 같은 프로그래밍 실천을 견지하는 것이 가장 좋다.

1.尊重对象所有权

JavaScript의 동적 특성은 거의 모든 것을 언제든지 수정할 수 있습니다.아마도 기업 환경에서 가장 중요한 프로그래밍 실천은 대상의 소유권을 존중하는 것이다. 이것은 당신이 당신의 대상에 속하지 않는 것을 수정할 수 없다는 뜻이다.간단하게 말하면, 만약 당신이 어떤 대상, 그 대상, 또는 그 방법을 만들거나 유지하는 것을 책임지지 않는다면, 그것들을 수정할 수 없다.보다 구체적으로 말하자면

실례나 원형에 속성을 추가하지 마십시오.

실례나 원형에 방법을 추가하지 마십시오.

존재하는 방법을 재정의하지 마십시오.

2.避免全局变量

대상의 소유권을 존중하는 것과 밀접한 관계를 가진 것은 가능한 한 전역 변수와 함수를 피하는 것이다.이것 또한 스크립트가 실행되는 일치하고 유지 가능한 환경을 만드는 데 관계된다.최대 하나의 전역 변수를 만들어서 다른 대상과 함수를 존재하게 합니다.다음 예를 참조하십시오.

// 两个全局量――避免！！
var name = "Nicholas"; 
function sayName(){ 
 alert(name); 
} 

이 코드는 변수name과 함수sayName () 두 개의 전역량을 포함합니다.다음 예와 같이 두 객체가 포함된 객체를 만들 수 있습니다.

// 一个全局量――推荐
var MyApplication = { 
 name: "Nicholas", 
 sayName: function(){ 
 alert(this.name); 
 } 
}; 

이 다시 쓰는 코드는 단일한 전역 대상인 My 응용 프로그램을 도입했습니다.name과sayName () 을 모두 추가합니다.이렇게 하면 이전 코드에 존재하는 몇 가지 문제를 없앴다.우선, 변수name이 윈도우를 덮어씁니다.name 속성, 다른 기능과 충돌할 수 있습니다.그 다음으로 기능 작용역 간의 혼동을 없애는 데 도움이 된다.y Application을 호출합니다.sayName () 은 논리적으로 코드의 모든 문제를 My Application을 정의하는 코드를 검사하여 확인할 수 있음을 암시한다.

3.使用常量

다음 값 유형은 상수를 사용하여 정의하는 데 적합합니다.

중복값 - 여러 곳에서 사용하는 모든 값은 상량으로 추출해야 한다.이것은 한 값이 변하고 다른 값이 변하지 않을 때 발생하는 오류를 제한한다.여기에는 CSS 클래스 이름도 포함됩니다.

사용자 인터페이스 문자열 - 사용자에게 표시되는 모든 문자열은 국제화를 편리하게 하기 위해 추출되어야 한다.

URLs - 웹 응용 프로그램에서 자원 위치가 쉽게 변경될 수 있으므로 공공장소에 모든 URL을 저장하는 것을 추천합니다.

임의로 바뀔 수 있는 값 - 글자 양의 값을 사용할 때마다 미래에 이 값이 바뀔지 물어봐야 한다.만약 답이'예'라면, 이 값은 반드시 상량으로 추출되어야 한다.

이상은 유지보수 가능한 JS 코드의 상세한 내용을 작성하는 방법을 가르쳐 드리겠습니다. 유지보수 가능한 JS 코드를 작성하는 것에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!