Вы наверняка привыкли, что для того, чтобы подключить внешний JavaScript код на вашей HTML-страничке, нужно писать длинные конструкции вроде этой:
<script src="JS/example.js"></script> Много времени я мирился этой конструкцией, но однажды мне стало лень писать её, потому что понял, что мне вполне по силам сократить её до такой:
@j JS/example И для того, чтобы эта штука ожила и подключила к HTML example.js, я реализовал библиотеку Includor.js.
Подключение
Чтобы подключить мою библиотеку, скопируйте этот код и вставьте в свой HTML:
<script src="http://raw.githubusercontent.com/malyutinegor/malyutinegor.github.io/master/libs/includor/includor.min.js"></script> А потом этот:
@gj malyutinegor: malyutinegor.github.io master/libs/includor/hello.js Чтобы начать интерпретацию, необходимо выполнить этот JavaScript-код:
I.start(); При выполнении этого кода все конструкции библиотеки вроде @j examaple, @c hello и т.д. автоматически исчезнут из HTML-кода, и, соответственно, со страницы.
Если всё прошло успешно, то у вас в консоли должны появиться два сообщения: «Includor.js is ready for use!» и «Hello, Includor.js!»
Если вы хотите сразу скопировать код, копируйте или тут скачайте:
<html> <head> <title>Includor.js tests</title> <meta charset="utf-8"> </head> <body> <!-- Includes --> @gj malyutinegor: malyutinegor.github.io master/libs/includor/hello <!-- Scripts --> <script src="http://raw.githubusercontent.com/malyutinegor/malyutinegor.github.io/master/libs/includor/includor.min.js"></script> <script> I.start() </script> </body> </html>
Функционал HTML
Чтобы подключить файл JavaScript, надо написать команду в HTML, которую вы уже видели выше:
@j путь/до/вашего/js/безрасширения Похожая команда нужна, чтобы подключить CSS:
@c путь/доВашего/css/без/расширения Можно также легко загрузить JS и CSS с Github:
@gj имя_пользователя: репозиторий_пользователя веткаРепозитория/путь/до/вашего/js/без/расширения @gс имя_пользователя: репозиторий_пользователя ветка_репозитория/путьДо/вашего/css/без/расширения
Функционал JavaScript
Также библиотека Includor.js добавляет в JavaScript 2 полезные функции:
- I.JS(path)
Позволяет вам добавить новый скрипт в HTML-код.
path — путь до скрипта с расширением. - I.CSS(path)
Позволяет вам добавить новую CSS-таблицу в HTML-код.
path — путь до CSS-таблицы с расширением. - I.start()
Команда, которую вы уже видели выше. Запускает интерпретацию конструкций Includor.js.
Интересный факт
Промежутки между словами в конструкции могут любой длины, поэтому сработает даже такой код:
@gj githubuser :hello html/JS/example
Заключение
Моя библиотека позволяет легко подключать JavaScript-код и CSS-таблицы. Очень надеюсь, что она кому-то поможет.
Спасибо за внимание!
P.S.: исходный код библиотеки и минифицированную версию можно скачать на Гитхабе.
ссылка на оригинал статьи https://habrahabr.ru/post/315024/
Добавить комментарий