It's written in front.
We must not face the fact that many programmers do not plan their JS code. We often quickly write code, run, commit. But as we continue to develop our encounters with variables and functions, we have to look back at what they mean again, and that's where the trouble begins. Similarly, when we get the script in the hands of other programmers, we get a similar error. So, when we say "This was done, I can go on" It's best to do the following 5 things to the script.
Problem description
Now we want to add a hyperlink A to each div with the class attribute for collapsible to show and hide the Div.
The following is an implementation code written with a module function:
Copy Code code as follows:
var Collapser = (function () {
var secs = document.getelementsbytagname (' div ');
for (Var i=0;i<secs.length;i++) {
if (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]);
}
}
})();
The above code has been very accurate to achieve the results we want. But we can also refactor the above code further.
The first step: Style (CSS) and behavior (JavaScript) separation
We can use the add a CSS class selector to eliminate the style set through JS. This phenomenon is often encountered in new hands.
Copy Code code as follows:
var Collapser = (function () {
var secs = document.getelementsbytagname (' div ');
for (Var i=0;i<secs.length;i++) {
if (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]);
}
}
})();
Step two: Further performance optimization for code
Here we can do two things: 1, the length property of the secs in a circular statement can be saved with a variable. 2. Create reusable functions for event handlers. The benefit is to reduce the number of event processors and reduce memory footprint.
Copy Code code as follows:
var Collapser = (function () {
var secs = document.getelementsbytagname (' div ');
for (Var i=0,j=secs.length;i<j;i++) {
if (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;
}
})();
Step Three: Add Configuration objects
Use configuration objects to store hard-coded code, such as text labels or custom property names that you use. facilitates the subsequent maintenance.
Copy Code code as follows:
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;i<j;i++) {
if (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;
}
})();
Step fourth: Names that have meaning for variables and functions
Copy Code code as follows:
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;i<j;i++) {
if (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;
}
})();
Step Fifth: Add the necessary comments
Copy Code code as follows:
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;i<j;i++) {
if (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;
}
})();
