问题描述现在我们想给每一个带有class属性为collapsible的div内部添加超链接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'
}
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 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]);
}
}
})();
第二步：对代码进一步性能优化这里我们可以做两件事情：1、循环语句中secs的length属性可以用变量保存。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 = toggle;
a.appendchild(document.createtextnode('expand'));
p.appendchild(a);
secs[i].parentnode.insertbefore(p,secs[i]);
}
}
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 : 'collapsible',
collapsedclass : 'collapsed',
collapselabel : 'collapse',
expandlabel : 'expand'
}
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 = toggle;
a.appendchild(document.createtextnode(config.expandlabel));
p.appendchild(a);
secs[i].parentnode.insertbefore(p,secs[i]);
}
}
function toggle(){
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;
}
})();
第四步：为变量和函数起有含义的名字
复制代码 代码如下:
var collapser = (function(){
var config = {
indicatorclass : 'collapsible',
collapsedclass : 'collapsed',
collapselabel : 'collapse',
expandlabel : 'expand'
}
var sections = document.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.appendchild(trigger);
sections[i].parentnode.insertbefore(paragraph,sections[i]);
}
}
function togglesection(){
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;
}
})();
第五步：添加必要的注释复制代码 代码如下:
// collapse and expand section of the page with a certain class
// written by christian heilmann, 07/01/08
var collapser = (function(){
// configuration, change css class names and labels here
var config = {
indicatorclass : 'collapsible',
collapsedclass : 'collapsed',
collapselabel : 'collapse',
expandlabel : 'expand'
}
var sections = document.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.appendchild(trigger);
sections[i].parentnode.insertbefore(paragraph,sections[i]);
}
}
function togglesection(){
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;
}
})();