Einfacher und klarer abstrakter JS-Syntaxbaum-js-Tutorial-php.cn

Einfacher und klarer abstrakter JS-Syntaxbaum

小云云

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

Original

2304 Leute haben es durchsucht

In diesem Artikel teilen wir Ihnen hauptsächlich den einfachen und klaren abstrakten JS-Syntaxbaum mit. Wir werden zunächst vorstellen, was ein abstrakter Syntaxbaum ist, in der Hoffnung, allen zu helfen.

Babel ist heutzutage in fast jedem Projekt ein Muss, aber sein Arbeitsprinzip kann nicht umhin, Js im Generierungsprozess zu analysieren, und das Projekt-Acron wurde in den frühen Tagen gespalten Dies Schauen wir uns zunächst an, was diese Engine analysiert. Nicht nur Babel, sondern auch Webpack verwenden JavaScript-Parser, um den Code in einen abstrakten Syntaxbaum umzuwandeln. Durch Betreiben dieses Baums können Zuweisungsanweisungen, Deklarationsanweisungen und Operationsanweisungen genau lokalisiert werden ist ein abstrakter Syntaxbaum?

Wir können uns ein einfaches Beispiel ansehen:

Wir haben diese Website übergeben, eine Esprima-Engine-Website, die sehr einfach zu verwenden ist. Zeichnen Sie das Flussdiagramm ist wie folgt:

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

Nach dem Login kopieren

Einfacher und klarer abstrakter JS-Syntaxbaum Und sein JSON-Objektformat ist wie folgt:

Viele Engines

{
    "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"
}

Nach dem Login kopieren

Chrome hat v8, Firefox hat Spidermonkey. Es gibt auch einige häufig verwendete Engines:

Einfacher und klarer abstrakter JS-Syntaxbaum

Einfacher und klarer abstrakter JS-Syntaxbaum Ich persönlich denke, je perfekter das Paket ist, desto länger ist die Parsing-Zeit unter den Engines. Der Vorgänger der Babel-Engine ist.

Die drei Achsen von AST

1 Erstellen Sie zunächst ein Testprojektverzeichnis

2 . Installieren Sie die npm-Module von esprima, estraverse und escodegen unter dem Testprojekt

3. Erstellen Sie eine neue test.js-Datei im Verzeichnis und laden Sie den folgenden Code:

npm i esprima estraverse escodegen --save

Nach dem Login kopieren

Sie sehen das Ausgabeergebnis:

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

Nach dem Login kopieren

4. Laden Sie in die Testdatei den folgenden Code:

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

Nach dem Login kopieren

Ausgabeergebnis:

const estraverse = require('estraverse');

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

console.log(ast);

Nach dem Login kopieren

5. Fügen Sie abschließend den folgenden Code zur Testdatei hinzu:

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

Nach dem Login kopieren

Ausgabeergebnis:

const escodegen = require("escodegen");
const transformCode = escodegen.generate(ast)

console.log(transformCode);

Nach dem Login kopieren

var a = 1;

Nach dem Login kopieren

const a = 1var a = 1
Fühlen Sie sich wie Babel 0.0

Empfohlene Website

Esprima-Quellcode

Acron-Quellcode

Geschwindigkeit Vergleich

AST-Explorer
Esprima-Visualisierung
Online-Visualisierung von AST

Zusammenfassung

Abstrakte Bäume werden häufig im Front-End verwendet und sind mittlerweile beliebte Tools, sei es ist Webpack Babel wird noch den dreistufigen Prozess durchlaufen Hier werde ich es kurz vorstellen. Wenn Sie interessiert sind, können Sie sich auch das ansehen Warum ist esprima ein Quellcode? Es gibt viele Informationen und Acron ist relativ leichtgewichtig. Wenn Sie interessiert sind, können Sie auf meinen [github]() achten und daran denken, als Unterstützung für den Autor auf einen Stern zu klicken.

Verwandte Empfehlungen:

Zusammenfassung von 10 gängigen Möglichkeiten zur Verbesserung der Codierungseffizienz in der JS-Syntax

Unverzichtbar für die Javascript-Programmierung_JS-Syntax-Wörterbuch_Grundkenntnisse

Detaillierte Erklärung der AngularJS-Syntax_AngularJS

Das obige ist der detaillierte Inhalt vonEinfacher und klarer abstrakter JS-Syntaxbaum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!