JS가 code_javascript 팁을 완료하기 전에 수행해야 할 5가지 작업

앞에 쓰기

우리는 많은 프로그래머가 JS 코드를 계획하지 않는다는 사실을 직시해야 합니다. 우리는 종종 코드를 작성하고, 실행하고, 신속하게 제출합니다. 그러나 우리가 계속해서 변수와 함수를 개발하고 접하고 그것이 무엇을 나타내는지 다시 되돌아보아야 할 때 문제는 여기서 시작됩니다. 마찬가지로, 다른 프로그래머로부터 스크립트를 얻을 때 비슷한 오류가 발생합니다. 그러므로 우리가 "이제 끝났으니 계속할 수 있다"고 말할 때 스크립트로 다음 5가지를 수행하는 것이 가장 좋습니다.

문제 설명

이제 DIV를 표시하고 숨기기 위해 class 속성이 접을 수 있는 하이퍼링크 A를 각 DIV 내에 추가하려고 합니다.

다음은 모듈 함수를 사용하여 작성한 구현 코드입니다.

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

var Collapser = (function(){
var secs = document.getElementsByTagName('div');
for(var i=0;iif(secs[i].className.indexOf('collapsible' )!= =-1){
var p = document.createElement('p');
var a = document.createElement('a');
a.setAttribute('href',' #') ;
a.onclick = function(){
var sec = this.parentNode.nextSibling;
if(sec.style.display === 'none'){
sec. style.display = 'block';
this.firstChild.nodeValue = 'collapse'
} else {
sec.style.display = 'none';
this.firstChild.nodeValue = 'expand '
}
false 반환;
};
a.appendChild(document.createTextNode('expand'));
p.appendChild(a);
초[i] .style.display = '없음';
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
})();

위 코드는 우리가 원하는 결과를 정확하게 얻었습니다. 하지만 위의 코드를 추가로 리팩터링할 수 있습니다.

1단계: 스타일(CSS)과 동작(JavaScript) 분리

JS에 설정된 스타일을 제거하기 위해 CSS 클래스 선택기를 추가할 수 있습니다. 이런 현상은 초보자들 사이에서 자주 발생합니다.

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

var Collapser = (function(){
var secs = document.getElementsByTagName('div');
for(var i=0;iif(secs[i].className.indexOf('collapsible' )!= =-1){
secs[i].className = ' ' 'collapsed';
var p = document.createElement('p');
var a = document.createElement(' a') ;
a.setAttribute('href','#');
a.onclick = function(){
var sec = this.parentNode.nextSibling;
if(sec. className.indexOf ('collapsed')!==-1){
sec.className = sec.className.replace('collapsed','');
this.firstChild.nodeValue = 'collapse'
} else {
sec.className = ' ' 'collapsed';
this.firstChild.nodeValue = 'expand'
}
return false;
}
a.appendChild( document.createTextNode ('expand'));
p.appendChild(a);
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
}) ();

2단계: 코드의 추가 성능 최적화

여기서 두 가지 작업을 수행할 수 있습니다. 1. 루프 문에서 secs의 길이 속성을 변수에 저장할 수 있습니다. 2. 이벤트 핸들러를 위한 재사용 가능한 함수를 만듭니다. 장점은 이벤트 핸들러 수를 줄이고 메모리 사용량을 줄이는 것입니다.

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

var Collapser = (function(){
var secs = document.getElementsByTagName('div');
for(var i=0,j=secs.length;iif(secs[i].className.indexOf ('collapsible')!==-1){
secs[i].className = ' ' 'collapsed';
var p = document.createElement('p');
var a = document .createElement( 'a');
a.setAttribute('href','#');
a.onclick = 전환;
a.appendChild(document.createTextNode('expand'));
p.appendChild(a);
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
함수 전환(){
var sec = this .parentNode.nextSibling;
if(sec.className.indexOf('collapsed')!==-1){
sec.className = sec.className.replace('collapsed','') ;
this.firstChild.nodeValue = 'collapse'
} else {
sec.className = ' ' 'collapsed';
this.firstChild.nodeValue = 'expand'
}
false 반환 ;
}
})();

3단계: 구성 개체 추가

구성 개체를 사용하여 사용된 텍스트 레이블이나 사용자 정의 속성 이름과 같은 하드 코딩을 코드에 저장합니다. 후속 유지 관리에 도움이 됩니다.

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

var Collapser = (function(){
var config = {
indicatorClass : 'collapsible',
collapsedClass : 'collapsed',
collapseLabel : 'collapse',
expandLabel : '확장'
}
var secs = document.getElementsByTagName('div');
for(var i=0,j=secs.length;iif(secs[i].className.indexOf(config.indicatorClass)!==-1){
secs[i].className = ' ' config.collapsedClass;
var p = document.createElement(' p');
var a = document.createElement('a');
a.setAttribute('href','#');
a.onclick = 토글;
a.appendChild (document.createTextNode(config.expandLabel));
p.appendChild(a);
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
함수 토글(){
var sec = this.parentNode.nextSibling;
if(sec.className.indexOf(config.collapsedClass)!==-1){
sec.className = sec. className.replace(' ' config.collapsedClass,'');
this.firstChild.nodeValue = config.collapseLabel
} else {
sec.className = ' ' config.collapsedClass;
this. firstChild.nodeValue = config.expandLabel
}
return false;
}
})();

제4사步：为变weight와 函数起有含义의이름자

复主代码 代码如下:

varcollapse = (function(){
var config = {
indicatorClass : 'collapsible',
collapsedClass : 'collapsed',
collapseLabel : 'collapse',
expandLabel : 'expand'
}
varsections = document. getElementsByTagName('div');
for(var i=0,j=sections.length;iif(sections[i].className.indexOf(config.indicatorClass) != = -1){
sections[i].className = ' ' config.collapsedClass;
var 문단 = document.createElement('p');
var Trigger = document.createElement('a') ;
trigger.setAttribute('href','#');
trigger.onclick =ggleSection;
trigger.appendChild(document.createTextNode(config.expandLabel));
paragraph.appendChild( Trigger);
sections[i].parentNode.insertBefore(paragraph,sections[i]);
}
}
functionggleSection(){
var section = this.parentNode.nextSibling ;
if(section.className.indexOf(config.collapsedClass) !== -1){
section.className = section.className.replace(' ' config.collapsedClass,'');
this .firstChild.nodeValue = config.collapseLabel
} else {
section.className = ' ' config.collapsedClass;
this.firstChild.nodeValue = config.expandLabel
}
return false;
}
})();

第五步：添加必要的注释

复代码 代码如下:

/ / 특정 클래스가 있는 페이지 섹션 접기 및 확장
// Christian Heilmann 작성, 2008년 7월 1일
var Collapser = (function(){
// 구성, CSS 클래스 이름 변경 및 여기에 레이블
var config = {
indicatorClass: 'collapsible',
collapsedClass: 'collapsed',
collapseLabel: 'collapse',
expandLabel: 'expand'
}
varsection = document.getElementsByTagName('div');
for(var i=0,j=sections.length;iif(sections[i].className.indexOf( config.indicatorClass) !== -1){
sections[i].className = ' ' config.collapsedClass;
varparagraph = document.createElement('p');
var Trigger = document. createElement('a');
trigger.setAttribute('href','#');
trigger.onclick =ggleSection;
trigger.appendChild(document.createTextNode(config.expandLabel));
paragraph.appendChild(trigger);
sections[i].parentNode.insertBefore(paragraph,sections[i]);
}
}
functionggleSection(){
var 섹션 = this.parentNode.nextSibling;
if(section.className.indexOf(config.collapsedClass) !== -1){
section.className = section.className.replace(' ' config.collapsedClass,'' );
this.firstChild.nodeValue = config.collapseLabel
} else {
section.className = ' ' config.collapsedClass;
this.firstChild.nodeValue = config.expandLabel
}
false 반환;
}
})();