Website frontend _javascript-dom Programming. 0002.JavaScriptDom Coding principle?

Coding principles:

1. Do not blame JS, all the root lies in the people who write JS cognition of JS

2. There is no bad technology, there is no good technology, so in the implementation of some functions, the first to confirm that the Web page to add this extra functionality is really necessary

3. Structured design theory it is best to have only one entry point and one exit point for a function, but in reality we recommend that you have multiple exit points for a function, but the recommended exit points are concentrated at the beginning of the function, and finally there is an exit point

Reserve your Retreat:

Note: When some browsers do not support JS or are disabled, we should reserve a fallback, that is, although some functions are not available, but the most basic operation can still be completed successfully

1. Deprecated practices-pseudo-protocol method

<! doctype html>
 
  
 
2. Deprecated practices-Event handling

 
  
 
<! doctype html>


 
  
 
Question: "javascript:" Pseudo-protocol allows us to invoke the JS function through a link, but once the browser does not support JS or is disabled JS function, then the link is invalid, click on what will not do, inline event processing, href value is # just create an empty link, The actual work is all done by the OnClick property, but as bad as the pseudo-protocol, because the search engine crawls the content with the link, without knowing the JS code
3. Improved practices-event handling

 
  
 
<! doctype html>
 
  
 
Description: If the above method of instant browser does not support JS or disable JS link is still in effect, the search engine is also more friendly, but this way of writing and our inline CSS seems to be more similar, we recommend that you use event binding way to achieve JS separation
4. Improved practice-Event binding

 
  
 
 
Window.load = preparelinksfunction preparelinks () {    //  Determine browser compatibility to determine if you want to perform this function     if (document.getelementsbytagname)  return false     var links = document.getelementsbytagname (' a ')     var  placeholder = document.getelementbyid (' placeholder ')     var  Description = document.getelementbyid (' description ')     for (var i=0; i <links.length; i++) {        links[i].onclick =  function () {            var href =  This.getattribute (' href ')             var  Title = this.getattribute (' title ')              placeholder.setattribute (' src ',  href)             description.firstchild.nodevalue =  title            return false         }    }}
 
  
 

Gradual:

 
  
 
Description: In fact, is a way of thinking, starting from the core of the content, and gradually add additional features, the first markup language to add the correct markup to the core content to get the correct structure, and then gradually enrich the correct tagged content, Enriched content can be implemented through CSS style sheets with various rendering effects, as well as the ability to add various operational behaviors through DOM manipulation

Retract control:

 
  
 
Description: Default events such as the mouse hover over the element that is set to the title property, different browsers may display a variety of effects, we can completely use the DOM to retrieve the hidden properties based on the information created content and then inserted into the document, to grasp control



This article is from the "ζ Automated operation and maintenance development Road ζ" blog, please be sure to keep this source http://xmdevops.blog.51cto.com/11144840/1858122
Website frontend _javascript-dom Programming. 0002.JavaScriptDom Coding principle?