preface

  • Online music poke me ah!
  • Music blog source code online!
  • Last write to write good object-oriented code, this article must see | relearn JS mentioned anonymous functions mentioned error caused the semicolon, ape friends interested in direct messages, then look at a series of thinking caused by a semicolon.

Interviewer: Do you know what class is? I am very honest, hard working, do not know what is tired (class).

Post a piece of words that You said in Zhihu in 17 years.

Laughed to death by netizens.

When does not add semicolon must report an error?

In fact, as long as we avoid the semicolon and the program runs normally, we don’t need to add a semicolon.

Personally, I think the readability and observability of code without semicolon have been improved.

So the question is, when is not adding a semicolon a problem?

1. The preceding statement beginning with the brace

Here we can get the previous write to write good object-oriented code, this article must see | relearn JS inside of a case in point.

var a = 4
console.log(a) ; (function () {
    function load () {
      console.log('Add an event handler to the Load event')}window$=function () { // Expose a global function
      return {
        load: load
      }
    }
})()
Copy the code

One thing I want to say is why anonymous functions are preceded by semicolons;

Suppose: Without the semicolon, the program ends up compiling like this:

var a = 4
console.log(a)(function () {... }Copy the code

Uncaught TypeError: console.log(…) TypeError: console.log(…) is not a function

According to?

That’s because anonymous functions start with parentheses (). For programs that use parentheses () to represent function execution, the function name should be there. , naturally reporting an error.

This is why JS statements are followed by semicolons.

What if I don’t want to add a semicolon after every statement (console.log(a))?

You need to prefix the anonymous function with a semicolon, or if you don’t.

Here’s another example:

var a = 4
(function (){

})()

// The program understanding looks like this:
var a = 4(function (){}) ()4And then the parentheses (), that says4Should be a function, and only functions are executed in parentheses. perform4Function, found4Not a function, so an error is reported.// Uncaught TypeError: 4 is not a function
Copy the code

That’s why you add a semicolon to the first statement that starts with a brace. (Anonymous function)

2. The preceding statement starting with square brackets in

 var b = 4
 [1.3].forEach(function () {})
 
 // The program understanding looks like this:
 
 var b = 4[1.3].forEach(function () {})
 
 // 4[3] What syntax is this?
 // undefined.
 
 // As expected, the browser reported an error:
 // Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

Copy the code

The solution, of course, is to add a semicolon to the beginning of the line.

In the era of JQ, why do people always like to add semicolons at the beginning of JS files?

;var obj = {};
(function() {

})()
Copy the code

That is because fear js file merge compression, will report an error, because do not ensure that other colleagues have not added a semicolon JS file. (Syntax error due to missing semicolon)

What is the compression process when you compress?

  • Remove redundant characters: Spaces, line feeds, and comments
  • Generally speaking, Chinese takes up more space.
  • What happens when you replace redundant characters?
  • For example, if multiple lines of code are compressed into one line, note the semicolon at the end of the line.
  • This needs to be addressed through the AST described below.

    • Compressed variable name: variable name, function name, and attribute name

      • Why compress variable names?
      • Let’s say you define a function calledfun()May becomea()
      • Why is that?
      • Better space saving.

    • When code compression is done, code obfuscation is also done. (Shortening variable naming also requires AST support)

The parser used by Uglify in code compression is UglifyJS.

// The original code
const code = `const a = 3; ` 

// Use UglifyJS to parse the code into an AST
const ast = UglifyJS.parse(code); 
ast.figure_out_scope(); 

// Convert to a smaller AST tree
compressor = UglifyJS.Compressor(); 
ast = ast.transform(compressor); 

// Convert the AST to code
code = ast.print_to_string();
Copy the code

Compress code: code -> AST -> (transform) A smaller AST -> code

Attach webpack to remove project full output console.log

config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
Copy the code

So why don’t we use a semicolon now?

That’s because Babel took care of it for us, so we didn’t have to worry about development.

The last

You said: my Vue code all do not take semicolon, in fact, do not add semicolon is just a matter of coding style, do not have to cause a war of words.

In the past to recommend

Lao Shi said that everything is the object, you also believe?

Vue-cli3 builds the component library

Vue implements dynamic routing (and the interviewer blows project highlights)

Axios manipulation in a project you didn’t know about (Core principles of handwriting, compatibility)

VuePress builds project component documentation

Vue koa2 + + nginx deployment

Vue-typescript-admin-template background management system

The original link

Juejin. Cn/post / 700352…