Geekly Articles each Day
📜 ⬆️ ⬇️

Includor.js, or @j includor


You are probably used to the fact that in order to connect external JavaScript code on your HTML page, you need to write long constructions like this:

<script src="JS/example.js"></script>

Much time I put up with this design, but once I was too lazy to write it, because I realized that I was quite able to reduce it to this:

 @j JS/example

And in order for this thing to come to life and connect to example.js in HTML, I implemented the Includor.js library.

Connection


To connect my library, copy this code and paste it into your HTML:
') 
 <script src="http://raw.githubusercontent.com/malyutinegor/malyutinegor.imtqy.com/master/libs/includor/includor.min.js"></script>

And then this one:

 @gj malyutinegor: malyutinegor.imtqy.com master/libs/includor/hello.js

To begin the interpretation, you must run this JavaScript code:

 I.start();

When executing this code, all library constructs like @j examaple, @c hello, etc. will automatically disappear from the HTML code, and, accordingly, from the page.

If everything went well, then you should see two messages in the console : “Includor.js is ready for use!” And “Hello, Includor.js!”

If you want to immediately copy the code, copy or download here :

 <html> <head> <title>Includor.js tests</title> <meta charset="utf-8"> </head> <body> <!-- Includes --> @gj malyutinegor: malyutinegor.imtqy.com master/libs/includor/hello <!-- Scripts --> <script src="http://raw.githubusercontent.com/malyutinegor/malyutinegor.imtqy.com/master/libs/includor/includor.min.js"></script> <script> I.start() </script> </body> </html>

HTML functionality


To connect a JavaScript file, you need to write a command in HTML, which you have already seen above:

 @j ///js/

A similar command is needed to enable CSS:

 @c //css//

You can also easily download JS and CSS from Github:

 @gj _: _ ////js// @g _: _ _///css//

JavaScript functionality


The Includor.js library also adds 2 useful features to JavaScript:

  1. I.JS (path)
    Allows you to add a new script to the HTML code.
    path - the path to the script with the extension.
  2. I.CSS (path)
    Allows you to add a new CSS table to the HTML code.
    path - the path to the CSS table with the extension.
  3. I.start ()
    The team you have already seen above. Runs an interpretation of the Includor.js constructs.

Interesting fact


The gaps between words in the construction can be of any length, so even this code will work:

 @gj githubuser :hello html/JS/example

Conclusion


My library makes it easy to connect JavaScript code and CSS tables. I really hope that she will help someone.

Thanks for attention!

PS: library source code and minified version can be downloaded from Github .

Source: https://habr.com/ru/post/315024/

More articles:


All Articles