Simple and clear JS abstract syntax tree-JS Tutorial-php.cn

Simple and clear JS abstract syntax tree

小云云

Release： 2018-01-29 13:49:07

Original

2304 people have browsed it

In this article, we mainly share with you the simple and clear JS abstract syntax tree. We will first introduce what an abstract syntax tree is, hoping to help everyone.

Babel is a must-have thing in almost every project now, but its working principle cannot avoid parsing js in the generation process. Babel has an engine babylon, and the project acron was forked in the early days. Before understanding this Let's first take a look at what this engine parses. Not only Babel but also webpack use JavaScript parser to convert the code into an abstract syntax tree. This tree defines the code itself. By operating this tree, assignment statements, declaration statements and operation statements can be accurately located

What is an abstract syntax tree

We can look at a simple example:

var a = 1;
var b = a + 1;

Copy after login

We passed this website, which is an esprima engine website, very easy to use. Draw the process The picture is as follows:

Simple and clear JS abstract syntax tree

And his json object format is like this:

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "init": {
                        "type": "Literal",
                        "value": 1,
                        "raw": "1"
                    }
                }
            ],
            "kind": "var"
        },
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "b"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "+",
                        "left": {
                            "type": "Identifier",
                            "name": "a"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 1,
                            "raw": "1"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ],
    "sourceType": "script"
}

Copy after login

Many engines

Chrome has v8, firefix has spidermonkey. There are also some commonly used engines:

esprima
acron
Traceur
UglifyJS2
shift

The following is a speed comparison of some engines , and the loading speed of engines using different frameworks:

Simple and clear JS abstract syntax tree

## I personally think that the more perfect the encapsulation, the longer the parsing time will actually be. Acron is also faster among engines. The predecessor of the babel engine is a fork of this project.

Three Bans of AST

Generate AST through esprima
Traverse and update AST through estraverse
Regenerate AST source code through escodegen

We can do a simple example:

1. First create a test project directory

2. Install the npm modules of esprima, estraverse, and escodegen under the test project

npm i esprima estraverse escodegen --save

Copy after login

3. Create a new test.js file under the directory and load the following code:

const esprima = require('esprima');
let code = 'const a = 1';
const ast = esprima.parseScript(code);
console.log(ast);

Copy after login

You will You will see the output result:

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'const' } ],
  sourceType: 'script' }

Copy after login

4. Then load the following code in the test file:

const estraverse = require('estraverse');

estraverse.traverse(ast, {
    enter: function (node) {
        node.kind = "var";
    }
});

console.log(ast);

Copy after login

The output result:

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'var' } ],
  sourceType: 'script' }

Copy after login

5. Finally, in the test file into

var a = 1

Do you feel like babel0.0
Recommended websiteesprima source codeacron source code
speed comparison

esprima visualization

Online visualization of AST

Summary

Abstract trees are used a lot in the front end, and now popular tools, whether it is webpack Babel will still go through the three-step process. Here I will just briefly introduce it. After a while, there will be an article on the syntax of abstract trees. If you are interested, you can also take a look at the source code of esprima. Why is it esprima? Because esprima's There is a lot of information, and acron is relatively lightweight. If you are interested, you can pay attention to my [github]() and remember to click a star as a support for the author. Thank you.

Related recommendations:

Summarize 10 common methods in js grammar to improve coding efficiency

javascript programming essentials_JS grammar Dictionary_Basic knowledge

Detailed explanation of AngularJS syntax_AngularJS

The above is the detailed content of Simple and clear JS abstract syntax tree. For more information, please follow other related articles on the PHP Chinese website!