Important ideas in html and jacasloud: Reserved backend, backward compatible, js separation, jacascriptjs

Important ideas in html and jacasloud: Reserved backend, backward compatible, js separation, jacascriptjs

Take a simple web program as an Example

For specific design patterns, use the code and annotations.

<! DOCTYPE html> <! -- 1. Leave the link blank: Can the link be properly displayed if the user disables js? (Href) 2. Separate js: is the behavior layer really separate from the structural layer and do not interfere with each other? (Onclick) 3 backward compatibility: Does the js Code detect Function Support in the browser? (If (! Xxx) return) --> 




Window. onload = preparegallery; // addLoadEvent (preparegallery (); // addLoadEvent (showPic (); function preparegallery () {if (! Document. getElementsByTagName) return false; // backward compatible with if (! Document. getElementById) return false; if (! Document. getElementById ("imagegallery") return false; // preventive measure var gallery = document. getElementById ("imagegallery"); var links = gallery. getElementsByTagName ("a"); for (var I = 0; I <links. length; I ++) {links [I]. onclick = function () {// Based on the return value of showPic, this parameter controls whether to open a link again after onclick (reserved return path) // alert (showPic (this )); return showPic (this) ;}}// improved showPic function (two functions of replacing images and text in integration) // Why is the detection so meticulous, written in the face of uncontrollable html Js Code. It cannot be subjective to think that there must be something in html. It is a bit fuzzing. function showPic (whichpic) {// backward compatible. If there is no placeholder, The onclick function is useless, // considering the "reserved return path", the return after onclick should not be canceled! // Use the return value of showPic to control whether to cancel the onclick "Shake" // (see onclick function of showPic!) If (! Document. getElementById ("placeholder") return true; // backward compatible (default action after onclick is not canceled) var source = whichpic. getAttribute ("href"); // check whether it is an image. Note that var placeholder = document is capitalized in nodeName. getElementById ("placeholder"); if (placeholder. nodeName! = "IMG") return true; placeholder. setAttribute ("src", source); // Replace the image if (! Document. getElementById ("description") return false; // backward compatible (cancel the default action) var description = document. getElementById ("description"); if (whichpic. getAttribute ("title") {// continue to reduce dependencies. Use if to determine var text = whichpic. getAttribute ("title");} else {var text = ''; // this process will not affect the visual effect even if an error occurs.} // check whether the request is a text if (description. firstChild. nodeType = 3) {description. firstChild. nodeValue = text; // Replace the text} return false; // do not forget this sentence}/* // general method for loading js functions // because Javascript is to be separated, write onclick to js. Therefore, you need to load js functions after loading html and before accepting user operations. // to avoid onload conflicts, use the following two common methods // 1 to specify the window function for onload. onload = function () {showPic (); preparegallery () ;}; // 2 programmatic solution (add the addLoadEvent () function to the script library and call it when adding it) addLoadEvent (preparegallery ());*/
Function addLoadEvent (func) {var oldonload = window. onload; if (typeof window. onload! = 'Function') {window. onload = func;} else {window. onload = function () {oldonload (); func () ;}}// use: // addLoadEvent (function_name)


/***** Created by xy on 7/18/15. */function popUp (winURL) {window. open (winURL, "popUp", "width = 320, height = 480");}/* // separate js and html (put The onclick method in js Code) // The script file is introduced and loaded in the html head tag. Therefore, the following code runs before the body is loaded, which is invalid var links = document. getElementsByTagName ("a"); for (var I = 0; I <links. length; I ++) {links [I]. onclick = function () {popUp (this. getAttribute ("href"); return false ;}} * // The correct processing method (separate js) window. onload = PrepareLinks; function prepareLinks () {var links = document. getElementsByTagName ("a"); for (var I = 0; I <links. length; I ++) {if (links [I]. getAttribute ("class") = "popup") {// load The onclick method links [I] to tags with the class = popup attribute. onclick = function () {popUp (this. getAttribute ("href"); // call the popUp function return false ;}}} * // backward compatible (check whether the browser supports this method) // to reduce the number of braces, use if (! Xxx) return false; note that the method here is not called, and there is no parentheses behind the method! // Modify the preceding Code as follows // window. onload = prepareLinks; function prepareLinks () {if (! Document. getElementsByTagName) return false; // see this! Var links = document. getElementsByTagName ("a"); for (var I = 0; I <links. length; I ++) {if (links [I]. getAttribute ("class") = "popup") {links [I]. onclick = function () {popUp (this. getAttribute ("href"); return false ;}}}}



 
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.