Apt.js NPM | npm.io

:rocket: Apt.js – a few bytes long in-browser library

Minimalist, fast, rather-slim and pretty concise JavaScript library. Provides the flavour of both jQuery and RequireJS without the payload. Small enough to be embedded in any first-byte.

We have use this in production on Info.com and other properties since early 2009. It allowed use to reduce the payloads of our pages considerably to a just a few KBs and the number of subsequent includes/requests to just a few. Gave us immediate page rendering as it is non-blocking, reduced bandwich consumption. great with mobile traffic...

Usage

Ideally the content of dist/apt.min.js would got into the <head> of your page right below your CSS declaration however feel free to add it whichever way you want.

Short example (below $ == Apt)

<script>
  $(function(){ // wait for the DOM to ready

    // Apply a native Javascript method to a collection. 
    $('ul li').push($('<li class="bar"/>')[0]);

    // Load some files asynchrnously then run a callback
    $.src('my.css', 'my.js', function(success){});

    // Extend/add a new method using `Apt.fn`
    $.fn.toggle = function () {
      return this.each(function (e) {
        e.style.display=e.style.display=='none'?'':'none';
      })
    }
  
  // then use as follow..
  $('ul li.bar').toggle();
});
</script>

Above we use the shorthand $ to invoke Apt. Apt does not provide any jQuery like boilerplate methods but instead exposes the native JavaScript Array object methods to keep the code base light and portable. Apt stands for 'Array Prototype Touchdown'.

Apt modules

Bundle with `apt.js`

`Apt()`	// Core `Apt` selector object returns a collection.
`$`	// Alias of `Apt` if global `$` is free - jQuery like!
`$.fn`	// to extend Apt prototype.

`$.type()`	// Returns type
`$("ul li").each(...);`	// Iterare over the collection items.

- `$().push(el)` // Adds one or more elements to the end, and returns the new length of the collection.
- `$().pop(el)` // Removes and returns the last element from the collection.
- `$().shift(el)` // Same as pop() but from the beginning.
- `$().unshift(el)` // Same as push() but from the beginning.
- `$().slice(0,1)` // Extracts a section, returns a new.
- `$().slice(0,1,el)` // Add/remove from specific location.
- `$().sort()`  // Sorts
- `$().reverse()` // Reverses
- `$().concat()`  // Joins 2 or more
- `$().join()`  // Joins all elements into a string
- and the usual `unique()`, `reduce()`, `indexOf()`, `filter()`, `some()`, `map()`, `every()`, ...

$.src("/my_styles.css", "/my_scripts.jss", "...");
$.src("/my_scripts.jsonp");

You can also use a callback as the last argument.

$.src("/my_scripts.js", function(success) { console.log("success == true, succesfully loaded") } );
$.src("/my_styles.css", "/my_scripts.jss", "...", function(success) {} );

var callback = function(event){ console.log(event); }
$("div .link").on('mouseover', callback);
$("div .link").off('mouseover', callback);

var h = "Some <b>HTML</b>";
$('h1').html(h);
var out =$('h1').html(); // -> out == h

$('ul li').addClass('foo');
$('ul li').removeClass('bar');

$('.offers').css('diplay', 'none');

var callback = function(data, success, xhr){ console.log(data, success, xhr); }
$.ajax('https://api.github.com/users/frqnck', callback); // GET by default

var api = $.ajax('https://api.github.com/users/frqnck', callback, 'post');
api.send("foo=bar&buz=bar");

Additionals extra

$.getUrlVars();			//
$.getCookie('name');	//
$.rmTags(html);			//

var tpl = "Template {0} - {1}";
tpl.format(""foo", "bar");  //

- forEach()			-applies a callback to all the elements.
- map()				- creates new array thru callback.
- every() 			- tests a callback against the elements
- some()			- similar to every() but stop at first true!
- filter()          - creates new array with the elements that pass the test.
- indexOf			- returns the index of first matching element.
- reduce() 			- Iteratively reduce the array to a single value using a callback