JsDash - A Brutally simple Js [anti]framework

JsDash is a Javascript framework designed to bring the speed and power of a virtual DOM and the simplicity of libraries like 'jquery' to static websites.

How it works

The framework looks through the DOM on DOM load and initiates functions and ties them to specific elements.

Basic Example:

<div class="js-functionName"></div>

Onload the function 'functionName' will be initialized

var js = new Js();

js.dash.functionName = function () {
  console.log('Hello World');
}

Scoped

JsDash will crawl the 'body' element by default but can be scoped to a specific element by passing it a selector

var js = new Js('#main');

<body>
  <div id="main">
    <div class="js-functionName"></div> <!--- Initialized -->
  </div>

  <div class="js-functionName"></div> <!--- Ignored -->
</body>

The virtual DOM

When a function is initialized it has its this set to a Virtual DOM node (vnode) representing the element it was initialized on.

<body>
  <div id="elementId" class="elementClass js-functionName"></div>
</body>

js.dash.functionName = function () {
  this /* reference to the vnode of the element */
}

js.dash.functionName = function () {
  console.log(this.node()) /* This methods returns the actual DOM node */
}
/*
  - Console Log -
  <div id="elementId" class="elementClass js-functionName"></div>
*/

To retrieve the element attributes

js.dash.functionName = function () {
  console.log(this.attributes)
}
/*
 - Console Log -
 {
    class: 'elementClass js-functionName',
    id: 'elementId'
  }
*/

Properties on 'this'

dash - Returns any functions attached to this elements virtual node
childNodes - Virtual nodes of any children of the element
value - Value of the element (if its in input)

Methods attached to 'this'