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
From the above sample structure we are going to create a real one.
How we can chaining the methods in the object, let we some code, then we see the real sample code.
Code:
/* chain pattern to load the document and pass the callback */
From this post you can learn how to create a Chain of Responsibility design pattern in JavaScript.
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.
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);
}
}
})();
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