Single var mode and small optimization of for loop (read "javascript mode" notes)

Single var mode

Before introducing the single var mode, let’s talk about code optimization and make a simple pavement for the following.
I think that as a programmer, one must have an awareness to embrace change , whether it is technological innovation or demand changes, changes are like flowing water, people We must also "follow the flow". After we have completed the design of a software, changes in requirements and BUG are very common. While solving these problems, we actually put a lot of time into relearning and understanding the corresponding Problem and understanding the code used to solve the corresponding problem at the time, so it is particularly important to write maintainable code

Easy-to-maintain code has the following characteristics

1. Good reading
2. Consistent
3. Good predictability
4. It looks like it was written by one person
5. Documented

Then in the actual development of javascript programming, you can optimize from the following perspectives:

Minimize the use of global variables
. The problem of global variables exists in the same global namespace, and naming conflicts may occur. As for how to resolve such conflicts, it is out of the scope of this article for the time being.

Then we start a single var pattern

As follows:

	var a = 123,
			b = "abc",
			obj = {
    
    },
			i,
			j;
			//函数体 ···

Use a var keyword to declare multiple variables separated by commas

This mode of using only one var to declare variables at the top of the function has the following advantages

1. Provide a single address to find all the local variables needed by the function.
2. Prevent logic errors where variables are used before they are defined
3. Help remember to declare variables to use as few global variables as possible
4. Less coding, both input code and transmission code are less

In addition to the above applications, we will also have such application scenarios

An optimization of for loop

First, let’s look at such a case, which

requires the use of native js, bind a click event to each li, and output their order

We can achieve this by the following methods:

var li = document.getElementsByTagName('li');
		for (var i = 0; i < li.length; i++) {
    
    
			(function(i){
    
    
				li[i].addEventListener('click',function(){
    
    
				console.log(i);
			},false)
			}(i))
		}

The immediate execution function is used here to solve the closure problem, and it can also be solved by declaring i in the way of let

The problem with such a loop is that
every time the loop is iterated, the length of the data must be accessed, which will slow down the code, especially when the array is not data, but an HTML container object.

We can optimize as follows

	var li = document.getElementsByTagName('li');
		for (var i = 0 ,max = li.length; i < max; i++) {
    
    
			(function(i){
    
    
					li[i].addEventListener('click',function(){
    
    
				console.log(i);
			},false)
			}(i))
		}	

In this code, we cache the length of the array (or container) that has been traversed. In
this way, the value of the length is only extracted once, but it can be applied to the entire loop.

In the book "JavaScript Mode", it is not difficult to see that this method can greatly improve the speed.

Another improvement to the loop is to use i++
instead of
i = i +1
i += 1.
This is a very obvious method, so I won’t describe it.