15가지 JavaScript 모범 사례 요약_javascript 팁-JS 튜토리얼-php.cn

이 문서는 일반적으로 인정되거나 논란의 여지가 적은 대부분의 JavaScript 모범 사례를 정리합니다. 일부 명백한 상식은 논의되지 않습니다(예를 들어, 브라우저 인식 판단 대신 인식 판단을 지원하기 위해 객체를 사용합니다. 예를 들어 너무 깊게 중첩하지 마십시오). 항목은 대략적으로 중요도가 높은 것부터 낮은 것 순으로 정렬됩니다.
HTML 하단에 외부 JavaScript 파일을 배치합니다.
우리의 목표는 동일합니다. 사용자에게 최대한 빨리 콘텐츠를 표시하는 것입니다. 스크립트 파일을 로드할 때 HTML은 스크립트가 로드될 때까지 구문 분석을 중지합니다. 결과적으로 사용자는 아무 일도 일어나지 않은 채 오랜 시간 동안 빈 화면을 보고 있을 수 있습니다. JavaScript 코드에 일부 기능(예: 버튼 클릭 동작)만 추가하는 경우 HTML 하단( 바로 앞)에 파일 참조를 추가하면 속도가 크게 향상됩니다. 다른 목적으로 사용되는 스크립트 파일이라면 신중하게 고려해야 합니다. 그럼에도 불구하고 이곳은 의심할 여지없이 고려해볼만한 가치가 있는 곳입니다.
루프 최적화
배열을 통한 루프

코드 복사 코드는 다음과 같습니다.

 
//이 잘못된 코드는 루프에 들어갈 때마다 배열의 길이를 계산합니다. 
var names = ['George','Ringo','Paul','John'] ; 
for(var i=0;idoSomeThingWith(names[i]) 
} 

코드 복사 코드는 다음과 같습니다.

 
//이 경우 한 번만 계산됩니다.
var names = ['조지' ,'링고','폴','존']; 
var all = names.length 
for(var i=0;idoSomeThingWith( names[i] ) 
} 

코드 복사 코드는 다음과 같습니다. // 이는 더 짧습니다.

var names = ['George','Ringo','Paul','John']

for(var i=0,j=names.length;idoSomeThingWith(names[i]); 
}

코드 복사 코드는 다음과 같습니다. //이 코드의 나쁜 점은 변수 선언을 루프 본문에 넣고 루프할 때마다 변수가 생성된다는 것입니다.

for(var i = 0; i < someArray.length; i ) {

var 컨테이너 = document.getElementById('container') 
container.innerHtml = '내 번호: ' i; ; 
} 

 

코드 복사

코드는 다음과 같습니다. //In 루프 외부 변수는 한 번만 생성됩니다. var 컨테이너 = document.getElementById('container')

for(var i = 0, len = someArray.length; i < ; len; i ) {

container.innerHtml = '내 번호: ' i; 
console.log(i) 
} 

 가능한 코드 
 
 가독성을 높이려면 짧은 형식의 코드를 사용하는 것이 좋습니다. 다음은 전체 목록이 아닙니다. 

코드 복사

코드는 다음과 같습니다. //조건부 판단을 두 번만 하는 경우에는 이렇게 작성하면 길어집니다. var Direction if(x > ; 100){ 방향 = 1;

} else {

방향 = 
} 

 코드 복사

코드는 다음과 같습니다.

//더 나은 코드var 방향 = (x > 100) 1 : -1; >

코드 복사

코드는 다음과 같습니다.

//해당 여부를 판단합니다. 변수가 정의되어 있고 그렇지 않은 경우 하나의 값에 할당합니다. 잘못된 코드 if(v){ var x = v } else { var x = 10;

코드 복사

 코드는 다음과 같습니다.

//Better 코드var x = v || 10

