Javascript usage tips and js usage tips

Javascript usage tips and js usage tips

1 What if the browser does not support JavaScript?

A. Why does the browser not support it? Most browsers have the function of disabling scripts, such as chrome.

B. When Javascript is disabled, make sure that the webpage can still implement its core functions (key user requirements)

Example: open a link in a new window. You can use the open () method of BOM.

 function popUp(winURL) {   window.open(winURL, "popup", "width=,height="); }

Specific js implementations include the following solutions:

Solution 1: Use the javascript pseudo protocol:

<a href="javascript:popUp('http://www.example.com');return false;">Example</a>

Solution 2: Use embedded event processing functions:

<a href="#" onclick="popUp('http://www.example.com');return false;"></a>

The above two implementation schemes cannot meet the requirement of "open a link in a new window" When js is disabled. Therefore, JavaScript cannot be abused simply to use JavaScript. The following implementation scheme reserves a retreat for js, that is, the so-called stable degradation (leave the retreat after js is banned)

Solution 3: stable degradation <a href = "http://www.example.com" onclick = "popUp (this. href; return false;)">

2. How can I separate the structure, content, and JavaScript script of a webpage? Why do we need to leave?

A. The division of labor is clear, and each task is divided into two parts:

Webpage structure and content-made by html, webpage style-made by CSS, webpage behavior-made by JavaScript

B. Separating js Code is actually very simple. js Code does not require events to be processed in html. You can add an event to an element in the html document in an external js file. For example:

 window.onload = paperLinks   function paperLinks() {   var links = document.getElementsByTagName("a");     for (var i=; i<links.length;i++){     if (links[i].getAttribute == "popup") {       linnks[i].onclick = function() {         popUp(this.getAttribute("href"));         return false;       }     }    }  }

3. browser compatibility

Both old and new users must be satisfied. Pay special attention to the old ones, that is, backward compatibility. Different browsers have different levels of support for js, such

Document. getElementsByClassName (classname) IE6Not Supported. You can add a check statement to check compatibility issues.: If (! Document. getElementsByClassName) return false;

4. Performance Considerations

Why should we consider the performance of script execution? Performance is always a matter of consideration, which involves whether your webpage can be loaded smoothly.

How can we ensure that the script execution performance is optimal?

A. Try to access the dom as little as possible and use less tags. For example, use less loop traversal.

 var links = document.getElementsByTagName("a");   if (links.length > ) {     for (var i=; i<links.length; i++) {     //......   } }

Better performance than the following code

 if (document.getElementsByTagName("a").length > ) {   var links = document.getElementsByTagName("a");   for (var i=; i<links.length; i++) {   //......   } }

B. merge scripts (js Code) to reduce the number of requests sent during page loading. Place the <script> tag at the end of the document before </body> ends, in this way, page loading is faster without affecting js loading.

C. compress the script, delete unnecessary spaces and comments in the js Code, and even simplify the variable name. You can prepare two versions of js: one is the working version, which is used to modify the code and comment, and the other is the simplified version, which is used for release.

Javascript Object

The above content is the js usage tips described in this article.