Script

Simple APIs to interact with the DOM and organize your logic

Functions #

Wee exposes a unique option to referencing functions. Wherever you can provide a callback you can also use a ‘controllerName:methodName’ string. You can also always use a standard generic function or function reference.

Wee.fn.make('controllerName', {
    methodName: function() {
        // Method logic
    }
});
Wee.screen.map({
    size: 3,
    callback: 'controllerName:methodName'
});

Since the string method isn’t supported in JavaScript natively if you ever need to use the format outside of a supported context you can use the $exec method.

Wee.$exec('controllerName:methodName');

When executing multiple methods you can use an array format. You can also mix method options in the array.

Wee.routes.map({
    $any: [
        'controllerName:methodName',
        Wee.controllerName.methodName,
        function() {
            // Callback logic
        }
    ]
})

Globals #

  • Wee._body - document.body
  • Wee._doc - document
  • Wee._html - document.documentElement
  • Wee._slice - Array.slice
  • Wee._win - window

Selection #

Wee accepts any browser-supported selection queries. Internally Wee parses the selection string to invoke the most efficient native selection method and returns an array of matching nodes.

Examples

$('#id');
$('.class');
$('#id .class');
$('.class1, .class2');
$('.parent > .child');

References are a logical approach to selecting elements. They are cached when the page loads making them extremely quick to reference and are more visually distinct in markup than js- classes. Anywhere you can pass a standard selector you can also pass a ‘ref:name’ string.

<div data-ref="element"></div>
$('ref:element');

Note: References can’t be used in subset selectors like $('ref:element .child'). To scope a selection within a reference pass the ref selector as the context argument like $('.child', 'ref:element').

If multiple references are set with the same name they are pushed into an array and can be targeted with a single ref selection. You can also provide a comma-delimited list of multiple refs.

<div data-ref="element"></div>
<div data-ref="element element2"></div>
$('ref:element').on('click', function() {
    // Method logic
});

$('ref:element, ref:element2').on('click', function() {
    // Method logic
});

Note: Wee.$setRef() can be called to update the ref cache as needed.