코드 복사 코드는 다음과 같습니다.

 
//변수명을 여러번 반복합니다
var cow = new Object(); 
cow.colour = 'brown'; 
cow.commonQuestion = '지금은 무엇입니까?' 
cow.moo = function(){ 
console.log (' 음'); 
cow.feet = 4; 
cow.accordingToLarson = '세계를 장악할 것입니다' 

 

코드 복사 코드는 다음과 같습니다.

//이렇게 작성하는 것이 더 좋습니다
var cow = { 
color:'brown', 
commonQuestion:'지금은 무엇입니까?', 
moo:function(){ 
console.log('moo) 
}, 
feet:4 , 
에 따르면:'세계를 장악할 것입니다' 
}; 

 

코드 복사 코드는 다음과 같습니다.

//배열 이름이 여러 번 반복됩니다.
var aweSomeBands = new Array() 
aweSomeBands[0] = 'Bad Religion'; >aweSomeBands[1] = 'Dropkick Murphys'; 
aweSomeBands[2] = '플로깅 몰리'; 
aweSomeBands[3] = '레드 핫 칠리 페퍼스' 
aweSomeBands[4] = 'Pornophonique' ; 

 

코드 복사 코드는 다음과 같습니다.

// 더 나은 코드

var aweSomeBands = [ 
' Bad Religion', 
'Dropkick Murphys', 
'Flogging Molly', 
'Red Hot Chili Peppers', 
'Pornophonique' 
]; 

 
 

작은따옴표 및 큰따옴표
혼동을 피하기 위해 HTML에서는 큰따옴표를, JavaScript에서는 작은따옴표를 사용하는 것이 좋습니다.

코드 복사 코드는 다음과 같습니다.

//html

코드 복사 코드는 다음과 같습니다.

//JavaScript

코드 복사 코드는 다음과 같습니다. //혼합 jQuery 코드

$('h1 ').after('

디렉토리

');

다른 기술을 혼합하지 마세요

CSS: 페이지에 입력해야 하는 입력 상자가 있다고 가정합니다(데이터가 없는 경우 "필수" 클래스 사용). 입력하면 주위에 빨간색이 추가됩니다.

코드 복사 코드는 다음과 같습니다. //다른 코드와 혼합된 코드 기술이 이를 수행합니다:

var f = document.getElementById('mainform')

var inputs = f.getElementsByTagName('input') 
for(var i=0,j=inputs.length ;iif(inputs[i].className === '필수' && 
inputs[i].value === ''){ 
inputs[i]. style.borderColor = '#f00'; 
inputs[i].style.borderStyle = 'solid' 
inputs[i].style.borderWidth = '1px' 
} 
} 

 

코드 복사 코드는 다음과 같습니다. //좋습니다 코드 조각이 이 작업을 수행합니다. 스타일 지정은 CSS에 그대로 둡니다.

var f = document.getElementById('mainform')

var inputs = f.getElementsByTagName('input')
for(var i= 0,j= inputs.length;iif(inputs[i].className === '필수' &&
inputs[i].value === ''){
inputs[ i].className = 'error'
}
}

HTML: JavaScript를 사용하여 로드해야 하는 HTML 콘텐츠가 많다고 가정하고, JavaScript를 통해 DOM을 처리하는 대신 Ajax를 사용하여 별도의 파일을 로드하면 코드 처리가 어려워지고 호환성이 발생합니다. 유지하기 어렵습니다.
JavaScript 코드 유효성 검사
브라우저에서는 JavaScript 코드에 대해 매우 관대할 수 있지만 브라우저의 구문 분석 기능에 의존하여 게으른 코딩 습관을 개발하지 말 것을 권장합니다.
코드 품질을 확인하는 가장 쉬운 방법은 온라인 JavaScript 확인 도구인 JSLint를 이용하는 것입니다.
"JSLint는 JavaScript 소스를 가져와서 스캔합니다. 문제가 발견되면 문제를 설명하는 메시지와 소스 내의 대략적인 위치를 반환합니다. 종종 구문 오류가 발생하더라도 문제가 반드시 구문 오류인 것은 아닙니다. JSLint는 다음과 같이 보입니다. 일부 스타일 규칙 및 구조적 문제에서는 프로그램이 정확하다는 것을 증명하지 못합니다.
– JSLint 문서
내부 스크립트를 작성하는 데 더 간단한 형식을 사용하세요. 🎜>

코드 복사 코드는 다음과 같습니다.

//초기 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

//언어 속성은 현재 사용되지 않습니다

항상 데이터 확인
메소드로 입력한 모든 데이터를 확인하려면 한편으로는 보안을 위한 반면, 다른 한편으로는 사용성을 위한 것이기도 합니다. 사용자는 언제 어디서나 잘못된 데이터를 입력합니다. 그 사람이 멍청해서가 아니라, 그 사람이 바쁘고 당신과 생각이 다르기 때문이다. 함수가 허용하는 입력이 올바른지 확인하려면 typeof 메서드를 사용하세요.

코드 복사 코드는 다음과 같습니다.

//회원 유형이 아닌 경우 배열을 사용하면 다음 코드에서 오류가 발생합니다.

function buildMemberList(members){ 
var all =members.length 
var ul = document.createElement('ul'); (var i=0; i 

 

코드 복사 코드는 다음과 같습니다. //좋은 습관 매개변수가 배열인지 확인하는 것

function buildMemberList(members){

//배열의 타입이 객체이므로, 배열인지 확인하고 싶다면 배열의 경우 배열에만 사용할 수 있는 함수가 있는지 테스트할 수 있습니다. var all =members.length; 
var ul = document.createElement('ul' ); 
for(var i=0;i 

 
또 다른 보안 위험은 데이터를 직접 사용하는 것입니다. 예를 들어, 함수는 사용자 이름 입력 상자에서 사용자 이름을 가져옵니다. 사용자 이름에 작은따옴표나 큰따옴표가 없으면 코드가 충돌할 수 있습니다. 

전역 변수 사용하지 마세요
 
 전역 변수와 전역 함수는 매우 나쁩니다. 페이지에 포함된 모든 JavaScript는 동일한 도메인에서 실행되므로 코드에서 전역 변수 또는 전역 함수를 선언하면 후속 스크립트 파일에서 동일한 이름의 변수 및 함수가 로드됩니다. 

코드 복사

코드는 다음과 같습니다. // 잘못된 전역 변수 및 전역 함수 var current = null function init(){...} functionchange(){...}

function verify(){...}

Christian Heilmann이 제안한 방법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. //변수와 함수를 "외부"에서 참조할 필요가 없으면 이름 없는 메서드를 사용하여 모두 래핑할 수 있습니다. (함수(){ var current = null; 함수 init(){...}

함수 변경(){...}

함수 verify(){.. .} 
})(); 

코드 복사

코드는 다음과 같습니다.

 
//변수와 함수를 "외부"에서 참조해야 하는 경우 변수와 함수를 "네임스페이스"에 넣어야 합니다. 
//여기에서는 var 대신 함수를 네임스페이스로 사용합니다. , 전자에서 함수를 선언하는 것이 더 간단하고 개인 데이터를 보호할 수 있기 때문입니다. 
myNameSpace = function(){ 
var current = null 
function init(){...} 
functionchange() {...} 
function verify(){...} 
//네임스페이스 외부에서 호출해야 하는 모든 함수와 속성은 return 
return{ 
init :init에 작성해야 합니다. , 
//변수를 선언할 때 
set:change 
} 
}() 

함수 및 속성에 대한 별칭을 지정할 수도 있습니다. var 사용
JavaScript의 변수는 전역 변수일 수도 있고 로컬 변수일 수도 있으며, var를 사용하여 선언하는 것이 더 직관적입니다.

코드 복사 코드는 다음과 같습니다.

 
//var를 사용하지 않아 발생하는 혼란스러운 문제 in function 
var i=0; // 좋습니다. 전역 변수를 생성합니다. 
function test() { 
for (i=0; ialert(" Hello World !"); 
} 
} 
test(); 
alert(i); // 전역 변수 i는 이제 10입니다! 

코드 복사 코드는 다음과 같습니다.

 
//해결 방법은 함수에서 변수를 선언하고 또한 var 
function test( ) { 
for (var i=0; ialert("Hello World!") 
} 
} 

접두사를 사용하여 문자열을 숫자로 변환
JavaScript에서 " " 연산자는 숫자를 추가하고 문자열을 연결하는 데 사용됩니다. 양식에서 여러 값의 합을 요청해야 하는 경우 을 사용하면 문제가 발생할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//문제를 일으킬 코드
< form name="myform" action="[url]">
"text" name ="val2" value="2">

function total() {
var theform = document.forms["myform"]; total = theform.elements["val1"].value theform.elements["val2"].value;
alert(total); // 이는 "12"를 경고하지만 원하는 것은 3입니다! }

코드 복사 코드는 다음과 같습니다. // 문자열 ” 앞에 "를 추가하세요. 이는 JavaScript에 대한 힌트입니다. 이는 문자열이 아니라 숫자입니다.

function total() {

var theform = document.forms["myform"]; 
 var total = ( theform.elements["val1"].value) ( ​​​​theform.elements["val2"].value) 
alert(total); // 경고 3 
} 

 

eval() 메소드 사용을 피하세요

자바스크립트에서 eval() 메소드는 어떤 코드든 런타임에 객체로 계산/실행하는 메소드입니다. 실제로 보안상의 이유로 대부분의 경우 eval()을 사용하면 안 됩니다. 동일한 작업을 완료하는 데는 항상 더 "올바른" 방법이 있습니다. 기본 규칙은 평가가 나쁘다는 것입니다. 베테랑이 아니고 사용해야 한다는 것을 알지 않는 한 언제든지 사용하지 마십시오. for in 문

객체의 모든 항목을 순회할 때 for in 문을 사용하면 매우 편리합니다. 하지만 개체의 메서드를 순회할 필요가 없는 경우도 있습니다. 그렇지 않은 경우 필터를 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다. //필터가 있는 in 문 추가됨

for(key in object) {

if(object.hasOwnProperty(key) { 
...그런 다음 뭔가를 수행하세요... 
} 
} 

 
게으르지 말고 "" 및 {}을 생략하세요. 
기술적으로 많은 중괄호와 세미콜론을 무시할 수 있습니다. 

코드 복사 코드는 다음과 같습니다. //잘못된 것처럼 보이지만 대부분의 브라우저는 이 코드를 올바르게 구문 분석할 수 있습니다.

if(someVariableExists)

x = false

코드 복사 코드는 다음과 같습니다.

 
//이 코드는 더욱 잘못된 것 같습니다. 언뜻 보면 다음 문장이 실행된 것 같습니다. 
//실제로 if에는 x=false만 있습니다. 
if(someVariableExists) 
x = false 
anotherFunctionCall(); 

따라서 기억해야 할 원칙은 다음과 같습니다. 1. 세미콜론을 생략하지 마세요. 2. 중괄호가 같은 위치에 있지 않는 이상 생략하지 마세요. 줄 중간.

코드 복사 코드는 다음과 같습니다.

 
//정상입니다
 (2 2 === 4) return 'nicely done'; 

객체의 속성을 가져올 때 마침표 대신 대괄호를 사용하세요.
객체의 속성을 가져오는 방법에는 두 가지가 있습니다. JavaScript에서:

코드 복사 코드는 다음과 같습니다:

 
//점 표시
MyObject.property 

코드 복사 코드는 다음과 같습니다.

 
//대괄호 표시
 MyObject["property"] 

객체의 속성을 얻기 위해 점 표기법을 사용하는 경우 속성 이름이 하드 코딩되어 런타임에 변경할 수 없습니다. ; 대괄호를 사용하는 경우 JavaScript는 대괄호를 얻습니다. 그러면 내부 값이 계산되어 속성 이름을 얻습니다. 즉, 대괄호를 사용하여 속성 이름을 하드 코딩하거나 변수 또는 함수 반환 값이 될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

 
//작동하지 않습니다
MyObject.value i 

코드 복사 코드는 다음과 같습니다.

 
//이렇게 하면 질문이 없습니다
MyObject["value" i] 

JavaScript가 비활성화된다고 가정하면
그런 가정이 JavaScript의 감정을 상하게 할 것이라는 것을 알고 있습니다. 하지만 현재 데이터가 불분명한 상황에서는 이 가정을 안전한 편으로 만들어야 합니다. 이는 점진적인 향상의 중요한 부분입니다.
JavaScript 라이브러리 사용
YUI, jQuery, Dojo 등 현재 매우 인기 있는 JavaScript 라이브러리가 많이 있습니다. 단점은 추가 파일을 다운로드해야 한다는 점이지만 장점은 더 많습니다. 코드가 더 간단하고 이해하기 쉽습니다. 세상에는 좋은 라이브러리가 많이 있지만 호환성 문제가 있을 수 있으므로 하나의 프로젝트에서 모두 사용해서는 안 됩니다. 익숙한 것을 선택하면 됩니다.
네이티브 JavaScript가 확실히 더 빠르다는 점을 잊지 마세요. 소규모로 사용한다면 네이티브 JavaScript를 사용하는 것이 가장 좋습니다.