Вы наверняка привыкли, что для того, чтобы подключить внешний 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.: исходный код библиотеки и минифицированную версию можно скачать на Гитхабе.
Комментарии (48)
lair
11.11.2016 16:15+10я реализовал библиотеку Includor.js.
… для подключения которой нужно написать длинный код. Смысл?
(не говоря уже о том, что в приложениях с сервер-сайдом все может быть совсем иначе)
iAchilles
11.11.2016 16:17+2Однако, для того чтобы подключить вашу библиотеку, все также придется использовать длинные конструкции вроде этой
<script src="http://raw.githubusercontent.com/malyutinegor/malyutinegor.github.io/master/libs/includor/includor.min.js"></script>
tmnhy
11.11.2016 16:25+27Резюме:
если вы не хотите писать свою длинную строку, напишите мою длинную строку, а после этого вам все-таки придется написать и свою строку тоже.
KlimovDm
11.11.2016 16:27+4Странно,
— вы вроде из за лени сокращаете конструкцию, но в предлагаемом решении кода пишете больше, чем если бы этого не делали.
— вы придумали новую лишнюю сущность, выполняемую на стороне клиента. Причем с одной целью — «однажды мне стало лень писать». Правильно я понимаю?GLaDosSystem
12.11.2016 20:58GLaDosSystem
12.11.2016 21:02-1Во вторых, если подключать больше JS-ов, меньше кода становится.
KlimovDm
13.11.2016 00:38+1Или вы даже не пытайтесь разобраться и понять то, что вам уже написали в комментариях… Или вся статья — стеб и провокация.
GLaDosSystem
13.11.2016 09:17-1@j hello <script src="hello.js"></script>
Где меньше кода?fedorro
13.11.2016 10:46В втором случае меньше кода, т.к. чтобы первый вариант заработал нужно гораздо больше кода.
fedorro
11.11.2016 16:31+14Было:
— Нормальная ссылка на скрипт, по которой можно было перейти прямо из исходника.
Стало:
— Конструкции, синтаксис которых, видимо, не понимают средства разработки HTML.
— Всё равно ссылка на скрипт, который парсит всю страницу. (Замедление 1)
— Остальные скрипты начинают грузиться после выполнения этого скрипта. (Замедление 2)
— Ссылки на скрипты обычно сразу дают в формате прямой ссылки на загрузку, или вместе с тегом script (на страницах документаций к библиотекам), а теперь их необходимо подгонять под новый формат (а это гораздо больше телодвижений, чем написать тег script).
— Ну и вообще добавление ссылок на скрипты это не такая частая операция чтобы экономить пару лишних нажатий на кнопки (с учётом автодополнений).fedorro
11.11.2016 16:48+7Ну и и к тому же этот скрипт съест доменную часть всех почтовых адресов вида *@j*, *@c*, *@gj*, *@gc* — как показал тест.
fedorro
11.11.2016 17:17+9+ Шикарный XSS, стоит только отправить сообщение, или что-то ещё вида: Привет!@gj xuser: xuser.github.io main/xss
aquamakc
11.11.2016 16:58+1Может было бы проще написать простой скрипт на том-же питоне, который за вас формировал бы строчки типа:
<script src="JS/example.js"></script>
vintage
11.11.2016 17:08+7То есть вы предлагаете вместо этого:
<html> <head> <title>No Includor.js tests</title> <meta charset="utf-8"> </head> <body> <script src="//malyutinegor.github.io/libs/includor/hello.js"></script> </body> </html>
писать вот это:
<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>
?
Как же мы раньше-то без этого жили...
Isopropil
11.11.2016 19:54+2Эмм… А это точно 2016 год? Эпоха ES2016 и Webpack? Или автор только сегодня очнулся от длительного криосна? Если так — может быть кто-нибудь расскажет автору хотя бы про сниппеты/темплейты в IDE?
MetaDone
11.11.2016 19:56может я что-то не понял, но вот к примеру есть у меня gulp-задача, которая все скрипты/стили в 1 склеивает. Какой тогда смысл в этой библиотеке, если все что мне нужно будет окажется в нужном месте?
dom1n1k
11.11.2016 22:51+3Минус за статью (описанная методика — бесполезное г-но) и плюс в карму (автор занятный индивид, интересно что он ещё придумает :)
gearbox
12.11.2016 00:08+1Поддержал. Автору — если стало обидно за бесполезное говно — сделайте то же самое, но кастомным тегом, половина претензий высказанных выше — снимется. Что то типа
<script src="uberpackage_from_npm" v="^4.0.3" is="npmloader" />
solshark
12.11.2016 20:39-1А можно из этого сделать плагин для jQuery?
GLaDosSystem
12.11.2016 20:55-2Я раньше пользовался jQuery, потом как-то перестал и все забыл уже. Можете напомнить и объяснить, что вы имеете в виду? :)
FrozenInternet
13.11.2016 07:46-1Парень или знатный троль или реально не вдупляет. Это так прикольно XD
Svet6os6laV6
13.11.2016 07:43Странно, похоже автор пользуется блокнотом… ибо в разных ide давно используется автоподставка, в саблайме например есть плагин "emmet", установил и как бог с неба, все сам написал за тебя. Не вижу смысла как тут многие писали выше подключать какие-то библиотеки
GLaDosSystem
13.11.2016 07:43Я ноутпадом++ пользуюсь.
GLaDosSystem
13.11.2016 07:47-1Там эммет есть.
GLaDosSystem
13.11.2016 07:48-1Прикол в том, что кто-то, может, и не захочет его устанавливать.
Svet6os6laV6
13.11.2016 10:00+1Ну если выбирать только 1 подключение на все свои дальнейшие проекты то лучше использовать emmet а приведенную выше библиотеку придется подключать постоянно.Глупо как мне кажется.Ведь все уже написано давным давно за нас, нужно просто изучить и правильно использовать.Автор молодец, заморочился и применил свои навыки, но как мне кажется этот продукт не будет востребован :D
yellow79
15.11.2016 18:06Мне кажется куда проще сделать вот так:
function addScript(arr, target){ for(var i in arr) { var s = document.createElement("script"); s.type = "text/javascript"; s.src = arr[i]; target.appendChild(s); } } addScript(["JS/example-1.js","JS/example-2.js","JS/example-3.js"], document.body);GLaDosSystem
15.11.2016 18:07Там есть такие функции :)
I.JS(path)
Позволяет вам добавить новый скрипт в HTML-код.
path — путь до скрипта с расширением.
I.CSS(path)
Позволяет вам добавить новую CSS-таблицу в HTML-код.
path — путь до CSS-таблицы с расширением.
zag2art
не понял, какова добавочная ценность?
DrPass
Это каноничный пример ещё одной JS-библиотеки, которая ничего полезного не делает, но зато увеличит объем кода вашей страницы.
GLaDosSystem
Это только первая версия, я сейчас делаю на node.js, которая будет нам уже нашу страничку с конструкциями преобразовывать в обычные теги.
DrPass
Ну т.е. вы считаете, что и скрипты под NodeJS слишком мало бесполезного кода выполняют, надо добавить?
GLaDosSystem
Я просто сказал, куда мне надо двигаться, исходя из мнения других комментаторов поста.
DrPass
Хм. Насколько я прочитал других комментаторов, они почти все единодушно полагают, что вам в этом направлении лучше вообще не двигаться.