A problem analysis of a Web page

??

A few months ago I received a new development task to add some new features to an old web page. In the process of development found in the old code there are many common inappropriate wording, combined with these problems, how to write better, more standardized, more maintainable code, is the article to be elaborated on 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 files and CSS files are referenced in the HTML page

Next, let's discuss these issues one by one:

The HTML page contains a lot of JavaScript and CSS code

A normal web page usually has the following three parts, Html,css,javascript, where HTML is the data, CSS is responsible for the style, and Javascript is responsible for the interaction, the three relationships such as:

In the process of building a Web page, try to keep the three loosely coupled relationships, not reaching, one level of small changes need to change the other two levels. The first step is to isolate the three parts from the file level and import the JavaScript and CSS in the HTML by introducing a file.

To achieve the loose coupling of the three, the development needs to be noted in the following points:

• Do not include JavaScript in your 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, and so on, from the point of view of use is very powerful, from the point of view of code maintenance, is not recommended to use. When a bug occurs, you need to check both JavaScript and CSS code.

The 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 would cause the need to retrieve the Red keyword in the JavaScript code as soon as the requirements change, fearing a bit of a leak. The recommended practices are as follows:

// defines the style type in the CSS file . red-class{   color:red;} // change Style element.classname + = "Red-class" in JavaScript; // jQuery$ (Element). addclass ("Red-class");

Manipulating the DOM object's class in JavaScript to change the style, when the need changes, just need to adjust the CSS file.

Do not include JavaScript in your HTML code:

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

It is recommended to use the following code:

var btn = document.getElementById (' mybutton '); Btn.addeventlistener (do);

Do not include HTML in JavaScript code:

var div = document.getElementById ("my-div"= "
It is difficult to completely isolate HTML in JavaScript code, which can be weighed against the actual situation. Javascript template technology is an effective means of isolating HTML and JavaScript code, as follows: The use of jquery template
//HTML<script id= "Booktemplate" type= "Text/x-jquery-tmpl" > <div>  Price : ${formatprice (Price)}</div> </script>//Javascript//Create An array of booksvarBooks = [{title: "ASP. 4 Unleashed", price:37.79, Picture: "Aspnet4unleashed.jpg" }];//Render the books using the template$ ("#bookTemplate"). Tmpl (Books). AppendTo ("#bookContainer"); functionFormatprice (price) {return"$" + price.tofixed (2);}
A large number of external JavaScript files and CSS files are referenced in the HTML page
HTML pages reference a large number of external JavaScript files and CSS files, we know that each reference to external files <script> or <style> will cause an HTTP request, and the cost of an HTTP request is actually very high, Is the entire process of the HTTP request:
First, through the DNS server to the domain name into IP, and then establish a TCP link between the browser and the server, after establishing a TCP link, the browser sends an HTTP request to the server, the server finishes processing the request, returns the result to the browser, and finally closes the TCP link. The cost of the entire HTTP request is still large, more information about HTTP and TCP, please refer to: http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol,http:// En.wikipedia.org/wiki/transmission_control_protocol.
In addition, the browser for the number of concurrent HTTP requests are limited, each browser varies, basically around 4.
When a large number of external JavaScript files and CSS files are referenced in the HTML page, we can consider merging and compressing the Javascript,css file to reduce the number of HTTP requests and the HTTP results.
Grunt is a task-based JavaScript Project command-line build tool that allows you to combine multiple files into one file and compress them with grunt. Grunt there is no development platform limit, as long as the front-end project, you can use grunt to configure the task. Grunt has a wide range of community support and has a lot of existing plugins.
In addition, if you are an ASP, ASP. NET 4.5 joins the bundle technology to combine the compression of JavaScript and CSS. You can refer to Http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification for bundle technology.
JavaScript code Global variables
After reading the HTML code, I went through the main JavaScript code of the page, and the main problem was that the JavaScript code introduced too many global variables. JavaScript global variables can be handy in very small programs, but as programs become larger, it quickly becomes difficult to handle. Because a global variable can be changed by any part of the program at any time, the behavior of the program is greatly complicated. The use of global variables in programs reduces program reliability.
There are three ways to define javascript:
//   use var to define variable var foo = Ten outside of all functions; // without using VAR, declare the variable foo = ten= 10;
The second implicitly declares a global variable, which is especially important.
We should introduce as few global variables as possible, but jquery also provides two global variables: $, jquery. Is it possible to introduce 0 global variables after injecting JavaScript into an HTML page?
This can be achieved by executing the function immediately, see the following code:
(function(win) {    "use strict";     var doc = win.document;     // declare other variables    here // Other code goeshere} (window));
If you need to return the object, you can use the following method:
varModule1 = (function() {var_count = 0; varM1 =function() {//...}; varM2 =function() {//...}; return{m1:m1, m2:m2};}) ();
This will only introduce a global variable Module1, and the object has a good encapsulation, its internal variable "_count", outside is inaccessible. The entire page actually also has some other small question, here does not repeat. Said a half-day old code problem, in fact, there is no prejudice to the old code, because whether it is beautiful and ugly, are in service for the system, are generating value. We're just looking for better code, more readable, easier to maintain code.
A problem analysis of a Web page