Monday, 21 December 2015

Implement the Chain Of Responsibility design pattern in Javascript

In this post we are going to see the Implementation of Chain of Responsibility design pattern in Javascript, Chaining means when a object is executed a function furthurly from the result set we can executed another set of functions

Ex: $(".txt")..load().click().focus();

sample code:




How we can manipulate the chaining of methods against the objects. Basic structure of the Chain of  Responsibility pattern




var chainPatter = function () {

};

chainPatter.prototype = {
    method1: function () {
        return this;
    },
    method2: function() {
        return this;
    }
}


From the above sample structure we are going to create a real one.



/* Chain of Responsiblity */
var HtmlEle = function (elementinp) {
    this.elementT = elementinp;
};

HtmlEle.prototype = {

    attachEvent: function (eventname, fun, capture) {
        _hook(this.elementT, eventname, fun, capture);
        return this;
    },
    click: function (fun) {
        this.attachEvent("click", fun, false);
        return this;
    },
    load: function (fun) {
        this.attachEvent("load", fun, true);
        return this;
    },
    blur: function (fun) {
        this.attachEvent("blur", fun, true);
        return this;
    },
    focus: function (fun) {
        this.attachEvent("focus", fun, true);
        return this;
    },
    windowLoad: function (fun) {
        this.attachEvent("DOMContentLoaded", fun, false);
        return this;
    },
    value: function () {
        return this.elementT.value;
    }
};



object of Htmlele is used to create a instance against the element then we can chaining the functions against the element.

How we can chaining the methods in the object, let we some code, then we see the real sample code.


new HtmlEle(document).windowLoad(fun).focus(fun);

 var fun = function (){
     console.log("called"); 
 }

Code:



/* using the chaining method in Module pattern*/
var HtmlParser = (function () {

    /* private construction */
    function findType(tagname) {
        var _searchType = tagname.substring(0, 1);
        if (_searchType == ".")
            return "class";
        else if (_searchType == "#")
            return "id";
        else
            return "tag";
    }

    return {
        GetValue: function (elementT) {
            var _type = findType(elementT);
            var _element;
            switch (_type) {
                case "class":
                    _element = document.getElementsByClassName(elementT.substr(1));
                    break;
                case "id":
                    _element = document.getElementById(elementT.substr(1));
                    break;
                case "tag":
                    _element = document.getElementsByTagName(elementT);
                    break;
            }

            return _element.value;
        },
        _element: function (elementT) {
            var _type = findType(elementT);
            var _element;
            switch (_type) {
                case "class":
                    _element = document.getElementsByClassName(elementT.substr(1));
                    break;
                case "id":
                    _element = document.getElementById(elementT.substr(1));
                    break;
                case "tag":
                    _element = document.getElementsByTagName(elementT);
                    break;
            }
            return new HtmlEle(_element);
        },
        _loadDocument: function (fun) {
            return new HtmlEle(document).windowLoad(fun);
        }
    }

})();



/* chain pattern to load the document and pass the callback */
HtmlParser._loadDocument(function () {

    var buttonEle = HtmlParser._element("#check");

    buttonEle.click(function () {
        alert(HtmlParser._element("#test1").value());
    })
        .focus(function () {
            console.log("focus");
        });

    HtmlParser._element("#bdy").load(function () {
        console.log("body loaded");
    });

    HtmlParser._element("#div1").blur(function () {
        console.log('out of focus');
    })
        .click(function () {
            console.log("div clicked");
        });

});





From this post you can learn how to create a Chain of Responsibility design pattern in JavaScript.

No comments:

Post a Comment