Needless to say, native JavaScript provides the best performance, but handling different browser implementations is very tiresome and surely justifies encapsulating functionality in a library.

Manipulator attempts to be as close to Native JavaScript as possible, to facilitate your own mix of library and native JavaScript. About 60% of the functions in the library are only included to fix crossbrowser issues in a simple way, the rest are encapsulating complex tasks in simpler wrapper functions for ease of use - but with careful consideration. It is a design principle of Manipulator to thoroughly consider performance cost/benefits when adding new functions. Encapsulation will by nature limit flexibility and impact performance, as the code will have to consider more options than the one you need to perform at any given time.

Though one of the primary goals of Manipulator is to maintain high performance, in practice you can easily include any function in your own Manipulator bundle if you so desire and popular demand can dictate inclusion of even performance problematic functions as well.

Compromise is daily bread for the idealist, given the world we live in.

Library basics

The library uses the u and Util namespaces (u is short for Util). In some cases the function names also exist in a shorthand version, just to make it faster to write common functions.

In other words, ALL Manipulator functions starts with u or Util. For example:

u.ac(scene, "example");

is the same as

Util.addClass(scene, "example");

A common methodology is having the node to perform the given function on be the first parameter. Obviously it would be closer to native JavaScript to use prototypes to extend the DOM nodes, but the cost/benefit analysis quickly rules out this method, as it simple slows down DOM manipulation too much.

The extended namespaces

When the functionality scope becomes sufficiently complex or when it makes sense to avoid nameclashes, extended namespaces can be introduced. Extended namespaces are commonly devided into specific groups for load optimization - that way you can just include what you need in any given project.

Util.Animation = u.a

Animations and functions related to performing animations.

  • u-animation - for plain CSS3 animations and transitions
  • u-animation-to - for advanced animations and custom transitions

Util.Events = u.e

Events base and all event related functions.

  • u-events.js - for plain event handlers
  • u-events-movements.js - for drag, swipe and overlap detection
  • u-events-browser.js - for browser events like scroll, resize and load events

Util.Form = u.f

Form initialization, extension and building.

  • u-form.js - complex form initialization
  • u-form-builder.js - building and extending forms

Util.History = u.h

Url/Hash change event handler for Ajax based navigation and history implementation.

Util.Keyboard = u.k

Keyboard shortcut handler

Util.Timer = u.t

Timeout and interval handler