Rebuilding part of the code in the project according to Baidu frontend specifications

1. Do not use document. write to output js files (corresponding to section 14.2 of Baidu frontend specifications)

Before reconstruction

In the school of management project, we do not need to modify the corresponding html or template when changing components to facilitate JS component calls ., divide the JS component modules and write a JS tool that outputs JS, as shown below:

 

Baidu frontend specifications

Do not use document. write to output static js references! In IE, document. write cannot guarantee the sequence of script loading.

 

After Reconstruction

In the educational administration system for foreign students, we use the tool class of EEP output JS: JQueryLoader, which ensures the timing of js output and manages the direct dependency of js, the re-query function is also available.

 

 

2. Global variable conflict (corresponding to section 15.1 of Baidu frontend specifications)

Before reconstruction

In the js page we wrote, many of them directly write the js Code on this page.

 

 

Baidu frontend specifications

Due to the unknown environment, all exposed global variables may be dangerous. We should use function to isolate the scope.

 

After Reconstruction

Use closures and immediate functions to wrap self-written JS to avoid naming conflicts.

 

3. Line Character restrictions (corresponding to section 1.3 of Baidu frontend specifications)

Before reconstruction

Generally, we write a logical judgment statement in this way.

 

 

Baidu frontend specifications

It is recommended that the number of characters in each line not exceed 100 characters.

If the program line is too long, the line should be broken at an appropriate place, and the code after the line is broken should be neat. Do not break the meaning of the expression itself.

 

After Reconstruction

 

 

4. String concatenation (corresponding to section 9.1 of Baidu frontend specifications)

Before reconstruction

During lab development projects, the following strings are concatenated:

 

 

Baidu frontend specifications

Concatenate strings and use arrays as StringBuffer to save string fragments. The join method is called for use. Avoid splicing long strings in the form of + or + =. Each string uses a small memory segment. Too many memory segments will affect the performance. Most modern browsers have optimized the String concatenation of + =, but the IE6 usage is still high.

 

String concatenation: Better concatenation method. Array: uses temporary variables to store the Array length.

 

Var str = [], strLen = 0;

For (var I = 0, len = list. length; I <len; I ++ ){

Str [strLen ++] = '<div>' + list [I] + '</div> ';

}

Dom. innerHTML = str. join ('');

 

After Reconstruction

 

5. Reverse traversal (corresponding to section 10.3.2 of Baidu frontend specifications)

Before reconstruction

In lab projects, we usually traverse the array as follows:

 

 

Baidu frontend specifications

When the traversal order is irrelevant, we recommend that you use reverse traversal. When finding and deleting a match, use reverse traversal.

 

After Reconstruction

 

6. Clear the string (corresponding to section 10.2.2 of Baidu frontend Specification) before reconstruction

Previously, we generally thought that clearing strings is like this:

 

 

Baidu frontend specifications

We can set the length of the array to 0 to clear all the items in the array.

 

After Reconstruction

Assign a value to an empty array to clear the original array. In this case, it is not a strictly clear array, but a new value of ary is an empty array, if the previous array is not referenced in pointing to it, it will wait for garbage collection.

,