Hướng dẫn ast in javascript - ast trong javascript

Có lẽ một trong những điều thú vị nhất tôi đã làm trong năm ngoái là học cách sửa đổi/chuyển đổi một loạt mã JavaScript phân tích cú pháp. Cách nó hoạt động trong nội bộ, một máy phân tích cú pháp hoặc máy nén là một cái gì đó không phổ biến để tìm thông tin về nó.

Cây cú pháp trừu tượng (AST) là gì?

Cây cú pháp trừu tượng là các cấu trúc dữ liệu được sử dụng rộng rãi trong các trình biên dịch, do tính chất của chúng đại diện cho cấu trúc của mã chương trình. AST thường là kết quả của giai đoạn phân tích cú pháp của trình biên dịch.

Chính xác, kết quả của một phân tích cú pháp. Vì vậy, làm thế nào điều này có thể được áp dụng cho JavaScript là những gì chúng ta sẽ khám phá bây giờ. Nhưng AST không chỉ được sử dụng nghiêm ngặt với các môi trường JavaScript như NodeJS hoặc trình duyệt, mọi thứ bắt đầu trên Java World từ lâu, với Netscape.the result of a syntax analysis. So, how this can be apply to Javascript is what we are going to discover now. But AST is not only used strictly with Javascript environments such nodejs or the browser, everything started on Java world long time ago, with Netscape.the result of a syntax analysis. So, how this can be apply to Javascript is what we are going to discover now. But AST is not only used strictly with Javascript environments such nodejs or the browser, everything started on Java world long time ago, with Netscape.

Trình biên dịch và động cơ JavaScript

Rhino (JavaScript Engine) được sinh ra như một phần của Dự án Nestcape với tư cách là người phiên dịch JavaScript, sau đó nó trở thành nguồn mở dưới mui xe của Mozilla. Nhưng Rhino chủ yếu là một người chuyển đổi từ các lớp JavaScript sang Java, nhưng ngoài ra, nó còn có những công dụng khác nhau, như một thông dịch viên, sau đó là khi AST trở nên quan trọng trong câu chuyện của chúng tôi.interpreter, then is when AST becomes important in our story.interpreter, then is when AST becomes important in our story.

AST là cốt lõi của Rhino và được sử dụng sâu (phần lớn là) Google đóng và máy nén YUI, cả hai đều sử dụng trình phân tích cú pháp Java bên trong để phân tích, phân tích mã JavaScript.

Spidermonkey có triển khai AST của riêng mình và được ghi nhận là API Parse, và cũng có vẻ như Rhino cũng có triển khai AST của riêng mình và những thay đổi này dựa trên phiên bản JS và các công cụ JavaScript cụ thể đó có thể thay đổi. has his own AST implementation and is documented as Parse API, and also it seems Rhino has his own AST implementation as well and this changes based on the JS version and those specific javascript engines might change. has his own AST implementation and is documented as Parse API, and also it seems Rhino has his own AST implementation as well and this changes based on the JS version and those specific javascript engines might change.

Để giải quyết những mâu thuẫn này, không phải là cách xa, nó đã bắt đầu sự hợp lưu của những khác biệt này đối với tổ chức estree, tạo (cuối cùng) là đặc điểm kỹ thuật phổ biến đầu tiên của AST. Bây giờ chúng tôi đang nói ;)the first AST common specification. Now we are talking ;)the first AST common specification. Now we are talking ;)

Bây giờ chúng ta có một cái nhìn tổng quan nhỏ về cách AST trở thành và nơi được sử dụng, hãy xem cách sử dụng cho lợi ích của chúng ta và tương lai.

Phân tích tĩnh của các câu lệnh JavaScript

Phân tích tĩnh có nhiều lợi ích, như thay thế báo giá kép bằng các trích dẫn đơn hoặc hiển thị phạm vi bảo hiểm của các tệp JavaScript của bạn dựa trên bài kiểm tra đơn vị của bạn.

Hãy để phân tích một ví dụ cơ bản:

Toàn bộ khối đại diện cho một variabledeclaration, nó là gì. VariabledeClarator là từ khóa VAR VAR, bên trong nút này, chúng tôi sẽ tìm thấy số nhận dạng đại diện cho các trò chơi A A. Chế độ xem cây hình ảnh đi bộ nghĩ rằng câu nhỏ của chúng tôi theo cách cú pháp.VariableDeclaration, it what it is. The VariableDeclarator is the “var” keyword, inside of this node we will found the Identifier which represents the “a”. The tree view visualize walk thought our small sentence in a syntax way.VariableDeclaration, it what it is. The VariableDeclarator is the “var” keyword, inside of this node we will found the Identifier which represents the “a”. The tree view visualize walk thought our small sentence in a syntax way.

