Tips for making your JS more elegant

First of all, look at a very not elegant example:

See this code, although the code is very short, but at first glance does not seem to want to see, that is, no readability. This code, no encapsulation, arbitrary definition of a variable is a global variable, so in multi-person development or large-scale development, it is extremely easy to create so-called dirty read.

So, how to write JS elegant? The following summarizes the points for your reference (if there are errors, please correct me!) ）：

① skillfully uses closures to change function variables to local variables in the basic format:

;(function () {

...

})()

To explain, the first semicolon is primarily to prevent errors when merging with other people's code, such as the following:

var lucky=function () {

Console.log ("Winty");

}

(function () {

....

})()

In this case, the lucky function is written without a semicolon, which results in an error.

② Toolkit and event bindings separate

How does that make sense? This means that if the function of a function belongs to a tool class, such as two numbers added, this function is likely to be used in many places, Then write this function specifically in a regular.js file, if a function belongs to an event-handling class, such as a click event, which is probably just the effect of an element, then it is written in a file that is specifically bound to the event-handling function. One principle is to split functions by type and module, so that the code for each function is small and easy to read.

For example, this regular.js:

Call:

More examples:

Summed up some of the principles of JS function:

1. Function name semantics, it is best to use the function name to know the role of the function.

2. When you reduce data coupling, such as writing factorial functions, you need to constantly call yourself, this time using Arguments.callee instead of your own function name.

3. Complex functions can be split into several functions, as much as possible to control the amount of code for each function.

Please pay attention to my personal subscription number: Front End life

Tips for making your JS more elegant