Analysis of problems in a Web page

A few months ago I received a new development task to add new features to an old web page. In the development process found that the old code has a lot of common inappropriate writing, combined with these questions, how to write better, more standardized, more maintainable code, is this article to explain the content.

First I looked at the HTML code for 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 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 usually consists of three parts, Html,css,javascript, where HTML is data, CSS is responsible for style, and Javascript is responsible for interacting, the relationships of the three are as follows:

In the process of building a Web page, try to keep these three loose-coupling relationship, not far-reaching, one level of small changes need to change the other two levels. First, isolate the three sections from the file level and import JavaScript and CSS in HTML by introducing files.

To achieve the loose coupling of the three, the development of the need to pay attention to the following points:

Do not include JavaScript in CSS code

Do not include CSS in JavaScript code

Do not include JavaScript in the HTML code

Do not include HTML in JavaScript

CSS code does not include JavaScript, refers to the CSS code in the careful use of computable style, such as IE 8 EXPRESSION,CSS3 calc, etc., from the use of the point of view is all very powerful, from the point of view of code maintenance, not recommended. When a bug occurs, you need to check both JavaScript and CSS code at the same time.

JavaScript code does not include CSS, we often need to dynamically change the style of a DOM element in JavaScript, often write the following code:

Element.style.color = ' red ';

Such code can lead to the need to retrieve the Red keyword in JavaScript code when the requirements change, fearing a bit of missing out. The recommended practices are as follows:

Define the style type in the CSS file
. red-class{
   color:red
;
JavaScript change style
element.classname + = "Red-class";
JQuery
$ (Element). addclass ("Red-class");

More Wonderful content: http://www.bianceng.cnhttp://www.bianceng.cn/web/Skills/

Manipulating the class of the DOM object in JavaScript to change the style, and when the requirements change, you just need to adjust the CSS file.

Do not include JavaScript in HTML code:

<input type= "button" value= "click Me" id= "MyButton" onclick= "Do ()"/>

It is recommended that you use the following code:

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's hard to isolate HTML completely from JavaScript code, which can be weighed against the actual situation. Javascript template technology is an effective way to isolate HTML and JavaScript code, as is the use of jquery template:

HTML
<script id= "booktemplate" type= "Text/x-jquery-tmpl" >
        <div>