Write HTML In JavaScript - jQuery Aris

File Size: 20.7 KB
Views Total: 397
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Write HTML In JavaScript - jQuery Aris

Write CSS In JS is now a pretty hot technique in modern component design. What About Write HTML In JavaScript?

Aris is a lightweight yet robust and fast html-in-js engine built with jQuery that allows developers to quickly and directly code, change, delete HTML (tags, content, attributes) in the JavaScript without any unexpected consequences and avoid dead code.

More Features:

  • Load load JavaScript and CSS files for better performance.
  • Hash Routing support. Makes anchor links work in SPA applications.

How to use it:

1. To get started, include the Aris JavaScript after the latest jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/aris.js"></script>

2. Write your HTML with context in the JavaScript as follows:

$('.container').html(HTML(
  ['div', {
    class: 'alert alert-info',
    // more attributes here
    },
    ['button', 'Action Button', {
      class: 'btn btn-danger',
      // more attributes here
    }],
    ['p', 'custom text',{
      class: 'lead',
      // more attributes here
    }
  ]
]));

3. Will be transformed into...

<div class="container">
  <div class="alert alert-info">
    <button class="btn btn-danger">Action Button</button>
    <p class="lead">custom text</p>
  </div>
</div>

4. Escape HTML special characters using the HTML.escape() method.

HTML.escape(text);

5. The plugin also supports write SVG in the JavaScript.

HTML(['svg', {xmlns: 'http://www.w3.org/2000/svg',
  width: '30px', height: '30px', viewBox: '0 0 30 30'},
  ['circle', {class: 'frame', cx: 15, cy: 15, r: 12}],
  ['path' {class: 'hand hour', d: 'M15,15 L20,15'}],
  ['path' {class: 'hand minute', d: 'M15,15 L15,2'}],
  ['path' {d: 'M0,0 L1,1'}],
  ['path' {d: 'M0,0 L1,1'}],
  ['text', {x: 0, y: 0}, 'Path can be also be called without args!']
])

6. Lazy load JavaScript and CSS files and auto prefix CSS styles to improve the page load speed.

HTML.load('1.js', '2.css', ...).done(function(){
  // do something here
});

7. Enable hash routing on anchor links.

HTML.route("#path/to/anchor", function(){
  // do something here
})

HTML.route.go("#path/to/anchor");
HTML.route.go("#:path/to/anchor");
HTML.route.go("#:path/:to/:anchor");
HTML.route.go();

This awesome jQuery plugin is developed by Vectorized. For more Advanced Usages, please check the demo page or visit the official website.