micro.js

Tiny library for managing the DOM on modern browsers

Usage

Load

Via Bower:

$ sudo npm install -g bower
$ bower install micro.js

<script src="bower_components/micro.js/micro.min.js"></script>

Or via Browserify:

$ sudo npm install -g browserify
$ npm install micro.js

// script.js
var u = require('micro.js');

# Compile browserify script.js
$ browserify script.js > browser.js

DOM Ready

u(function() {
  console.log('DOM is ready');
});

Selectors

u('section');
u('#posts');
u('.box');

Append and prepend

<section id="posts">
  <div>Lorem ipsum</div>
</section>

u(function() {
  var newElement = document.createElement('div');
  newElement.innerHTML = 'New message';

  u('#posts').append(newElement);
  u('#posts').prepend(newElement);
});

HTML

<section id="posts">
  <div>Lorem ipsum</div>
</section>

u(function() {
  u('#posts').html('New message');
});

Events

<button>Say hello</button>

u(function() {
  var sayHello = function() {
    console.log('Hello World');
  };

  u('button').on('click', sayHello);
  u('button').off('click', sayHello);
});

AJAX

  /**
   * Defaults settings:
      type: 'GET'
      async: true
      cache: false
      cacheDB: 'xhrs'
      minutesCached: 5
      success: (res) ->
      error: (res) ->
      contentType : 'application/json'
      headers: {}
      crossDomain: false
      timeout: 0
   */
  u.ajax({
    type: 'GET',
    url: 'http://localhost:3000/movies',
    success: function(res) {
      console.log('AJAX success response', res);
    },
    error: function(res) {
      console.log('AJAX error response', res);
    }
  });

  // Cached GET AJAX
  u.ajax({
    type: 'GET',
    url: 'http://localhost:3000/movies',
    cache: true,
    cacheDB: 'xhrs',
    minutesCached: 5,
    success: function(res) {
      console.log('AJAX success response', res);
    },
    error: function(res) {
      console.log('AJAX error response', res);
    }
  });

  u.ajax({
    type: 'POST',
    url: 'http://localhost:3000/movies',
    data: {title: 'Lorem', description: 'Ipsum'},
    success: function(res) {
      console.log('AJAX success response', res);
    },
    error: function(res) {
      console.log('AJAX error response', res);
    }
  });

  // FORM DATA
  var formData = new FormData();
  formData.append('title', 'Lorem');
  formData.append('description', 'Ipsum');

  u.ajax({
    type: 'POST',
    url: 'http://localhost:3000/movies',
    contentType: false,
    data: formData,
    success: function(res) {
      console.log('AJAX success response', res);
    },
    error: function(res) {
      console.log('AJAX error response', res);
    }
  });

Local database

Load database

u.db.load('collection');

Save

u.db.save('collection', data);

var movie = {
  title: "Die Hard",
  genre: "Action",
  director: "John McTiernan",
  description: "John McClane, officer of the NYPD, tries to save wife Holly
  Gennaro and several others, taken hostage by German terrorist Hans Gruber
  during a Christmas party at the Nakatomi Plaza in Los Angeles."
};

u.db.save('movies', movie);

/** Result: Saved Object (autogenerated id)
  {
    uuid: "0ab7d8a8-ab46-35cd-ccd4-81ccfe81c3f1",
    title: "Die Hard",
    genre: "Action",
    director: "John McTiernan",
    description: "John McClane, officer of the NYPD, tries to save wife Holly
    Gennaro and several others, taken hostage by German terrorist Hans Gruber
    during a Christmas party at the Nakatomi Plaza in Los Angeles."
  }
*/

Find one

u.db.findOne('collection', query);

u.db.findOne('movies', { title: 'Die Hard' });

/** Result: Object
  {
    uuid: "0ab7d8a8-ab46-35cd-ccd4-81ccfe81c3f1",
    title: "Die Hard",
    genre: "Action",
    director: "John McTiernan",
    description: "John McClane, officer of the NYPD, tries to save wife Holly
    Gennaro and several others, taken hostage by German terrorist Hans Gruber
    during a Christmas party at the Nakatomi Plaza in Los Angeles."
  }
*/

Find all

u.db.find('collection', query);

u.db.find('movies', { genre: 'Action' });

/** Result: Objects array
  [{
    uuid: "0ab7d8a8-ab46-35cd-ccd4-81ccfe81c3f1",
    title: "Die Hard",
    genre: "Action",
    director: "John McTiernan",
    description: "John McClane, officer of the NYPD, tries to save wife Holly
    Gennaro and several others, taken hostage by German terrorist Hans Gruber
    during a Christmas party at the Nakatomi Plaza in Los Angeles."
  }]
*/

Update

u.db.update('collection', id, data);

u.db.update('movies', '0ab7d8a8-ab46-35cd-ccd4-81ccfe81c3f1', { genre: "Action/Thriller" });

/** Result: Updated Object
  {
    uuid: "0ab7d8a8-ab46-35cd-ccd4-81ccfe81c3f1",
    title: "Die Hard",
    genre: "Action/Thriller",
    director: "John McTiernan",
    description: "John McClane, officer of the NYPD, tries to save wife Holly
    Gennaro and several others, taken hostage by German terrorist Hans Gruber
    during a Christmas party at the Nakatomi Plaza in Los Angeles."
  }
*/

Remove

u.db.remove('collection', id);

u.db.remove('movies', '0ab7d8a8-ab46-35cd-ccd4-81ccfe81c3f1');

Clear database

u.db.clear()