Вы наверняка привыкли, что для того, чтобы подключить внешний 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.: исходный код библиотеки и минифицированную версию можно скачать на Гитхабе.
Автор: GLaDosSystem
