Новый тэг и парсер в HTML - PullRequest
Новая
       6

Новый тэг и парсер в HTML

0 голосов
/ 20 декабря 2018

Я набросал новый язык программирования для сценариев на стороне клиента.Я знаком с тем, как создать язык, и с большей частью работы, которая в него входит.Я готов к длинному проекту, но у меня есть несколько вопросов о том, как внедрить его в файл HTML.Я хотел бы реализовать что-то вроде тега в HTML, и я нашел несколько ссылок, объясняющих, как добавить новый тег в HTML.Я полагаю, что разработчики должны будут подключиться к js-файлу с синтаксическим анализатором языка (на самом деле это больше, чем анализатор, но это не главное) в заголовке их HTML-файла, например: <script src="my-lang.js"></script>.Вот некоторые ссылки, которые я нашел: https://blog.teamtreehouse.com/create-custom-html-elements-2 https://developers.google.com/web/fundamentals/web-components/customelements

Вот некоторые из моих вопросов, при условии, что я хочу, чтобы мой язык междутеги:

  1. Как предотвратить синтаксический анализатор HTML браузера от неверного истолкования того, что находится втеги как HTML-код?Весь код на моем языке будет отображаться в виде простого текста на веб-сайте из того, что я вижу.
  2. Как я могу внедрить мой анализатор в файл JS?Я не спрашиваю, как разобрать пользовательский язык, просто где его поставить.Первая ссылка упоминает функцию createdCallback(), которая вызывается, когдатег используется.Предполагая, что никто не добавляетПозвольте тегу JavaScript позже (что для этого языка было бы бессмысленно), этот обратный вызов должен вызываться каждый раз, когда используется пользовательский тег.
  3. Чтобы разобрать мой язык, должен ли я получить доступ к атрибуту innerHTML моего пользовательского тега?Я не знаю, имеет ли время разбор тега даже этот атрибут, или мне нужно добавить этот атрибут, поскольку я не знаком с тем, как эта часть работает.

Спасибо замириться с моими глупыми вопросами.Мне нравится углубляться в этот материал, хотя я довольно новичок в этой части сценариев.По сути, я хочу, чтобы код выглядел следующим образом: 

<!DOCTYPE html>
<html>
    <head><script src="my-lang.js"></script></head>
    <my-language>
        //do some stuff in my language, like DOM editing. 
        //Just a replacement for JavaScript basically that doesn't serve much purpose.
    </my-language>
</html>

Будем благодарны за любые предложения.Заранее спасибо!

1 Ответ

0 голосов
/ 20 декабря 2018

Вместо того, чтобы использовать новый нестандартный тег в HTML, я бы рекомендовал использовать тег <script>.Хотя <script> теги часто для Javascript, это не всегда так.Например, одним из возможных способов отправки сервером данных JS-клиента для анализа является помещение JSON в тег типа <script type="application/json">{"foo":"bar"}</script>.Скрипты с типами, отличными от type="javascript", не будут пытаться анализироваться как Javascript, но данные внутри тега могут быть извлечены с помощью Javascript.Вы можете сделать это, выбрав тег, а затем открыв его свойство textContent.(Свойство innerHTML, вероятно, подходит только тогда, когда вы намеренно хотите получить разметку HTML - в противном случае, вероятно, лучше всего использовать textContent)

Вы можете использовать почти такой же метод, но вместо JSON.parse ingсодержимое тега <script>, отправьте его через ваш анализатор.

Например: 

const tag = document.querySelector('script[type="myNewLanguage"]');
const scriptText = tag.textContent;

// use your parser to parse scriptText
scriptText.split('\n').forEach(line => {
  console.log(line);
});
<script type="myNewLanguage">foo
bar
baz</script>
...