Javascript.RU

Вывод синтаксического дерева кода

Синтаксическое дерево - внутренняя структура, которую интерпретатор javascript создает из исходного кода.

Обычно синтаксическое дерево создается для выполнения, но также может использоваться и для оптимизации, чем, собственно, и занимается google closure compiler.

Как правило, синтаксическое дерево может вам понадобиться, если вы захотите разобраться в каких-то оптимизациях, либо пишете расширение к компилятору. Такое расширение получает синтаксическое дерево, и поэтому может делать с кодом все, что угодно.

Так как синтаксическое дерево заточено под выполнение, то оно содержит все значимые элементы - без лишних пробелов, комментариев и т.п.

Поэтому чтение файла в синтаксическое дерево, а потом генерация кода по этому дереву - само по себе является оптимизацией. Это соответствует значению флага --compilation_level, равному WHITESPACE_ONLY.

Простейший способ получить синтаксическое дерево - это использовать флаг --print_tree.

Например, для скрипта ast.js:

function Animal(speed) {
  /** @type {number} */
  this.speed = speed
}

Печать дерева:

java -jar compiler.jar  --js ast.js  --use_only_custom_externs --print_tree
Флаг --use_only_custom_externs при печати дерева необходим, иначе дерево будет также содержать все стандартные экстерны.

Результат:

BLOCK [synthetic: 1]
    BLOCK [synthetic: 1]
        SCRIPT [source name: null] [encoded source length: 0] [base line: -1] [end line: -1] 1 [sourcename: /dev/null] [synthetic: 1]
    BLOCK [synthetic: 1]
        SCRIPT [source name: null] [encoded source length: 0] [base line: -1] [end line: -1] 1 [sourcename: ast.js] [synthetic: 1]
            FUNCTION Animal 1 [sourcename: ast.js]
                NAME Animal 1
                LP 1
                    NAME a 1
                BLOCK 1
                    EXPR_RESULT 3
                        ASSIGN 3 [jsdoc_info: JSDocInfo]
                            GETPROP 3
                                THIS 3
                                STRING speed 3
                            NAME a 3

Как видите, выводится основная информация. Сверху - несколько служебных строк, а ниже - наша функция.

Аннотация /** @type {number} */ превратилась во внутреннюю структуру JSDocInfo.

Обратите внимание, дерево печатается для уже откомпилированного кода, со всеми оптимизациями и заменами. Поэтому, в частности, локальная переменная speed в дереве называется a.

Вы также можете получить дерево в более красивом виде, используя флаг --print_ast:

java -jar compiler.jar  --js ast.js  --use_only_custom_externs --print_ast >ast.dot

Полученный текст - граф в формате DOT, для просмотра которого обычно используется утилита graphviz, работающая под основными ОС.

Запустив эту утилиту и преобразовав в ней файл ast.dot, получим картинку:

Выглядит красивее, но в тестовом дереве --print_tree содержится больше информации, поэтому обычно удобнее использовать текстовый формат, а графический - больше для диаграмм. Вдруг кто-нибудь решит диплом или диссертацию написать по оптимизации javascript


Автор: Dunyatka (не зарегистрирован), дата: 19 февраля, 2010 - 12:22
#permalink

Спасибо! Для диплома кое что у Вас тут забрал.


Автор: Lekcion (не зарегистрирован), дата: 7 декабря, 2012 - 01:22
#permalink

Как то, слабо описано... Но спасибо и за такое...


Автор: jimo (не зарегистрирован), дата: 24 января, 2022 - 09:25
#permalink

This is a great idea, it will definitely be shared widely, thanks for sharing it with us moto x3m


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 00:09
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 13:33
#permalink

Автор: Гость (не зарегистрирован), дата: 2 сентября, 2022 - 16:14
#permalink

As in Wordle, there is a secret five-letter word that we have to try to guess while the absurdle game itself indicates the letters that we are getting right.


Автор: frog321 (не зарегистрирован), дата: 20 декабря, 2022 - 11:13
#permalink

It looks so complicated. It took time for me to understand the nyt sudoku diagram.


Автор: redactle (не зарегистрирован), дата: 29 марта, 2023 - 12:35
#permalink

Как-то неадекватно описано... Но и это я ценю...


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
2 + 0 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum