Overview/Philosophy

A small toolset that simplifies DOM traversal, event handling, and Ajax.

This library was created with one goal in mind — to stay close to vanilla.

Import

<script src="https://cdn.jsdelivr.net/gh/roecrew/[email protected]/zam.min.js"></script>

npm install node-zam

Speed Tests

Event binding

With 2,500 div tags with events mouseover and mouseleave.

Zam is 5.38 times faster than jQuery.

| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average | Library | |-------|-------|-------|-------|-------|---------|---------| | 8ms | 8ms | 8ms | 10ms | 8ms | 8.4ms | zam | | 42ms | 50ms | 42ms | 50ms | 42ms | 45.2ms | jQuery |

With 10,000 div tags with events mouseover and mouseleave.

Zam is 7.09 times faster than jQuery.

| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average | Library | |-------|-------|-------|-------|-------|---------|---------| | 20ms | 21ms | 21ms | 21ms | 22ms | 21ms | zam | | 164ms | 160ms | 153ms | 122ms | 146ms | 149ms | jQuery |

With 50,000 div tags events mouseover and mouseleave.

Zam is 6.74 times faster than jQuery.

| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average | Library | |-------|-------|-------|-------|-------|---------|---------| | 117ms | 114ms | 106ms | 112ms | 111ms | 112ms | zam | | 713ms | 766ms | 732ms | 772ms | 794ms | 755.4ms | jQuery |

Setting CSS

jsPerf findings https://jsperf.com/zam-vs-jquery

With 2,500 div tags setting all divs to font-size: 40px.

Zam is 1.47 times faster than jQuery.

| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average | Library | |-------|-------|-------|-------|-------|---------|---------| | 10ms | 9ms | 9ms | 10ms | 11ms | 9.8ms | zam | | 14ms | 15ms | 14ms | 15ms | 14ms | 14.4ms | jQuery |

With 10,000 div tags setting all divs to font-size: 40px.

Zam is 1.62 times faster than jQuery.

| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average | Library | |-------|-------|-------|-------|-------|---------|---------| | 38ms | 30ms | 35ms | 26ms | 29ms | 31.6ms | zam | | 49ms | 48ms | 49ms | 52ms | 58ms | 51.2ms | jQuery |

With 50,000 div tags setting all divs to font-size: 40px.

Zam is 1.41 times faster than jQuery.

| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average | Library | |-------|-------|-------|-------|-------|---------|---------| | 170ms | 160ms | 166ms | 128ms | 170ms | 158.8ms | zam | | 219ms | 236ms | 205ms | 201ms | 255ms | 223.2ms | jQuery |

With 250,000 div tags setting all divs to font-size: 40px.

jQuery errors out. Zam doesn't.

| Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average | Library | |-------|-------|-------|-------|-------|---------|---------| | 1496ms | 1484ms | 1471ms | 1480ms | 1478ms | 1481.8ms | zam | | * | * | * | * | * | unknown | jQuery |

* 'Maximum call stack size exceeded'

Methods

.e(selector)

String 'selector' -> optional | If undefined then last used selector is used.

Returns static NodeList

.index(element)

DOMElement 'element' -> required

Returns index

.html(html, selector)

String 'html' -> required

String or DOMElement 'selector' -> optional | If undefined then last used selector (String) is used.

Returns nothing

.on(events, selector, func)

String 'events' -> required

String 'selector' -> required

Function or String 'func' -> required

Returns nothing

.off(events, selector, func)

String 'events' -> required

String 'selector' -> required

Function or String 'func' -> required

Returns nothing

.css(declarations, selector)

String 'declarations' -> required

String or DOMElement 'selector' -> optional | If undefined then last used selector (String) is used.

Returns nothing

.each(selector, callback)

String 'selector' -> optional | If undefined then last used selector is used.

Function 'callback' -> required

Returns nothing

.addStyle(innerHTML, id)

String 'innerHTML' -> required

String 'id' -> required

Returns nothing

.removeStyle(id)

String 'id' -> required

Returns nothing

.ajax(options)

Object 'options' -> required

Returns Promise

.router(routes)

Object 'routes' -> required

See the example below to get a better idea of how .router() works.

Example

For more examples visit http://zamjs.com/examples

Router - Frontend

<html>
  <head>
    <style>
      .section {
        position: absolute;
        left 0;
        top: 60px;
        width:100%
        height: calc(100vh - 60px);
      }
      .bar-tab {
        width: 100%;
        height: 60px;
        display: flex;
        jusitify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
  <div class="bar-tab">
    <div id="home-tab">
      HOME
    </div>
    <div id="stuff-tab">
      STUFF
    </div>
    <div id="about-tab">
      ABOUT
    </div>
  </div>
  <div class="section" id="home">
      ... some content ...
    </div>
    <div class="section" id="stuff">
      ... some content ...
    </div>
    <div class="section" id="about">
      ... some content ...
    </div>
  </div>
<script src="https://cdn.jsdelivr.net/gh/roecrew/[email protected]/zam.js"></script>
<script>
var zam = new Zam();
zam.router({
    'home-tab': {view: '#home', 'display': 'flex'}, //the first route will always be the root route. i.e www.somesite.com/
    'stuff-tab': {view: '#stuff', 'display': 'flex'},
    'about-tab': {view: '#about', 'display': 'flex'}
})
</script>
</body>
</html>

Router - Backend

const http = require("http");
const fs = require("fs");
const express = require("express");
const app = express();

app.get("/*", function(req, res) {
  res.sendFile(__dirname + "/dist/home.html");
});

const httpServer = http.createServer(app);
httpServer.listen(80);