인간이 읽을 수있는 코드 작성의 중요성-JS 튜토리얼-php.cn

The Importance of Writing Code That Humans Can Read 키 포인트

영리성 먼저 : 고도로 읽기 쉬운 코드가 유지 관리 및 협업을 향상시키고 이해하기 쉬운 코드를 작성하는 것이 중요합니다. 기능 및 파일 관리 :

기능을 사용하여 재사용 가능한 코드를 캡슐화하고 대형 파일을 더 작고 관리하기 쉬운 부품으로 분할하여 탐색 및 이해를 단순화합니다.

> 기능 및 변수에 대한 명확하고 설명적인 이름을 선택하여 가독성을 향상시키고 추가 의견의 필요성을 줄입니다. 과잉 최적화를 피하십시오 :
신중한 의견 : 주석을 사용하여 "해야 할 일"이 아니라 "왜"를 설명하고, 주석을 최신 상태로 유지하여 비각적인 코드 논리를 이해하는 데 도움이됩니다.
이 기사는 Matt Burnett, Simon Codrington 및 Nilson Jacques에 의해 검토되었습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewer에게 감사합니다! 코드를 다시 보지 않고 한 번에 한 번에 한 번에 프로젝트를 완료 한 적이 있습니까? 나도 나도 오래된 프로젝트를 수행 할 때 코드가 어떻게 작동하는지 알아내는 데 시간을 거의 또는 전혀 소비하지 않을 수 있습니다. 읽기 가능한 코드는 제품을 유지 관리하고 귀하와 동료 또는 공동 작업자를 만족시키는 데 필수적입니다. 읽기 어려운 코드의 과장된 예는 JS1K 경쟁에서 찾을 수 있으며, 1024 자 이하의 최고의 JavaScript 애플리케이션과 JSF*CK (NSFW)를 작성하는 것을 목표로합니다. 6 개의 다른 문자 만 사용하여 JavaScript 코드를 작성하는 심오한 프로그래밍 스타일입니다. 이 사이트에서 코드를 확인하면 무슨 일이 일어나고 있는지 궁금해 할 것입니다. 이와 같은 코드를 작성하고 몇 달 후에 오류를 고치려고한다고 상상해보십시오.

인터넷을 정기적으로 탐색하거나 인터페이스를 구축하는 경우 간단하고 작은 형태를 종료하는 것보다 크고 부피가 큰 형태를 종료하는 것이 더 쉽다는 것을 알 수 있습니다. 코드도 마찬가지입니다. 사람들은 읽고 사용하기 쉬운 것으로 간주 될 때 사용하는 것을 선호 할 수 있습니다. 적어도 컴퓨터가 좌절하지 못하게 막을 수 있습니다.

이 기사에서는 코드를보다 쉽게 읽을 수있는 팁과 요령뿐만 아니라 피하기위한 함정을 탐색 할 것입니다. 코드 세분화
형태 유사성으로 지속되면, 형태는 때때로 부분으로 나뉘어 지므로 덜 어렵습니다. 코드는 동일하게 수행 할 수 있습니다. 그것을 섹션으로 나누어 독자들은 정글을 탐색하기 위해 고군분투하는 대신 그들과 관련된 섹션으로 점프 할 수 있습니다.
크로스 파일 수년 동안, 우리는 네트워크의 모든 종류를 최적화 해 왔습니다. JavaScript 파일도 예외는 아닙니다. HTTP/2를 미치기 위해 생각하면서 우리는 스크립트를 하나로 결합하여 HTTP 요청을 저장합니다. 오늘날 우리는 원하는대로 일하고 Gulp 또는 Grunt와 같은 작업 주자를 사용하여 파일을 처리 할 수 있습니다. 우리가 좋아하는 방식을 프로그래밍하고 최적화 (예 : 연결과 같은)를 도구에 남겨 둘 수 있다고 말하는 것이 안전합니다.

함수 함수를 사용하면 재사용 가능한 코드 블록을 만들 수 있습니다. 일반적으로 함수의 내용은 들여 쓰기되므로 함수의 시작 및 종료 위치를 쉽게 볼 수 있습니다. 좋은 습관은 기능을 작게 유지하는 것입니다. 함수의 이름을 올바르게 이름을 지정할 때 함수가 호출 될 때 발생하는 일이 어떻게 발생하는지 이해하기 쉽습니다. 우리는 나중에 명명 컨벤션을 소개 할 것입니다.

// 从 API 加载用户数据
var getUsersRequest = new XMLHttpRequest();
getUsersRequest.open('GET', '/api/users', true);
getUsersRequest.addEventListener('load', function() {
    // 对用户执行某些操作
});

getUsersRequest.send();

//---------------------------------------------------
// 不同的功能从这里开始。也许
// 这是一个分成文件的时机。
//---------------------------------------------------

// 从 API 加载帖子数据
var getPostsRequest = new XMLHttpRequest();
getPostsRequest.open('GET', '/api/posts', true);
getPostsRequest.addEventListener('load', function() {
    // 对帖子执行某些操作
});

getPostsRequest.send();

로그인 후 복사

위의 코드를 단순화 할 수 있습니다. 이 두 기능은 거의 정확히 동일합니까? 우리는 "자신을 반복하지 마십시오"(건조한) 원칙을 적용 할 수 있습니다. 이것은 혼란을 방지합니다.

게시물 요청을 통해 새 사용자를 만들려면 어떻게해야합니까? 이 시점에서 한 가지 옵션은 함수에 옵션 매개 변수를 추가하여 기능에 새로운 논리를 도입하여 기능이 되기에는 너무 복잡합니다. 또 다른 옵션은 게시물 요청에 대한 새 기능을 작성하는 것입니다. 이는 코드 복제를 유발합니다.

객체 지향 프로그래밍을 통해 둘 다의 장점을 얻을 수있어 유지 관리 가능성을 유지하면서 구성 가능한 단일 사용 객체를 만들 수 있습니다.

참고 : 객체 지향 JavaScript의 초보자가 필요한 경우이 비디오를 추천합니다. 객체 지향 JavaScript에 대한 권위있는 안내서 <🎜 🎜 🎜 🎜 🎜>. 객체 지향 프로그래밍 <🎜 🎜> <,> 컨텍스트 인식 함수 세트 인 객체 (일반적으로 클래스)를 고려하십시오. 객체는 전용 파일을 넣는 데 이상적입니다. 이 예에서는 xmlhttprequest 용 기본 래퍼를 만들 수 있습니다.

// 从 API 加载用户数据
function getUsers(callback) {
    var getUsersRequest = new XMLHttpRequest();
    getUsersRequest.open('GET', '/api/users', true);
    getUsersRequest.addEventListener('load', function() {
        callback(JSON.parse(getUsersRequest.responseText));
    });

    getUsersRequest.send();
}

// 从 API 加载帖子数据
function getPosts(callback) {
    var getPostsRequest = new XMLHttpRequest();
    getPostsRequest.open('GET', '/api/posts', true);
    getPostsRequest.addEventListener('load', function() {
        callback(JSON.parse(getPostsRequest.responseText));
    });

    getPostsRequest.send();
}

// 由于命名正确，因此无需阅读实际函数即可轻松理解此代码
// getUsers(function(users) {
//     // 对用户执行某些操作
// });
// getPosts(function(posts) {
//     // 对帖子执行某些操作
// });

로그인 후 복사

httprequest.js <🎜 🎜>

~~app.js~~