寫在前面
我們不得面對這樣一個事實：許多程式設計師不會規劃他們的JS程式碼。我們經常快速寫完程式碼、運行、提交。但當我們繼續開發遇到變數和函數時不得不再次回頭查看它們代表的含義，麻煩就從這裡開始了。同樣當我們在其他程式設計師手中取得腳本也會遇到類似的錯誤。因此，當我們說」this is done, I can go on」時最好對腳本做下列5件事情。
問題描述
現在我們想要為每一個帶有class屬性為collapsible的DIV內部新增超連結A，來顯示和隱藏DIV。
以下是用模組函數寫的實作程式碼：
var collapser = (function(>
var collapser = (function(>
var collapser = (function(){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'
}
return false;
};
a.appendChild(document.createTextNode('expand'));
p.appendChild(a);
secs[i].style. display = 'none';
secs[i].parentNode.insertBefore(p,secs[i]);
}
}})();
上面的程式碼已經很準確的實現了我們想要的結果。但是我們還可以對上面的程式碼進一步的重構。
第一步：樣式(CSS)與行為(JavaScript)分離
我們可以用增加一個CSS的class選擇器來消除透過JS中設定的樣式。這種現像在新手中經常遇到.
複製程式碼
程式碼如下:
var collapser = (function(>
var collapser = (function(>
var collapser = (function(){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(Nodeument.create(Nodeument.create. ('expand'));
p.appendChild(a);secs[i].parentNode.insertBefore(p,secs[i]);
}
}
}) ();
複製程式碼
程式碼如下:
var collapser = (function(>
var collapser = (function(>
var collapser = (function(){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 = toggle;
a.appendChild(document.createTextNode('expand'));
p.appendChild(a);
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
function toggle(){
var sec = this
function toggle(){
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 ;
}})();
第三步：新增配置物件
使用設定物件存放程式碼中的硬編碼，如使用到的文字標籤或自訂的屬性名稱。有利於後續的維護。
複製程式碼 程式碼如下:
var Collapser = (function(){
var config = {
indicatorClass : '可折疊',
collapsedClass : '折疊',
collapseLabel : '折疊',
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.collapsedClassClass;
this;
.firstChild.nodeValue = config.expandLabel
}
回傳false;
}
})();
第四步：為變數和函數取有意義的名稱
程式碼如下：
var crashr = (function(){var config = {
indicatorClass : '可折疊',
collapsedClass : '折疊',
collapseLabel : '折疊',
expandLabel : '展開'
}
varsections = documdum. getElementsByTagName('div');
for(var i=0,j=sections.length;iif(sections[i].className.indexOf(config.indicatorClass) != = -1){
sections[i].className = ' ' config.collapsedClass;
var paragraph = document.createElement('p');
var trigger = document.createElement('a') ;
trigger.setAttribute('href','#');
trigger.onclick =toggleSection;
trigger.appendChild(document.createTextNode(config.expandLabel));
paragraph.appendld(觸發);
sections[i].parentNode.insertBefore(paragraph,sections[i]);
}
}
functiontoggleSection(){
varsection = this.parentNode.nextSibling ; 🎜>if(section.className.indexOf(config.collapsedClass) !== -1){
section.className =section.className.replace(' ' config.collapsedClass,'');
this .firstChildld .nodeValue = config.collapseLabel
} else {
section.className = ' ' config.collapsedClass;
this.firstChild.nodeValue = config.expandLabel
}
返回🎜>; }
})();
第五步：添加必要的註釋
/ / 使用某個類別折疊和展開頁面的部分
// 由Christian Heilmann 編寫，07/01/08
var crashr = (function(){
// 配置，更改CSS 類別名稱和此處的標籤
var config = {
indicatorClass : '可折疊',
collapsedClass : '折疊',
collapseLabel : '折疊',
expandLabel : ' 🎜 >varsections = document.getElementsByTagName('div');
for(var i=0,j=sections.length;iif(sections[i].className.indexOf(i ){
if(sections[i].className.indexOf( config .indicatorClass) !== -1){
sections[i].className = ' ' config.collapsedClass;
var paragraph = document.createElement('p');
var trigger = document. ('a');
trigger.setAttribute('href','#');
trigger.onclick =toggleSection;
trigger.appendChild(document.createTextNode(config.expandLabel));
paragraph.appendChild(trigger);
sections[i].parentNode.insertBefore(paragraph,sections[i]);
}
}
函數toggleSection(){
var節=🎜>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.collapsedClass;
this.firstChild.nodeValue = config.expapsedClass;
this.firstChild.nodeValue = config.expapsedClass;
this.firstChild.nodeValue = config.expandLabel
> 回傳false;
}
})();
