machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Хотите стать профессионалом в мире JavaScript!

Дата публикации Oct 3, 2019

Знаете ли вы, как работает JavaScript транспортер? Вы знаете, как работает babel? Вы знаете, как работает линтинг? Вы знаете, как работает codemod?

Если вы не знаете ответа на поставленные выше вопросы, тогда эта статья для вас.

JavaScript движется первым с новым синтаксисом и очень быстро внедряет другие методы программирования. Но браузер не может приспособить эти новые синтаксисы с такой скоростью.

Чтобы решить эту проблему, нам нужно что-то, что может изменить наш код до версии, понятной браузеру, без потери возможностей и без ошибок.

Для этого нам понадобится какой-то инструмент или метод, который сможет проанализировать код JavaScript и дать вам вывод в виде формата (JSON), где вы сможете манипулировать этим и снова генерировать код.

AST (абстрактное синтаксическое дерево)! Приходите на помощь сюда.

Этот AST звучит как тема компьютерной науки, верно? Когда я впервые услышал этот термин, я тоже почувствовал то же самое.

Поскольку это удивляет вас сейчас, это удивит вас, даже больше, когда вы будете использовать это.

Это мощная техника, и у профессионального разработчика должен быть этот навык, который дает разные возможности и делает его отличным от других.

Мне нравится получать знания, отвечая на вопросы и помогая мне получить более глубокое понимание этой темы.

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


Что такое АСТ?

AST (Абстрактное синтаксическое дерево) - это метод, который анализирует ваш код в виде дерева, которым легко манипулировать с помощью структуры данных.

[Рисунок 1]АСТ преобразование из кода JavaScript.

Дерево не включаетфигурные скобки,точка с запятой,равно,если еще,скобкииз синтаксиса, поэтому обозначается как «абстрактный». если вы видитеРисунок 1дерево вы не найдетезнак равно, в связи с его абстрактным характером.

Я знаю, что у тебя в голове много вопросов и сомнений, подожди, ты скоро все очистишься.

Насколько это полезно в качестве разработчика JavaScript?

Мы увидим некоторые варианты использования AST здесь. Если вы знаете и понимаете АСТ. Вы можете писать плагины и расширять функции, что делает вас профессиональным разработчиком.

Бабель:

[Fig2] Преобразование Bable ES6 в ES5

Вы когда-нибудь думали, как ваш код выше (fig2) преобразование происходит из ES6 в ES5, чтобы сделать его поддерживаемым для всех браузеров?

галдежсамый мощный и самый используемыйtranspiler,использует технику AST для достижения конверсии.

ESlint:

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

ESLint использует AST для оценки шаблонов в коде. AST помогает ESlint анализировать код, не выполняя его, и находить пробелы, разрывы строк, порядок импорта, как и многие другие правила, которые помогают нам находить проблемы в процессе разработки.

jscodeshift:

jscodeshift - это инструментарий для запуска codemods через несколько файлов JavaScript или TypeScript. Это обеспечивает:

Бегунок, который выполняет предоставленное преобразование для каждого переданного ему файла. Он также выводит сводную информацию о том, сколько файлов было (не) преобразовано.

Это также используется AST для рефакторинга большой кодовой базы.

Пример: вы хотите удалить использованиеcomponentWillMountиз вашего кода реакции, поскольку это устарело. И это используется во многих местах ваших компонентов React. Этот сценарий jscodeshift пригодится.


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

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

Рисунок 1:Функция с именем «foo»
fig2:Измените имя функции на «бар»
Рис3:Это код плагина Babel для выполнения той же операции.

Вышеуказанная функция является примеромплагин Babel, Это используетшаблон посетителяи обозначается какпосетительобъект. Он посетит все узлы кода и узнает обо всех типах и свойствах вашего синтаксического узла.FunctionDeclarationэто тип узла, имеющийтип, id, params,а такжетело.

fig4:Это представление AST на фиг.1

Отладить и разработать плагин (https://astexplorer.net/) это лучшее место.

Это очень простой пример, который поможет вам понять силу и то, что вы можете с ней сделать. Есть много вариантов использования, которые вы можете найти.

Вот пример использования, который я использовал в своей работе.

  1. Время сборки Feature Toggles -https://sanjaypanda.com/blogs/feature-toggles-ideas-and-uses/
  2. Удалите функциональные переключатели из кода, не нарушая код.
  3. кипарисАлго - это идея объединить файлы функций автоматического тестирования в соответствии с уникальной точкой входа Это поможет сжать повторяющийся сценарий без потери качества. Я скоро напишу пост об этом и обновлю ссылку здесь.

Я надеюсь, вам понравится этот пост! Поделитесь своим вариантом использования в комментарии ниже.

Оригинальная статья

Footer decor

© machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map