TerrificJS skins are essentially nothing more than a JavaScript Decorator – so they allow you to extend the functionality of your modules.

TerrificJs skins are rather used sparingly. However they provides you a lot of power.

Decoration

Skins have exactly the same hooks and methods at their disposal as your TerrificJS modules. So in this chapter we only cover the decoration process in TerrificJS – for all other information please refer to the module documentation.

Basic structure of a TerrificJS Skin

(function($) {
    /**
     * Basic Skin implementation for the Default module.
     *
     * @author Remo Brunschwiler
     * @namespace Tc.Module.Default
     * @class Basic
     * @extends Tc.Module
     * @constructor
     */
    Tc.Module.Default.Basic = function(parent) {
        /**
         * override the appropriate methods from the decorated module (ie. this.get = function()).
         * the former/original method may be called via parent.<method>()
         */
        this.on = function(callback) {
            // calling parent method
            parent.on(callback);
        };

        this.after = function() {
            // calling parent method
            parent.after();
        };
    };
})(Tc.$);
    

Looking at the basic skin structure you see that it is really nothing more than a JavaScript Decorator. Like in your modules all hook methods are optional – so you don't have to implement them, if you don't need them. If a hook does not exist in your skin, TerrificJS will try to call the corresponding hook in your module automatically.