Pages

Thursday, March 6, 2014

JS: Advanced Templator

Here is the advanced version of template manipulating class CTemplator in javascript. The basic version can replace just one key-tag in the provided template per item in hastable. While this advanced class having the method CTemplator.fitIn4() can update any occurrence of the key-tags in the provided template and replaces them with the related item in the hashtable. That means, say a template have multiple tag of name then all of them will get replaced by single item in the hashtable.
/* 
@file CTemplator.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/
var CTemplator = {
    fitIn1: function (template, hashtable) {
        var key, tag, output = template;
        for (key in hashtable) {
            tag = "[" + key + "]";
            output = output.replace(tag, hashtable[key]);
        }
        return output;
    },
    fitIn2: function (template, arglist) {
        var output = template;
         for (var i = 0; i < arglist.length; i++) {
            output = output.replace(new RegExp('@' + i, 'g'), arglist[i]);
        }
        return output;
    },
    fitIn3: function (template, hashtable) {
        var key, tag, output = template;
        for (key in hashtable) {
            output = output.replace(key, hashtable[key]);
        }
        return output;
    },
    fitIn4: function (template, hashtable) {
        var key, tag, output = template;
        for (key in hashtable) {
            tag = "\\[" + key + "\\]";
            tagx = new RegExp(tag, 'g')
            output = output.replace(tagx, hashtable[key]);
        }
        return output;
    }
};

/*
// Usage
CTemplator.fitIn1('<a href="#[Link]" title="[Title]">[Content]</a>', {
    Link: 'test1.html',
    Title: 'Test1',
    Content: 'Test1'
});
CTemplator.fitIn4('<a href="#[Link]" title="[Content]">[Content]</a>', {
    Link: 'test1.html',
    Content: 'Test1'
});
CTemplator.fitIn2('<a href="#@0" title="@1">@1</a>', ['test1.html', 'Test1']);
CTemplator.fitIn2('<a href="#@0" title="@2">@1</a>', ['test1.html', 'Test1', 'Test1']);
CTemplator.fitIn3('<a href="#Link" title="Title">Content</a>', {
    Link: 'test1.html',
    Title: 'Test1',
    Content: 'Test1'
});
*/

JS: Javascript Class/File Dependency Handler

Here is the dependency class based on singleton design pattern in javascript. This class can handle all the javascript file dependencies from inside the script. That means you don't need to include the file in the script tag under html head. In fact, you can use it just like import/include/require statements in other language.

It's usage is very simple. You just have to declare the class object which would be global since it is a singleton class, then call the import method to include the javascript file on which current file or method is dependent; then listen for the success event on which you can use that imported class/file method as specified.

/* 
@file CDependency.js
@author Abhishek Kumar
@email abhishek.kumar@intigate.com
*/

function CDependency() {
    if (arguments.callee._singletonInstance) {
        return arguments.callee._singletonInstance;
    }
    arguments.callee._singletonInstance = this;

    var list = [];

    // jquery based method
    var jqload = function (filepath, callback) {
        if (list.indexOf(filepath) < 0) {
            list.push(filepath);
            $.getScript(filepath, callback);
        } else {
            callback();
        }
    };

    this.require = function (filepath, callback) {
        jqload(filepath, callback);
    };

    this.requires = function (filepaths, callback) {
        var counter = 0;
        var loadJs = function () {
            if (counter < filepaths.length) {
                jqload(filepaths[counter++], loadJs);
            } else {
                callback();
            }
        };
        loadJs();
    }

    // basic javascript method
    this.load = function (filepath, callback) {
        if (list.indexOf(filepath) < 0) {
            list.push(filepath);
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = filepath;
            script.onreadystatechange = callback;
            script.onload = callback;
            head.appendChild(script);
        }
    }
}
/*
// Usage
oDependency = new CDependency();
oDependency.import('scripts/cache.js', function () {
    console.log('yuppie');
});
*/