기본 JavaScript 코딩 패턴 요약_기본 지식

어떤 프로그램을 작성하든 코딩 스타일, 디자인 패턴 등의 개념을 접하게 됩니다. 코딩 스타일은 일반적으로 사양 작성에 중점을 두는 반면 디자인 패턴은 프로그램 아키텍처 설계에 중점을 두는 경향이 있습니다. 이 기사에서 저자가 편집한 "패턴"에는 JavaScript 코드를 작성할 때 일반적으로 사용되는 몇 가지 방법이나 팁이 포함되어 있어 JavaScript를 처음 접하는 학생들이 코드 품질을 빠르게 향상시키는 데 도움이 될 수 있습니다. 물론, 그 전에 먼저 표준화된 작성 습관을 확보해야 합니다. 게다가 이 글에서 소개한 지식 포인트를 코드 작성에 적용하면 코드 품질을 크게 향상시킬 수 있습니다.
다음은 작성자가 정리한 내용입니다. 논리적인 순서는 없습니다. 부족한 부분이 있으면 추가하고 수정해 주시기 바랍니다.
1. 변수 정의

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

// 일반적인 쓰기 방법
var a = 0;
var b = 1;
var c = 'xxx'
// 권장 쓰기
var a = 0,
b = 1 ,
c = 'xxx';

2. 리터럴을 사용해 보세요.

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

//일반 작성
var obj = new Object()
obj.a = 'aa'
obj.b = ' bb';
obj .c = 'cc';
var arr = new Array()
// 추천 작성
var obj = {
a: 'aa',
b: 'bb'
};
var arr = [];
function getXX(index){
return ['aa', 'bb', 'xx', 55, 'xxb '](색인);
}
function getMessage(code){
return {
404: 'xxx',
500: 'xxx'
}[code]
}

3. 일반 리터럴

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

var regex = new RegExp('someting');
// 정규식이 변경될 수 있는 경우에만 생성자를 사용하세요.
var cls = 'someclass',
regex = new RegExp (cls '\s*', 'ig'); // 동적 정규식에만 해당
// 다른 경우에는 리터럴 사용
var regex = /someting/ig; . 기본값 설정

코드 복사 코드는 다음과 같습니다. // 기본값 ​​

var arg = arg || 'default'; // fallback

document.getElementById('test').onclick = function(event){
var event || 🎜>};
function getX(a) {
return a 1 || 'default'
}


5. >

코드 복사

코드는 다음과 같습니다.

// 조건 답변 = obj && obj.xx && obj.xx .xxx; // 지속적인 판단if( obj && obj.xx && obj.xx.xxx){ // 뭔가를 하세요

}

if(obj.xx){
// 뭔가를 하세요
}
if( !obj){
// 뭔가를 하세요
}
// 합치 판단을 사용하세요
if(a === b){
// 뭔가를 하세요
}
// 브라우저를 감지하지 말고 사용할 기능이 지원되는지만 감지하세요.
if(document.getElementById){
// 능력 감지
}


6. 삼항 연산자




코드 복사

코드는 다음과 같습니다. 🎜>

// 삼항 check ? value1 : value2 // 삼항 연산자가 더 간결합니다. var foo = (condition) ? value1 : value2; (){ if(조건){ 반환 값1;

}else{

반환 값2
}
}
함수 xx(){
반환 ( 조건) ? value1 : value2;
// 삼항 연산자
foo = predicate ? "two" :
"default"; 🎜>

7. 반복 값 삽입




코드 복사


코드는 다음과 같습니다.

// 반복 삽입
var name = value[i] ;
i ;

// 반복 값을 var name = value[i ]에 직접 삽입; 🎜> 8. DOM 작업

코드 복사

코드는 다음과 같습니다.

// DOM 작업
el.style.display = 'none'; // 오프라인
// 작업
el.style.display = 'block'
// 문서 조각화를 사용하는 것이 더 좋습니다.
varfragment = document.createDocumentFragment(); // 더 좋습니다.
el.innerHTML = ''; // 모든 하위 요소를 빠르게 제거하지만 메모리가 누수될 수 있습니다.
el.innerHTML = ' xxx '; // 사용하세요!
// NodeList를 주의해서 다루세요
var Images = document.getElementsByTagName('img') // 조심하세요! . 이벤트 프록시

코드 복사 코드는 다음과 같습니다. // 이벤트 프록시를 사용합니다. 자세한 내용은

document.getElementById('list').onclick = function(evt){

var evt = evt window.event,
target = evt의 요소에 대한 이벤트를 수신합니다. .target || srcElement;
if(target.id === 'btn1'){
// 뭔가를 하세요
}
}


10. 네임스페이스

코드 복사 코드는 다음과 같습니다. // 네임스페이스로서의 객체

var MYAPP = {};

MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style){}; 이벤트')


