apt.js

v0.1.3-6

Published

4 years ago

A few bytes long in-browser library, jQuery and RequireJS without the payload

0High
0Medium
0Low

frqnck

apt apt.js framework js browser libray module javascript es5 qunit dom event ajax requirejs amd

: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

Test suite

The code is covered by extensive unit testing.

:arrow_forward: Test right from your Web browser

Local automated test

We use headless Chrome and PhantomJS to run our automated testing. Installation is straight forward just run

$ yarn install

To run the automated tests:

$ yarn test

You can replace yarn by npm if that what rock your boat.

This package is also available via NPM.

Contribution

⇄ Pull requests and ★ Stars are always welcome. For bugs and feature request, please open an issue.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme