air

Table of Contents
=================

* Air
* Install
* Design
* Usage
* API
* Core
* [air(selector, [context])](#airselector-context)
* air.Air
* [new Air(selector, [context])](#new-airselector-context)
* .dom
* .length
* [get([index])](#getindex)
* each(iterator)
* [air(selector, [context])](#airselector-context-1)
* plugin(list)
* Plugin Guide
* Plugins
* append
* attr
* children
* Plugin Groups
* Attributes
* Compatibility
* Array Access
* HTML Parsing
* AJAX
* Element Data
* XML
* Selector Extensions
* Redundancy
* Dimension
* Developer
* Test
* Cover
* Lint
* Clean
* Dist
* Spec
* Instrument
* Readme
* Roadmap
* License

Air
===

.

Lightweight, modular DOM library.

Browser targets are relatively modern browsers from IE9+, Chrome, Firefox, Safari and modern versions of Opera (post blink integration).

This library is not designed to be a drop-in replacement for jquery, it is designed to provide a modular library that is jqueryesque therefore it is best suited to new projects.

Work in progress: not yet ready for production.

Install

``
npm i air --save
`

Design

Whilst the API is similar to jquery some notable design decisions:

* Plugin architecture.
* No global variables.
* Stay focused, see compatibility.

To get a feel for how lightweight air is see air.js, the core of the system is less than 100 lines of code (with comments). All other files in lib are plugins that should be loaded depending upon your application requirements.

Usage

Designed to work with browserify by default, assuming you have configured the browserify paths option correctly for node_modules/air/lib:

`javascript
var $ = require('air');
$.plugin([
require('air/event')
])
`

Note that the plugins are namespaced to prevent potential collisions when an application is using multiple plugin-enabled components.

API

The main function air wraps a set of elements in a class that may be decorated by plugins.

$3

Core functionality is the main method, the class function and the pre-defined properties and methods on the class, see air.js.

#### air(selector, [context])

Returns an Air instance.

#### air.Air

Reference to the Air constructor.

#### new Air(selector, [context])

Class constructor.

Accepts a selector String, Element, NodeList, Air instance or array of elements.

The context argument is only applicable when a selector String argument is used and should reference the parent Element context for querySelectorAll.

When an existing Air instance is passed the underlying array is copied but the elements are not cloned.

`javascript
var $ = require('air');
$('body'); // String (selector)
$(document.querySelector('body')); // Element
$(document.getElementById('id')); // Element
$(document.querySelectorAll('div')); // NodeList
$([document.getElementById('id')]); // Array
$($('body')); // Air
`

##### .dom

The underlying array of elements.

##### .length

The number of encapsulated elements.

##### get([index])

Get the element at the specified index, if no arguments are passed the dom array is returned.

##### each(iterator)

Iterate the underlying elements, alias for dom.forEach.

##### air(selector, [context])

Alias to the main air function, allows instance methods to wrap elements using this.air().

##### plugin(list)

Alias to the plugin function, allows instance methods to load plugins via this.plugin().

Plugin Guide

Plugin functionality is provided by zephyr see the zephyr plugins documentation.

Plugins

Default plugins that may be loaded on demand, syntax examples assume that air has been aliased to $.

Everything except the core methods are implemented as plugins so there are many examples in lib.

$3

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

`javascript
$(selector, [context]).append(content);
`

* File: append.js.
* Dependencies: none.

$3

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

`javascript
$(selector, [context]).attr(name);
$(selector, [context]).attr(name, value);
$(selector, [context]).attr(attributes);
`

* File: attr.js.
* Dependencies: none.

$3

Get the children of each element in the set of matched elements.

`javascript
$(selector, [context]).children();
`

* File: children.js.
* Dependencies: none.

Plugin Groups

Plugin groups provide a convenient way to load related plugins.

$3

Element attribute plugins.

* File: attributes.js.
* Plugins: attr, class, data.

Compatibility

Some features available in jquery that there are no plans to implement.

$3

Accessing the underlying DOM elements using array bracket notation [] is not available, if you wish to access the encapsulated elements use the core methods.

$3

Whilst jquery allows HTML parsing (eg: $('

')) this library does not support it and there are no plans to implement this functionality, the rationale is:

* Confuses the semantics of $.
* You can create elements easily by chaining function calls.
* For complex requirements a template library is a better option.
* Implementing complex expressions to prevent xss attacks is not a good idea, best to avoid potentially tainted input wherever possible.

Note that recent jquery versions now recommend $.parseHTML rather than passing markup to $.

$3

This is deemed to be irrelevant to DOM manipulation and is best left to one of the many capable libraries available.

$3

The data plugin allows manipulating the data- attributes of an element but does not store any data on the element itself. If you wish to maintain data as part of your application it would be best resolved using another pattern (eg: storage).

If you really need to assign arbitrary data to an element you can always do so by directly setting properties on the element.

$3

Designed to work with HTML documents the behaviour when modifying XML documents is undefined.

$3

The jquery library extends CSS selectors with pseudo-selectors such as :checked, we believe this is unnecessary as all selector extension functionality can be achieved using other means.

$3

We aim to provide a single way to perform a task, the jquery library often provides multiple ways to achieve the same thing, for example:

* $.get() and $.toArray().
* $.append() and $.appendTo().
* $.prepend() and $.prependTo().

The air library will usually prefer the shorter and most common variant and not supply the alternatives; using the above examples the equivalent functions are $.get(), $.append() and $.prepend().

$3

Whilst the jquery dimension methods (width(), innerWidth() etc.) allow setting element dimensions we prefer (for the sake of simplicity) to make these read-only as you can already set element dimensions using the css plugin. It is possible that this may change in the future.

Developer

Developer workflow is via gulp but should be executed as npm scripts to enable shell execution where necessary.

$3

Run the headless test suite using phantomjs:

`
npm test
`

To run the tests in a browser context open test/index.html.

$3

Run the test suite and generate code coverage:

`
npm run cover
`

$3

Run the source tree through jshint and jscs:

`
npm run lint
`

$3

Remove generated files:

`
npm run clean
`

$3

Create distribution builds in dist:

`
npm run dist
`

$3

Compile the test specifications:

`
npm run spec
`

$3

Generate instrumented code from lib in instrument:

`
npm run instrument
`

$3

Generate the project readme file (requires mdp):

`
npm run readme
``

Roadmap

1. Get the core plugins stable and well tested with comprehensive code coverage.
2. Build a command line interface to generate custom plugin builds for various module standards including umd, requirejs and systemjs.

License

Everything is MIT. Read the license if you feel inclined.

Generated by mdp(1).

[node]: http://nodejs.org
[npm]: http://www.npmjs.org
[jquery]: http://jquery.com
[gulp]: http://gulpjs.com
[phantomjs]: http://phantomjs.org
[browserify]: http://browserify.org
[blink]: http://www.chromium.org/blink
[requirejs]: http://requirejs.org
[umd]: https://github.com/umdjs/umd
[systemjs]: https://github.com/systemjs/systemjs
[xss]: http://en.wikipedia.org/wiki/Cross-site_scripting
[storage]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
[jshint]: http://jshint.com
[jscs]: http://jscs.info
[zephyr]: https://github.com/socialally/zephyr
[zephyr-plugins]: https://github.com/socialally/zephyr#plugins
[mdp]: https://github.com/tmpfs/mdp