11. 체인 연산

코드 복사

🎜> // 연결 작업: return this function setValue(el, value){ el.value = value

return this; = new MYAPP.dom.Element('span ');

obj.setText('hello')
.setStyle('color', 'red')
.setStyle('font', 'Verdana ');


12. 비공개 범위




코드 복사

코드는 다음과 같습니다. >

// 함수 (function(){ var _private = 'cant see me'; })() (function($){ $('#xxb').click(function( ){ });

})(jQuery)

13. 구성 개체



코드 복사

코드는 다음과 같습니다.

// 객체 구성 function foo(id, conf, null , null){ // 뭔가를 하세요 } foo( 'bar', { key1 : 1, key2 : 2

})

14. 유형 변환




코드 복사

코드는 다음과 같습니다.

// 유형 변환 '010' === 10; 숫자('010') = == 10; parseInt('010', 10) === 10 10 '' === '10' ; new Date() // 타임스탬프 new Date;

15. 확장 프로토타입



코드 복사


코드는 다음과 같습니다.

// 상위 호환성이 필요한 경우에만 사용됩니다. 그 외의 경우에는 프로토타입 객체를 확장하지 않는 것이 좋습니다.

Array.prototype .forEach = function(){ // 상위 호환에만 해당 16. 루프 최적화

복사 code


코드는 다음과 같습니다.

// Cache
for(var i=0, j = document.getElementsByTagName('a').length ; i0; i--){

// 아마도 더 빠를 것입니다 } // 가장 빠르다고 합니다 (i--){ // 아마도 가장 빠를 것입니다 }

17. 새로운 스페셜을 사용해 보세요




코드 복사


코드는 다음과 같습니다. :

Array.forEach();
getElementsByClassName();

querySlectorAll() / / 먼저 새로운 기능이 지원되는지 확인하세요. if(document.getElementsByClassName){ // }else{ // 구현 } 사용

지연 로딩




코드 복사


코드는 다음과 같습니다.

// 한 번만 판단하고 함수를 다시 호출할 때는 판단이 필요하지 않습니다.
functionlazyDef(){
if(condition1){
lazyDef = function(){ }; >} else if(condition2){
lazyDef = function(){ };
}
returnlazyDef();
}

19. 메소드

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

var MYAPP = {}; >MYAPP.dom = (function(){
var _setStyle = function(el, prop, value){
console.log('setStyle');
};
return {
setStyle: _setStyle
};
})();
// MYAPP.dom.setStyle을 실수로 덮어쓰더라도 _setStyle은 내부적으로 계속 사용할 수 있습니다.


20. >

코드 복사 코드는 다음과 같습니다. // 최대한 활용해보세요, 여러 매개변수를 전달하고 마지막으로 연결된 문자열

console.log('xx','xx','...');

console.dir(someObj)
console을 출력할 수 있습니다. dirxml(someDom);
console.time ('timer');
console.warn('xxx')
// 캡슐화는 실수로 인한 문제를 방지할 수 있지만 문제가 발생할 수 있습니다. 오류 보고 시 줄 번호 포함
function msg( msg){
if(console && console.log){
console.log(msg) // 잘못된 줄 번호
}
}


기본적으로 현재 떠오르는 것은 이것뿐입니다. 모두가 토론에 추가하는 것을 환영합니다 :)