키 포인트
영리성 먼저 : 고도로 읽기 쉬운 코드가 유지 관리 및 협업을 향상시키고 이해하기 쉬운 코드를 작성하는 것이 중요합니다. 기능 및 파일 관리 :
기능을 사용하여 재사용 가능한 코드를 캡슐화하고 대형 파일을 더 작고 관리하기 쉬운 부품으로 분할하여 탐색 및 이해를 단순화합니다.함수 함수를 사용하면 재사용 가능한 코드 블록을 만들 수 있습니다. 일반적으로 함수의 내용은 들여 쓰기되므로 함수의 시작 및 종료 위치를 쉽게 볼 수 있습니다. 좋은 습관은 기능을 작게 유지하는 것입니다. 함수의 이름을 올바르게 이름을 지정할 때 함수가 호출 될 때 발생하는 일이 어떻게 발생하는지 이해하기 쉽습니다. 우리는 나중에 명명 컨벤션을 소개 할 것입니다.
<code class="language-javascript">// 从 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();</code>
<code class="language-javascript">// 从 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) { // // 对帖子执行某些操作 // });</code>
httprequest.js
app.js
<code class="language-javascript">function fetchJson(url, callback) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.addEventListener('load', function() { callback(JSON.parse(request.responseText)); }); request.send(); } // 下面的代码仍然很容易理解 // 无需阅读上面的函数 fetchJson('/api/users', function(users) { // 对用户执行某些操作 }); fetchJson('/api/posts', function(posts) { // 对帖子执行某些操作 });</code>
디자인 패턴은 OOP를 사용할 때 큰 도움이됩니다. 그들은 스스로 가독성을 향상 시키지는 않지만 일관성이있을 것입니다!
이름
<code class="language-javascript">// 从 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();</code>변수 이름의 경우 역전 된 피라미드 방법을 적용하십시오. 주제는 앞에 놓여지고 속성은 뒷면에 배치됩니다.
<code class="language-javascript">// 从 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) { // // 对帖子执行某些操作 // });</code>
클래스는 일반적으로 대문자부터 시작하여 낙타 명명법을 사용합니다.
<code class="language-javascript">function fetchJson(url, callback) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.addEventListener('load', function() { callback(JSON.parse(request.responseText)); }); request.send(); } // 下面的代码仍然很容易理解 // 无需阅读上面的函数 fetchJson('/api/users', function(users) { // 对用户执行某些操作 }); fetchJson('/api/posts', function(posts) { // 对帖子执行某些操作 });</code>
단일 라인 코드는 간결한 코드의 예입니다. 불행히도, 그들은 일반적으로 속임수 또는 모호한 구문에 의존합니다. 아래에 나와있는 중첩 된 3 원 운영자는 일반적인 예입니다. 간결하지만 정상 IF 문과 비교하여 그 효과를 이해하는 데 1 ~ 2 초가 걸릴 수도 있습니다. 구문 단축키에주의하십시오. <pre class="brush:php;toolbar:false"><code class="language-javascript">function HttpRequest(url) {
this.request = new XMLHttpRequest();
this.body = undefined;
this.method = HttpRequest.METHOD_GET;
this.url = url;
this.responseParser = undefined;
}
HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';
HttpRequest.prototype.setMethod = function(method) {
this.method = method;
return this;
};
HttpRequest.prototype.setBody = function(body) {
if (typeof body === 'object') {
body = JSON.stringify(body);
}
this.body = body;
return this;
};
HttpRequest.prototype.setResponseParser = function(responseParser) {
if (typeof responseParser !== 'function') return;
this.responseParser = responseParser;
return this;
};
HttpRequest.prototype.send = function(callback) {
this.request.addEventListener('load', function() {
if (this.responseParser) {
callback(this.responseParser(this.request.responseText));
} else {
callback(this.request.responseText);
}
}, false);
this.request.open(this.method, this.url, true);
this.request.send(this.body);
return this;
};</code></pre>
<p>
<op> 마이크로 최적화는 성능 최적화이며 일반적으로 거의 영향을 미치지 않습니다. 대부분의 경우, 이들은 저 성능에 해당하는 것만 큼 읽기 쉽지 않습니다. </op></p>
<h3>
<cript> JavaScript 컴파일러는 우리를 위해 코드를 최적화하는 데 매우 능숙하며 지속적으로 개선되고 있습니다. 최적화되지 않은 코드와 최적화 된 코드의 차이가 명백하지 않은 경우 (일반적으로 수천 또는 수백만 개의 작업 후) 읽기 쉬운 코드를 선택하는 것이 좋습니다. </cript>
</h3>
비 코드
<onic> 이것은 아이러니하지만 코드를 읽을 수있는 더 좋은 방법은 실행되지 않는 구문을 추가하는 것입니다. 비 코드라고합시다. <p>
</p> 공간
<every> 모든 개발자가 다른 개발자에게 제공하거나 대부분의 공간이 제거되는 특정 웹 사이트 - 코드에 대한 압축 코드를 확인했습니다. 처음으로 이것을 만나는 것은 매우 놀라운 일입니다. 디자인 및 타이포그래피와 같은 다른 시각 예술 분야에서 빈 공간은 채우는 것만 큼 중요합니다. 둘 사이의 섬세한 균형을 찾아야합니다. 이 균형에 대한 인식은 회사, 팀 및 개발자마다 다릅니다. 다행히도 <p>에 의해 일반적으로 인식되는 몇 가지 규칙이 있습니다.
</p>
<line> 라인 당 하나의 표현식,
<the> 계약 된 블록의 내용,
<s> 추가 라인 브레이크를 사용하여 코드 섹션을 분리 할 수 있습니다. <pre class="brush:php;toolbar:false"><code class="language-javascript">new HttpRequest('/users')
.setResponseParser(JSON.parse)
.send(function(users) {
// 对用户执行某些操作
});
new HttpRequest('/posts')
.setResponseParser(JSON.parse)
.send(function(posts) {
// 对帖子执行某些操作
});
// 创建一个新用户
new HttpRequest('/user')
.setMethod(HttpRequest.METHOD_POST)
.setBody({
name: 'Tim',
email: 'info@example.com'
})
.setResponseParser(JSON.parse)
.send(function(user) {
// 对新用户执行某些操作
});</code></pre>
</s><p>
<should> 다른 규칙은 함께 일하는 사람과 논의해야합니다. 동의하는 코드 스타일에 관계없이 일관성이 핵심입니다. </should></p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">function getApiUrl() { /* ... */ }
function setRequestMethod() { /* ... */ }
function findItemsById(n) { /* ... */ }
function hideSearchForm() { /* ... */ }</code></pre>
<p> 주석 </p>
공백과 같은 댓글은 코드에 대한 공간을 제공하고 코드에 세부 정보를 추가 할 수있는 좋은 방법이 될 수 있습니다. 표시 할 주석을 추가하십시오 : <h2>
</h2>
<arg> 욕설이 아닌 코드의 해석 및 논증,
<ol>는 해결 된 오류 또는 예외 및 사용 가능한 소스를 수정했습니다. <p>
</p>
<h3>
<es> 모든 수정 사항이 분명하지는 않습니다. 추가 정보를 추가하면 많은 것을 명확히 할 수 있습니다<pre class="brush:php;toolbar:false"><code class="language-javascript">// 从 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();</code></pre>
인라인 문서
객체 지향 소프트웨어를 작성할 때, 일반 주석과 같은 인라인 문서는 코드에 대한 호흡 공간을 제공 할 수 있습니다. 또한 속성 또는 방법의 목적과 세부 사항을 명확히하는 데 도움이됩니다. 많은 IDE가 프롬프트에 사용하고 생성 된 문서 도구도이를 사용합니다! 이유가 무엇이든, 문서를 작성하는 것은 훌륭한 연습입니다. <h3>
</h3>
콜백 문제 <p>
이벤트와 비동기 호출은 JavaScript의 강력한 기능이지만 일반적으로 코드를 읽기 어렵게 만듭니다. </p>
<ron> 비동기 호출은 일반적으로 콜백을 사용하여 제공됩니다. 때로는 순서대로 실행하거나 모든 비동기 호출이 준비되기를 기다리려고합니다. <pre class="brush:php;toolbar:false"><code class="language-javascript">// 从 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) {
// // 对帖子执行某些操作
// });</code></pre>
<h2>
<introduc> Promise Object는 두 문제를 해결하기 위해 ES2015 (ES6이라고도 함)에 도입되었습니다. 중첩 된 비동기 요청을 평평하게 할 수 있습니다. </introduc>
</h2>
<p>
<ed> 우리는 다른 코드를 도입했지만 올바르게 설명하기가 더 쉽습니다. Promise에 대한 자세한 내용은 여기를 참조하십시오. JavaScript는 비동기식이됩니다.
<es es> es6/es2015
<the> ES2015 사양을 이해하면이 기사의 모든 코드 예제가 구형 버전 (약속 개체 제외)임을 알 수 있습니다. ES6은 강력한 기능을 제공하지만 여전히 가독성과 관련된 몇 가지 문제가 있습니다. </the></es></ed></p>
<syn> Fat Arrow 구문은 부모의 범위에서 이것의 값을 상속하는 함수를 정의합니다. 적어도 그것이 설계된 이유입니다. 또한 정기적 인 기능을 정의하는 데 사용하려는 유혹이 있습니다. <p>
</p>
<the> 또 다른 예는 나머지 및 스프레드 구문입니다. <pre class="brush:php;toolbar:false"><code class="language-javascript">function fetchJson(url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.addEventListener('load', function() {
callback(JSON.parse(request.responseText));
});
request.send();
}
// 下面的代码仍然很容易理解
// 无需阅读上面的函数
fetchJson('/api/users', function(users) {
// 对用户执行某些操作
});
fetchJson('/api/posts', function(posts) {
// 对帖子执行某些操作
});</code></pre>
<p>
<the> 내 말은, ES2015 사양은 많은 유용하지만 모호하고 때로는 혼란스러운 구문을 소개하여 단일 라인 코드에서 쉽게 오용 할 수 있습니다. 이러한 기능이 사용되는 것을 막고 싶지 않습니다. 나는 그것들을 사용하도록 경고를 장려하고 싶습니다. </the></p>
<pre class="brush:php;toolbar:false"><code class="language-javascript">function HttpRequest(url) {
this.request = new XMLHttpRequest();
this.body = undefined;
this.method = HttpRequest.METHOD_GET;
this.url = url;
this.responseParser = undefined;
}
HttpRequest.METHOD_GET = 'GET';
HttpRequest.METHOD_POST = 'POST';
HttpRequest.prototype.setMethod = function(method) {
this.method = method;
return this;
};
HttpRequest.prototype.setBody = function(body) {
if (typeof body === 'object') {
body = JSON.stringify(body);
}
this.body = body;
return this;
};
HttpRequest.prototype.setResponseParser = function(responseParser) {
if (typeof responseParser !== 'function') return;
this.responseParser = responseParser;
return this;
};
HttpRequest.prototype.send = function(callback) {
this.request.addEventListener('load', function() {
if (this.responseParser) {
callback(this.responseParser(this.request.responseText));
} else {
callback(this.request.responseText);
}
}, false);
this.request.open(this.method, this.url, true);
this.request.send(this.body);
return this;
};</code></pre> 결론
<of> 프로젝트의 모든 단계에서 코드를 읽을 수 있고 유지 관리 할 수 있어야합니다. 파일 시스템에서 작은 구문 선택에 이르기까지 모든 것이 중요합니다. 특히 팀에서는 항상 모든 규칙을 시행하는 것은 어렵습니다. 코드 검토는 도움이 될 수 있지만 여전히 인적 오류의 여지가 있습니다. 다행히도이 작업을 수행하는 데 도움이되는 몇 가지 도구가 있습니다! <p>
</p>
Jshint- 코드가 오류가없는 상태로 유지하기위한 JavaScript 언어 검사기
관용 - 인기있는 코드 스타일 표준이지만 <h2>에서 벗어날 수 있습니다.
<ig> editorConfig - 편집자 전체에서 코드 스타일을 정의합니다
</ig>
</h2>
<code> 코드 품질 및 스타일 도구 외에도 코드를 쉽게 읽을 수있는 도구가 있습니다. 테마를 강조 표시하는 다른 구문을 시도하거나 최소 맵을 사용하여 스크립트의 하향식 개요 (원자, 브래킷)를보십시오. <p>
<think> 읽기 가능하고 유지 관리 가능한 코드를 작성하는 것에 대해 어떻게 생각하십니까? 아래의 의견에서 귀하의 생각을 듣고 싶습니다. </think></p>읽기 가능한 코드에 대한 <about> faqs
<be> 왜 코드가 인간을 위해 쉽게 읽을 수 있어야합니까?
<of> 코드의 가독성은 다음과 같은 이유로 중요합니다. 먼저 코드를 쉽게 이해하고 디버깅하고 유지할 수 있습니다. 코드를 읽을 수 있으면 다른 개발자가 공동 작업 환경에서 특히 중요한 코드의 역할을 이해하는 것이 더 쉽습니다. 둘째, 읽기 쉬운 코드가 정확할 가능성이 높습니다. 개발자가 코드를 쉽게 이해할 수 있다면 코드를 수정할 때 오류를 도입하지는 않습니다. 마지막으로 읽기 쉬운 코드는 테스트하기가 더 쉽습니다. 코드가 명확하고 간결한 경우 테스트해야 할 사항과 테스트 방법을 결정하는 것이 더 쉽습니다. <h3>
<ming> 프로그래밍 언어를 쉽게 읽을 수있는 것은 무엇입니까? </ming>
</h3>
<considered> 언어는 명확하고 간결한 구문이 있고 의미있는 식별자를 사용하며 코드의 효과를 설명하는 의견이 포함되어있는 언어는 읽기 쉬운 것으로 간주됩니다. Python 및 Ruby와 같은 고급 언어는 영어와 같은 구문을 사용하고 명확하고 설명적인 변수 이름을 허용하기 때문에 종종 읽기 쉬운 것으로 간주됩니다. 그러나 일관된 압입, 공간 사용 및 포괄적 인 주석과 같은 좋은 코딩 관행을 통해 C 또는 Java와 같은 저수준 언어의 가독성을 향상시킬 수도 있습니다. <p>
<function> 함수는 코드 양을 어떻게 줄입니까? </function></p>
함수는 개발자가 재사용 할 수있게함으로써 코드의 양을 크게 줄일 수 있습니다. 동일한 코드를 여러 번 쓰지 않고 함수를 한 번 작성한 다음 특정 작업을 수행해야 할 때 호출하십시오. 이로 인해 코드를 더 짧고 읽기 쉽게 읽을 수있을뿐만 아니라 코드를 더 쉽게 유지 관리하고 디버그 할 수 있습니다. 한 곳에서만 변경하면됩니다. <h3>
<difference> 기계 코드와 고급 언어의 차이점은 무엇입니까? </difference>
</h3>
<the> 머신 코드는 컴퓨터의 CPU (Computer의 중앙 프로세서)에서 직접 실행할 수있는 이진 코드로 구성된 최저 수준의 프로그래밍 언어입니다. 반면에 고급 언어는 인간 언어에 더 가깝고 실행하기 전에 컴파일러 또는 통역사에 의해 기계 코드로 변환해야합니다. 고급 언어는 종종 읽고 쓰기가 더 쉽고 하드웨어로 더 많은 추상화를 제공하여 다양한 유형의 기계간에 쉽게 포트 할 수 있습니다. <p>
<ers> 통역사와 컴파일러는 어떻게 작동합니까? </ers></p>
<comp> 통역사와 컴파일러는 고급 언어를 기계 코드로 변환하는 도구입니다. 통역사는 코드를 라인별로 번역하고 실행하여 대화식 인코딩 및 디버깅이 가능합니다. 그러나 코드를 컴파일하는 것보다 느리게 될 수 있습니다. 반면에 컴파일러는 실행 전에 전체 프로그램을 기계 코드로 변환하여 실행 속도를 높일 수 있습니다. 그러나 모든 코드 오류는 전체 프로그램이 컴파일 된 후에 만 발견 할 수 있습니다. <h3>
<bly> 어셈블리 언어는 무엇입니까? </bly>
</h3>
<is> 어셈블리 언어는 니모닉 코드를 사용하여 기계 코드 지침을 나타내는 저수준 프로그래밍 언어입니다. 각 어셈블리 언어는 특정 컴퓨터 아키텍처에 따라 다릅니다. 기계 코드보다 읽기가 더 쉽지만 여전히 고급 언어보다 읽고 쓰기가 더 어렵습니다. 그러나 하드웨어를 직접 제어 할 수 있으며 경우에 따라 매우 유용합니다. <p><the> 코드의 가독성을 향상시키는 방법은 무엇입니까? <h3>
<ways> 코드의 가독성을 향상시키는 몇 가지 방법이 있습니다. 이러한 방법에는 의미있는 변수 및 기능 이름을 사용하고 코드를 일관되게 들여 쓰기, 코드의 다른 부분을 공간으로 분리하고 코드의 역할을 설명하는 주석을 포함하는 것이 포함됩니다. 또한 사용중인 프로그래밍 언어의 컨벤션 및 모범 사례를 따르는 것이 중요합니다. </ways>
</h3>
<ann> 코드를 읽을 수있는 데 주석이 어떤 역할을합니까? <p>
<cruc> 의견은 코드를 읽을 수 있도록하는 데 중요한 역할을합니다. 코드의 기능, 특정 결정이 내려진 이유 및 복잡한 코드 부품의 작동 방식에 대한 설명을 제공합니다. 코드를 이해하고 사용해야하는 다른 개발자에게는 매우 도움이 될 수 있습니다. 그러나 의견을 간결하고 관련성 있고 코드가 변경 될 때 업데이트하는 것이 중요합니다. </cruc></p>
<read> 읽기 쉬운 코드는 협업에 어떤 영향을 미칩니 까? <h3>
<code> 매우 읽기 쉬운 코드는 협업을 크게 촉진합니다. 코드를 쉽게 읽을 수 있으면 다른 개발자가 이해하고 기여에 참여하는 것이 더 쉽습니다. 이는 여러 개발자가 코드 기반의 다른 부분에서 작업하는 대규모 프로젝트에서 특히 중요합니다. 또한 읽을 수있는 코드를 사용하면 코드가 수행하는 작업과 작동 방식을 빠르게 이해할 수 있기 때문에 새로운 팀원을 그룹으로 쉽게 얻을 수 있습니다.
읽기 쉬운 코드는 소프트웨어의 품질을 크게 향상시킬 수 있습니다. 코드를 읽기 쉬운 경우 오류를 발견하고 수정하고 코드가 수행해야 할 작업을 수행하는 것이 더 쉽습니다. 또한 코드의 각 부분의 역할을 명확하게 보여주기 때문에 시간이 지남에 따라 소프트웨어를 더 쉽게 유지하고 향상시킬 수 있습니다. 이로 인해보다 신뢰할 수 있고 효율적이며 강력한 소프트웨어로 이어질 수 있습니다.
위 내용은 인간이 읽을 수있는 코드 작성의 중요성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!