Global Variables

• About
• Underscore
• Cash
• Ajax
• Deferred
• Local storage
• Cookies
• Async
• On interaction script
• On reveal script

About

Some functions and objects are registered in window namespace and available globally:

Underscore

Underscore is a JavaScript library that provides useful functional programming helpers:

// find first even number
var value = _.find([1, 2, 3, 4, 5, 6], function(num) {
    return num % 2 == 0;
});

// render template
var string = _.template('hello: <%= name %>')({name: 'moe'});

// create throttled function
var throttled = _.throttle(updatePosition, 100);

Cash

Cash is a super small jQuery alternative which provides:

• DOM query selector
• DOM manipulation
• Collection methods

Usage example:

$('button.continue')
    .attr('id', 'next')
    .html('Next Step...')
    .on('click', function (event) {
        //
    });

Ajax

$.ajax|$.post|$.get — are the functions for ajax requests with jQuery-like API. See more on the separate page.

Deferred

$.Deferred() — is a function that creates and returns a new deferred object. It has a jQuery-compatible API.

Usage examples:

var resolvedPromise = $.Deferred().resolve();

console.log(resolvedPromise.state());

Local storage

$.storage — is a Breeze wrapper around window.localStorage that adds namespaces support and a few additional methods.

Usage examples:

// Simple storage
$.storage.set(key, value);
$.storage.get(key);
$.storage.remove(key|keys);

// Namespaced storage
var storage = $.storage.ns('vendor-module');
storage.set(key, value);
storage.get(key);
storage.keys();
storage.remove(key|keys);
storage.removeAll();

Cookies

$.cookies — is a wrapper around JS Cookie library. Our wrapper adds ability to work with JSON data in cookies.

Usage examples:

$.cookies.set(name, value);
$.cookies.get(name);
$.cookies.setJson(name, object);
$.cookies.getJson(name);
$.cookies.remove(name);

Async

$.async — is a function that will execute passed function when selector is found in DOM structure. It uses MutationObserver under the hood.

Usage example:

$.async('.selector', function (node) {
    //
});

On interaction script

$.lazy() — is a function that will execute passed function after first user interaction. It’s useful to postpone loading of not critical resources. Read more information.

Usage examples:

$.lazy(function () {
    console.log('hello!');
});

Or, you can use lazy type attribute:

<script type="lazy">
    console.log('hello!');
</script>

On reveal script

$.onReveal() — is a function that will execute passed function when passed element appear in viewport area.

Usage examples:

$.onReveal('.selector', function () {
    console.log('hello!');
});

$.onReveal('.selector', function (elements) {
    console.log('hello, we will appear soon!', elements);
}, {
    rootMargin: '150px'
});