Trong AST tất cả là một nút, bất kỳ phần tử nào cũng mở rộng từ nó và tìm kiếm một nút cụ thể mà chúng ta sẽ cần để lặp toàn bộ cây và tìm kiếm chính xác những gì chúng ta cần. Chẳng hạn, nếu mục tiêu của chúng tôi là thay thế biến A A của B By Biến thì chúng tôi sẽ cần một số công cụ để sửa đổi, di chuyển qua và xóa hoặc thêm mã ban đầu của chúng tôi.we will need to loop the whole tree and search exactly what we need. For instance, if our objective were to replace “a” variable by “b” then we are going to need some tools to modify, travel through and remove or add our original code.we will need to loop the whole tree and search exactly what we need. For instance, if our objective were to replace “a” variable by “b” then we are going to need some tools to modify, travel through and remove or add our original code.

Công cụ JavaScript

AST có thể dễ uốn, chúng ta có thể biến đổi, thay thế và thậm chí xóa các nút

Trình phân tích cú pháp

Các trình phân tích cú pháp sau đây hoàn toàn tương thích với thông số kỹ thuật estree và có lẽ là hai cái phổ biến nhất.

Esprima

Esprima là phân tích phân tích phổ biến nhất, được sử dụng nhiều cho hàng ngàn dự án, có lẽ là quan trọng nhất mà tôi biết là bảo hiểm mã Istanbul.

ACORN

Acorn tuyên bố là nhanh hơn, nhỏ hơn và đẹp nhất so với Esprima. Cá nhân tôi đã cố gắng với nó, nhưng nó là cốt lõi của Astexplorer và nó có vẻ khá tốt, tôi đã làm việc với người này nhưng tôi sẽ rời khỏi đây.

Cho dù Esprima hay Acorn, cả hai đều làm công việc và họ làm điều đó rất tốt. Tùy thuộc vào bạn để lựa chọn.

Estrauverse

Khi chúng ta có mã của mình ở chế độ AST, chúng ta có thể lặp lại toàn bộ cây một sự thay đổi bất cứ điều gì chúng ta muốn. Estraverse là một công cụ để lặp qua cây và sửa đổi, bỏ qua hoặc xóa các nút. Trong ví dụ sau, chúng tôi sẽ thay thế và định danh tên dài bằng một số ngắn.Estraverse is a tool to iterate through the tree and modify, skip or remove nodes. In the following example we are going to replace and long name Identifier by a short one.Estraverse is a tool to iterate through the tree and modify, skip or remove nodes. In the following example we are going to replace and long name Identifier by a short one.

ESCODEGEN

Chuyển đổi AST trở lại để mã hóa nó có thể với Escodegen, sau khi bất kỳ phép biến đổi nào nếu AST vẫn hợp lệ sẽ trở thành JavaScript một lần nữa như chúng ta đã thấy trong ví dụ trước.escodegen, after any transformation if the AST still valid will become Javascript again like we saw in the previous example.escodegen, after any transformation if the AST still valid will become Javascript again like we saw in the previous example.

Escope

Lấy một cây cú pháp Esprima và trả lại phạm vi được đánh giá cao. Nó cho phép chúng tôi, ví dụ: đi đến một phạm vi cụ thể và thực hiện một số biến đổi, phát hiện tất cả các biến trong scipe và các tham chiếu của chúng đến các phần khác của mã, phát hiện phạm vi con, nhận các tham số hàm, v.v.

Bạn có thể thực hành trong trang demo này.

Esrefactor

Một công cụ để xác định bất kỳ định danh nào trong mã của bạn, điều này rất hữu ích nếu chúng tôi muốn đổi tên bất kỳ biến hoặc chức năng nào.

Phiên bản hiện tại (trên NPM), nó không có bản vá này, vì vậy, tôi chỉ quản lý để đổi tên các biến.

Esmangle

Esmangle là một máy tính nhỏ nhỏ, một trong nhiều công cụ Ecmascript, công cụ này đặc biệt là có một tập hợp các tham số thú vị để thay đổi hành vi.

AST-Types

ESPRIMA thực sự có một đối tượng có thể truy cập để so sánh nút với loại cú pháp, sự thay thế này phù hợp hơn để kiểm tra đơn vị.

Sự hài hòa (ES6)

Trước khi ESPRIMA hỗ trợ cú pháp ES6 và RXJS trong phiên bản 2.0, đã có một ngã ba của Facebook có tên là Esprima-FB.Trên thực tế là không cần thiết.

Có một trình thám hiểm AST nơi bạn có thể chơi xung quanh bằng cách sử dụng các cấu hình khác nhau.

Sự kết luận

Bài viết này sắp tóm tắt một số công cụ phổ biến/hữu ích nhất mà tôi tìm thấy trong quá trình học tập về AST, có lẽ có nhiều hơn (vui lòng bình luận nếu bạn có nhiều đề xuất hoặc thay đổi hơn), cá nhân tôi nghĩ rằng AST là một trong nhữngHầu hết các bước quan trọng để hiểu Web ngày nay, các chủ đề như WebAssugging, V8, Blink luôn đề cập đến AST như một trung gian chính để phân tích cú pháp.