Tiny library for managing the DOM on modern browsers
npm install micro.jsshell
$ sudo npm install -g bower
$ bower install micro.js
`html
`Or via Browserify:
shell
$ sudo npm install -g browserify
$ npm install micro.js
`js
// script.js
var u = require('micro.js');
`shell
Compile browserify script.js
$ browserify script.js > browser.js
`$3
js
u(function() {
console.log('DOM is ready');
});
`$3
js
u('section');
u('#posts');
u('.box');
`$3
html
Lorem ipsum
`js
u(function() {
var newElement = document.createElement('div');
newElement.innerHTML = 'New message'; u('#posts').append(newElement);
u('#posts').prepend(newElement);
});
`$3
html
Lorem ipsum
`js
u(function() {
u('#posts').html('New message');
});
`$3
html
`js
u(function() {
var sayHello = function() {
console.log('Hello World');
}; u('button').on('click', sayHello);
u('button').off('click', sayHello);
});
`$3
js
/**
* 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);
}
});
`$3
Load database
js
u.db.load('collection');
`Save
js
u.db.save('collection', data);
`js
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
js
u.db.findOne('collection', query);
`js
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
js
u.db.find('collection', query);
`js
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
js
u.db.update('collection', id, data);
`js
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
js
u.db.remove('collection', id);
`js
u.db.remove('movies', '0ab7d8a8-ab46-35cd-ccd4-81ccfe81c3f1');
`Clear database
js
u.db.clear()
``