Pages

Tuesday, January 14, 2014

JS: Templator

Here is the template manipulating class in javascript. There are 2 methods present in this class for doing the same thing but in 2 different ways. Based on requirement or comfort-level, the particular method can be chosen.
/* 
@file CTemplator.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/

// Class
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;
    }
}

// Usage
CTemplator.fitIn1('<a href="#[Link]" title="[Title]">[Content]</a>', {
    Link:'test1.html', 
    Title:'Test1', 
    Content:'Test1'
});
CTemplator.fitIn1('<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']);
There are 4 examples provided above to describe different scenarios:
  • The first example shows that the hash-array-map like object has been used for mapping each keyword present in the template. 
  • The second example shows that there could be multiple occurrence of particular keyword that would get replaced by same value which is mapped in the object.
  • The third example shows that instead of using hash-map, we can also use simple array like list where the keyword is mapped with index of the provided argument array. 
  • The fourth example shows the multiple occurrence of particular keyword and their mapped values in the list.

Saturday, January 4, 2014

JS: Communication Gateway

There is always a need of a single point of contact in every communication matter in real life. In the same way, in coding also when this technique is applied, it makes the communication easier to handle and to track the information flow. So here is an implementation of the same real life scenario in javascript. This technique can be extended or implemented in any language wherever there is a need of controlled communication.

It's working is very straight forward. All the request calls are pushed into the queue. Queue works on First-In-First-Out (FIFO) logic. So as the requests get processed, it would be removed from the queue and the next request would be sent fro processing. This works automatically until the request queue become empty.
/* 
@file communicator.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/

// Basic

function Communicator() {

    var requests = [];

    this.request = function (url, data, listener) {
        var package = {
            url: url,
            data: data,
            listener: listener
        };
        requests.push(package);
        if (requests.length == 1) {
            this.call();
        }
    }

    this.call = function () {
        var package = requests.shift();
        $.ajax({
            type: "POST",
            url: package.url,
            data: package.data,
        }).done(function (response) {
            console.log("Success: " + response);
            if (requests.length > 0) {
                this.call();
            }
            package.listener(response);
        }).fail(function (jqXHR, textStatus) {
            console.log("Failed: " + textStatus);
        });
    }

}

// Advanced

function Communicator() {

    var requests = [];
    
    var serialize = function(obj) {
        var str = [];
        for (var p in obj) {
            if (obj.hasOwnProperty(p)) {
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            }
        }
        return str.join("&");
    }

    this.request = function (url, data, listener) {
        if (typeof (data) == 'object') {
            data = serialize(data);
        }
        var package = {
            url: url,
            data: data,
            listener: listener
        };
        requests.push(package);
        if (requests.length == 1) {
            this.call();
        }
    }

    this.call = function () {
        var package = requests.shift();        
        $.ajax({
            type: "POST",
            url: package.url,
            data: package.data,
            cache: false,
            success: function(response) {
                console.log("Success: " + response);
                if (requests.length > 0) {
                    this.call();
                }
                package.listener(response);
            },
            error: function(jqXHR, textStatus){
                console.log("Failed: " + textStatus);
            }
        });
    }
}

// Usage

var oCommunicator = new Communicator();
oCommunicator.request('services.php', {
    cmd: 'login',
    arg: '["user1","pass1"]'
}, function (response) {
    console.log("Success: " + response);
});