JavaScript best practices and javascript Best Practices

JavaScript best practices and javascript Best Practices
JavaScript Best Practices

 

I. Introduction

 

JavaScript has become an indispensable part of the web. I believe that the vast majority of web websites will be paralyzed if JavaScript is disabled, the results can be imagined, or even seriously.

However, I personally think JavaScript is already an essential part in some cases, and the best JavaScript practice has become a balance between the ideal and reality of JavaScript Application.

Some of the best practices can help us understand the essence of JavaScript, help us improve our program design and improve its robustness.

 

II. Key Points

 

The combination of JavaScript and DOM is a very powerful combination that can easily change the behavior and display of webpages. What is the best practice? The following are some guidelines for best practices.

1. Whether JavaScript is required:

When you want to use JavaScript to change the behavior of a Web page, you must first consider whether it is necessary to do so. This is not a follow-up of people and clouds.

2. progressive enhancement ):

Starting from the core part, that is, starting from the content, and using tags Based on the content to achieve a good structure; then gradually strengthen the content. You can use CSS to change the rendering effect, or use DOM to add actions to avoid using DOM to add core content! At the beginning, the content should be the core component of the document writing period.

3. graceful degradation ):

When JavaScript scripts are correctly used, the website can be browsed even if the browser does not support JavaScript (this phenomenon is almost extinct) or if the browser is disabled to execute JavaScript. This means that JavaScript exists to enhance the page access effect or display effect, and does not participate in core functions (to prevent banned JavaScript ).

4. Separate JavaScript:

Separating the structure and content of a web page from the action and behavior of JavaScript scripts is similar to the decoupling idea that is often emphasized in Java. Minimize mutual impact. For example, adding a click event on the Link actually combines the structure content of the webpage with the JavaScript script. We can separate it from each other, but this is rarely done in reality. One is the reduction in code readability, the other is the complexity of coding, and some extra coding is required. This is an ideal the gap with reality may also be caused by insufficient level.

5. Backward compatibility

Make sure that the JavaScript used in the web page can be normally executed in the old browser. Compatibility between different browsers or browser versions has always been a headache, but with the advancement of technology the phenomenon is gradually improving. To implement this principle, we need to consider the compatibility between various browsers and versions when using JavaScript.

6. Performance Considerations

Determine the optimal performance of script execution. For example, reduce DOM access times as much as possible, merge JavaScript scripts that can be classified, and compress scripts (accelerate the number of client downloads, and use Uglify or online JS compression.

 

3. Improve the previous chapter instance

 

You can refer to the best practices to improve the examples of the previous image library, do not describe them one by one, give a reference to the code before and after showPicture. js compression, and complete the code on github.

Before compression:

 

/** * Attach onclick even on a link tag. */function prepareGallery () {if (!document.getElementById) {return false}if (!document.getElementsByTagName) {return false}var imageGalleryNode = document.getElementById('imageGallery');if (!imageGalleryNode) {return false}var links = imageGalleryNode.getElementsByTagName("a");if (links.length > 0) {for (var i = links.length - 1; i >= 0; i--) {links[i].onclick = function (){/*if show picture work then stop a link active.a link will not work if return false. */return !showPicture(this);}}}}/** * Show the clicked picture. * which picture is clicked.[description] * @return boolean if something is unexpected . */function showPicture(whichPicture){var placeholder = document.getElementById('placeholder');if (!placeholder) {return false}if (placeholder.nodeName != "IMG") {return false}var source = whichPicture.getAttribute('href');placeholder.setAttribute('src', source);var description = document.getElementById('description');if (description) {var text = whichPicture.getAttribute('title') ? whichPicture.getAttribute('title') : "";var firstChildNode = description.firstChild;if (firstChildNode.nodeType == 3) {firstChildNode.nodeValue = text;}}return true;}/** * Multiple execute window.onload; */function addEvent(fun){var oldFunction = window.onload;if (typeof window.onload != 'function') {window.onload = fun;} else {window.onload = function () {oldFunction();fun();}}}addEvent(prepareGallery);

After compression:

function prepareGallery(){if(!document.getElementById||!document.getElementsByTagName)return!1;var a=document.getElementById("imageGallery");if(!a)return!1;a=a.getElementsByTagName("a");if(0<a.length)for(var b=a.length-1;0<=b;b--)a[b].onclick=function(){return showPicture(this)?!1:!0}}function showPicture(a){var b=document.getElementById("placeholder");if(!b||"IMG"!=b.nodeName)return!1;var c=a.getAttribute("href");b.setAttribute("src",c);if(b=document.getElementById("description"))a=a.getAttribute("title")?a.getAttribute("title"):"",b=b.firstChild,3==b.nodeType&&(b.nodeValue=a);return!0}function addEvent(a){var b=window.onload;window.onload="function"!=typeof window.onload?a:function(){b();a()}}addEvent(prepareGallery);