В мире JavaScript вы можете увидеть множество фреймворков, каждая из которых имеет свой собственный синтаксис при создании веб-приложений, который некоторые поставщики браузеров еще не реализовали.
Тем не менее, код, который мы пишем с использованием этих фреймворков, работает нормально. Все это происходит за счет синтаксического анализа нашего кода и создания функций рендеринга, которые обслуживаются виртуальными библиотеками DOM, такими как snabbdom.
Во время создания функции рендеринга есть три важных этапа.
- Разобрать
- Преобразовать
- Генерировать
Прежде чем понять, как на самом деле работают эти три этапа, нам нужно понять, зачем нужен AST? & Что такое АСТ ?.
Почему AST?
Обычно, когда мы пишем программы на JavaScript, например, мы используем операторы импорта для модуляции нашего кода, чтобы сделать наши программы более удобными в сопровождении.
Однако с компьютерами дело обстоит иначе. Для них каждый из этих символов - это просто числовое значение в памяти. Следовательно, нам нужно найти способ превратить наш код в то, что компьютеры могут понять.
Что такое AST?
AST означает абстрактное синтаксическое дерево, которое представляет собой древовидное представление абстрактной синтаксической структуры исходного кода, написанного на языке программирования. Абстрактные синтаксические деревья - это структуры данных, широко используемые в компиляторах для представления структуры программного кода.
Разбор:
Этап синтаксического анализа принимает код в качестве входных данных и выводит AST.
В Babel есть две фазы синтаксического анализа:
- Лексический анализ
- Синтаксический анализ
Лексический анализ берет строку кода и превращается в поток токенов.
Синтаксический анализ возьмет поток токенов и превратит его в представление AST.
Преобразовать:
На этапе преобразования нам необходимо рекурсивно пройти AST, чтобы добавить, обновить или удалить узел в дереве.
Создать:
Он принимает преобразованный AST и генерирует функцию рендеринга. Вы проходите через AST в глубину, создавая строку, представляющую преобразованный код.
Компиляция кода JSX для функции рендеринга:
давайте разберемся, как компилируется приведенный ниже фрагмент кода.
Как компиляция происходит на каждом этапе.
Babel - это тот, который компилирует приведенный выше код, babel-transform-vue-jsx - это плагин, который используется для создания функций рендеринга.
Разбор:
Babylon - это парсер, который принимает код JavaScript и превращается в AST.
На этапе лексического анализа для каждого символа, который мы пишем в коде, будет генерироваться токен.
Давайте посмотрим на токен, созданный для тега span.
{
type: {
label: 'jsxName',
keyword: undefined,
beforeExpr: false,
startsExpr: false,
rightAssociative: false,
isLoop: false,
isAssign: false,
prefix: false,
postfix: false,
binop: null
},
value : 'span'
}
Если вы видите в указанном выше токене тип метки «jsxName», это имя метки варьируется от токена к токену. Предположим, что если это текстовый узел, то тип метки в токене будет «jsxText».
Теперь Syntactic Analyzer возьмет этот поток токенов, сгенерированных при лексическом анализе, и превратит их в представление AST. Используя информацию в токенах, на этом этапе они переформатируются в AST.
На этом этапе вы можете подумать, зачем нужна фаза преобразования, если у нас есть AST. Не волнуйтесь, прочтите несколько строк ниже, и все будет ясно.
Преобразование:
Вы помните, что я сказал, что babel-transform-vue-jsx - это плагин, используемый в этом процессе компиляции?
Теперь давайте посмотрим, когда этот плагин появится на картинке, и в чем разница в AST, сгенерированном после фазы синтаксического анализа и фазы преобразования.
Перед фазой преобразования AST для тега span выглядит так, как показано ниже.
{
type : 'JSXElement',
openingElement : {..},
closingElement : {...},
children : [{
type : 'JSXText',
value : 'Hello'
}]
}
фаза синтаксического анализа не может создать правильный AST для синтаксиса HTML, который мы передаем в качестве аргумента для оператора return в JSX. если вы видите приведенный выше AST, это неправильный формат, который можно использовать для генерации функции рендеринга.
Babel-transform-vue-jsx - это плагин, который выполняет эту работу за нас. После фазы преобразования AST для написанного HTML будет иметь следующий вид:
{
type : 'Call Expression',
arguments : [{
type: "StringLiteral", value: "div"
},{
...
type : 'ObjectProperty',
key : {
name : 'attrs',
...
}
},{
...
[
{
type : 'StringLiteral',
value : 'span'
},{
type : 'StringLiteral',
value : 'Hello'
}
]
}]
}
Позвольте мне дать дополнительную информацию о том, какой будет иерархия узлов для приведенного выше фрагмента кода.
Создание узлов в AST происходит в зависимости от типа узла. Например, если он встречает что-то вроде оператора импорта, он создает узел объявления импорта типа.
Программа является узлом верхнего уровня при создании AST для JSX, функция-конструктор, имеющая оператор выражения типа, будет дочерним по отношению к узлу программы, который принимает объект в качестве аргумента, который снова имеет два узла свойств.
Первый узел свойств «el» имеет тип строкового литерала, второй рендеринг свойства имеет тип «Выражение функции», внутри тела функции снова находится узел, который имеет оператор возврата типа, который также принимает аргумент, у него есть подузел, который имеет тип Array Expression, который будет содержать элементы, находящиеся внутри основного div.
Поскольку внутри div есть только один элемент, первым дочерним элементом тега div будет тег span, который является узлом типа Array Expression, поскольку внутри тега span есть текстовый узел. Этот текстовый узел имеет строковый литерал. Так будет создаваться AST в случае JSX
Создать:
Генерация кода - это процесс, в котором мы преобразуем некоторое промежуточное представление кода в то, которое может быть легко выполнено машиной.
Он берет последний AST и превращает его обратно в строку кода, в нашем случае эта строка кода - не что иное, как функция рендеринга.
Генерация кода довольно проста: вы проходите через AST в глубину, создавая строку, представляющую преобразованный код.
На этом этапе сначала создается буфер, содержащий все строки, которые необходимо объединить для создания функции рендеринга. Затем эта функция рендеринга передается snabbdom для создания виртуальной модели DOM.
Давайте посмотрим на функцию рендеринга.
Ссылки:
Одновременно опубликовано на blog.imaginea.com
