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.


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

        this.after = function() {
            // calling parent method

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.