Before JS completes the code, it is best to do five things for it

Source: Internet
Author: User

Preface

We cannot face the fact that many programmers do not plan their JS Code. We often write code, run, and submit quickly. However, when we continue to develop variables and functions, we have to go back and view their meanings again. The trouble starts from here. Similarly, when we get scripts from other programmers, we will encounter similar errors. Therefore, when we say "this is done, I can go on", we 'd better do the following five things for the script.

Problem description

Now we want to add hyperlink A to each DIV with the class attribute collapsible to show and hide the DIV.

The following is the implementation code written using the module function:

Copy codeThe Code is 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 ();
Secs [I]. style. display = 'none ';
Secs [I]. parentNode. insertBefore (p, secs [I]);
}
}
})();

The above code has accurately implemented the desired results. However, we can further refactor the code above.

Step 1: separation of style (CSS) and behavior (JavaScript)

We can add a CSS class selector to eliminate the styles set in JS. This phenomenon is often encountered by beginners.

Copy codeThe Code is 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 ('collaped ','');
This. firstChild. nodeValue = 'collapse'
} Else {
Sec. className + = ''+ 'collapsed ';
This. firstChild. nodeValue = 'expand'
}
Return false;
}
A. appendChild (document. createTextNode ('expand '));
P. appendChild ();
Secs [I]. parentNode. insertBefore (p, secs [I]);
}
}
})();

Step 2: further optimize the Code Performance

Here we can do two things: 1. The length attribute of secs in the loop statement can be saved as a variable. 2. Create a reusable function for the event processor. The advantage is to reduce the number of event processors and memory usage.

Copy codeThe Code is 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 ();
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 ('collaped ','');
This. firstChild. nodeValue = 'collapse'
} Else {
Sec. className + = ''+ 'collapsed ';
This. firstChild. nodeValue = 'expand'
}
Return false;
}
})();

Step 3: Add a configuration object

Use the configuration object to store hard encoding in the Code, such as text labels or custom attribute names. It is conducive to subsequent maintenance.

Copy codeThe Code is 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 ();
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 4: name variables and functions

Copy codeThe Code is 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 5: add necessary comments Copy codeThe Code is 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;
}
})();

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.