FunctionSack

No more heavy JavaScript frameworks!

FunctionSack is like its name - a sack of JavaScript functions. It's not a framework. It doesn't force you to learn any new philosophy or ideology. It's a toolikt that provides useful functions for several areas - from type recognition to AJAX. What's important - FunctionSack is fully customizable, so you can take from it only what you want and make your own lightweight library. Stop reading this - go to the download page and try yourself.

Find out 'Why FunctionSack?' in 3 bullet points, 5 examples and 2 architectural descriptions

Features

  • Customizable download - take only these features you need
  • Platform-independent:
    • Browsers: FF 2.0+, Chrome, Opera 9+, IE 6+, Safari 2+, WebKit
    • CommonJS (Node.JS, RingoJS, V8CGI, ...)
    • Shells - Rhino, SpiderMonkey
    • RequireJS
  • Side effect free, stateless functions
  • Customizable main namespace name
  • Open source and open format - you can influence the future of the library (see New function)
  • ECMAScript 5 compliant - it uses ES5 features (when available) and it can provide them to ES3 environments
 

Modules

  • core - mixin, bind, toArray, ...
  • type - improved typeof, dedicated type checkers
  • obj - object manipulation, traversing and testing
  • str - templates and string manipulation
  • es5 - ECMAScript 5 functionality in ECMAScript 3 environments
  • env - environment recognition (is ES5 supported?, is DOM available?, does it run on Node.JS? ...)
  • dom - essential functions for cross-browser DOM and event manipulation plus DOM builder
  • ajax - cross-browser AJAX support
  • prototype - useful add-ons for those who like to manipulate on standard prototypes (module can be disabled for those who don't).

Example

Lets see FunctionSack in action. Example below tries to show as much as possible in a single function. The virtual problem shows situation when we need to load user data from external file and display them in the browser as a list. To complicate the situation - we suppose that original user object have plenty of data, but for our needs we want to simplify them - get rid of all methods and properties containing falsy values. The result of this function is an array of (simplified) user objects.
If the example seem to be complex, please read our How to start page first.

/**
 * Function loads user data from given location and displays them in 
 * a DOM element specified by ID. The code has been simplified for
 * FunctionSack demonstration purposes - normally the logic and UI  
 * should not be mixed together. There is also no error handling.
 */
var loadUsers = function(url, elementID){

    // function fails in environments without DOM or ECMAScript 3 support
    if( !fs.env.DOM || fs.env.ES_VERSION < 3 ){
        throw new Exception("Not supported environment");
    }
    
    // an array of users
    var users = [];
    
    // FunctionSack synchronous AJAX loader
    var data = fs.ajax.loadSync({url:url});
    data = JSON.parse( data );
    
    // DOM builder (more advanced usage below)
    var list = fs.dom.create("ul", {id:"users"});
    
    // FunctionSack supports ECMAScript 5 features
    // and makes them available on ECMAScript 3 environments
    data.users.forEach(function(userData){
        
        // for each object from data.users array we create a new object
        // which contains only non-function and non-empty properties
        // from the original one
        var user = fs.obj.filter(userData, function(name,type,desc){
                // with FunctionSack comparison to "function" type is safe
                // (it won't return "function" for RegExp on V8/Chrome) 
                return type !== "function" && !fs.type.isFalsy(desc.value);
            });
        
        // some - another useful ECMAScript 5 method
        var contains = users.some(function(u){
                // deepEqual compares two objects by value (recursively)
                return fs.obj.deepEqual(u, user);
            });
        if( !contains ) {
            users.push(user);
        }
        
        // now lets create DOM Element from user data and append it to 
        // ul element created before. Each DOM element looks like this:
        // <li class="user"><strong>login</strong>: firstname lastname</li>
        // text is created without concatenation, but with format method
        fs.dom.append(list, 
            fs.dom.create("li",{ "class": "user" },
                fs.dom.create("strong",{}, user.login),
                fs.str.format(": {firstname} {lastname}", user)));
    });
        
    // display list of users in particular place of the page
    // accessed by element ID. Remove previous list first
    fs.dom.removeChildNodes(elementID);
    fs.dom.append(elementID, list);
    
    // emit custom event for the users-pane, passing
    // users array as a parameter
    fs.dom.dispatchEvent(elementID, "list-ready", users);
    
};

What next?

Read more about FunctionSack modules in How to start or simply see our API.
If you feel not very convinced to the solution, please read Why FunctionSack article.
Whatever you read we recommend to practice the examples. So - download FunctionSack first.