Analysis of Web Page problems and Web page Problems

Analysis of Web Page problems and Web page Problems

A few months ago, I received a new development task and added some new features on an old Web page. In the process of development, I found that there are many common and inappropriate writing methods in the old Code. In combination with these problems, how can I write better, more standardized, and more maintainable code, the content of this article.

First, I checked the HTML code on the web page and found some typical problems:

• The HTML page contains a lot of Javascript and CSS code.
• A large number of external Javascript files and CSS files are referenced in the HTML page.

Next we will discuss these issues one by one:

The HTML page contains a lot of Javascript and CSS code.

A normal Web page consists of the following three parts: HTML, CSS, and Javascript, where HTML is data, CSS is responsible for style, and Javascript is responsible for interaction. The relationship between the three is as follows:

In the process of building a Web page, we should try our best to maintain a loosely coupled relationship between the three, and do not take the whole body into consideration. Small changes at one level need to change the other two layers. First, we need to isolate these three parts from the file level, and import Javascript and CSS in HTML by introducing files.

To achieve loose coupling between the three, the following points should be noted during development:

• Do not include Javascript in CSS code
• Do not include CSS in Javascript code
• Do not include Javascript in HTML code
• Do not include HTML in Javascript

Do not include Javascript in CSS code. It refers to the use of Computable styles with caution in CSS code, such as expression in IE 8 and calc in CSS3. It is very powerful in terms of usage, code maintenance is not recommended. When a Bug occurs, Check Javascript and CSS code at the same time.

Javascript code should not contain CSS. We often need to dynamically change the style of a Dom element in Javascript, and often write the following code:

element.style.color = 'red';

 

This code will cause the red keyword to be searched in the full text of Javascript code when the demand changes, for fear of missing a little. The recommended method is as follows:

// Define the style type in the CSS file. red-class {color: red;} // Changes the style element in Javascript. className + = "red-class"; // jQuery $ (element ). addClass ("red-class ");

In Javascript, you can manipulate the Class of the Dom object to change the style. When you need to change the style, you only need to adjust the CSS file.

Do not include Javascript in HTML code:

<input type="button" value="click me" id="mybutton" onclick="do()"/>

The following code is recommended:

var btn = document.getElementById('mybutton');btn.addEventListener("click", do);

Do not include HTML in Javascript code:

var div = document.getElementById("my-div");div.innerHTML = "
It is difficult to completely isolate HTML in Javascript code, which can be weighed based on the actual situation. Javascript Template technology is a method to effectively isolate HTML and Javascript code. The following describes how to use jQuery Template:
// HTML<script id="bookTemplate" type="text/x-jQuery-tmpl">        <div>                        A large number of external Javascript files and CSS files are referenced in the HTML page.
The HTML page references a large number of external Javascript files and CSS files. We know that each <script> or <style> referenced by an external file will cause an HTTP request, the cost of an HTTP request is actually very high. It is the whole process of the HTTP request:

 
First, you need to change the domain name to an IP address through the DNS Server, and then establish a TCP link between the browser and the Server. After a TCP link is established, the browser sends an HTTP request to the Server. After the Server processes the request, return the result to the browser and close the TCP link. The overall HTTP request costs a lot,