Includor.js, или @j includor

в 13:09, , рубрики: html, Includor.js, javascript, jsincludes
Includor.js, или @j includor - 1

Вы наверняка привыкли, что для того, чтобы подключить внешний 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 полезные функции:

  1. I.JS(path)
    Позволяет вам добавить новый скрипт в HTML-код.
    path — путь до скрипта с расширением.
  2. I.CSS(path)
    Позволяет вам добавить новую CSS-таблицу в HTML-код.
    path — путь до CSS-таблицы с расширением.
  3. I.start()
    Команда, которую вы уже видели выше. Запускает интерпретацию конструкций Includor.js.

Интересный факт

Промежутки между словами в конструкции могут любой длины, поэтому сработает даже такой код:

@gj      githubuser      :hello            html/JS/example

Заключение

Моя библиотека позволяет легко подключать JavaScript-код и CSS-таблицы. Очень надеюсь, что она кому-то поможет.

Спасибо за внимание!

P.S.: исходный код библиотеки и минифицированную версию можно скачать на Гитхабе.

Автор: GLaDosSystem

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js