앞에 쓰기
우리는 많은 프로그래머가 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 반환;
}
})();
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
