So I am (still) completely in love with the almighty jQuery, and I have my own growing library of utilities that I want to codify in a java-script object. And I would like to keep syntax similar to that of jquery for the sake of simplicity for my other front end devs. So I want something like this:
foo(argument).method(argument);
I have been trying something like this:
var foo = function(str){
this.str = str;
}
foo.prototype = {
alertTest : function(additional){
alert(this.str + ' ' + additional);
}
}
So that foo('hello').alertTest('world); with alert 'hello world'
I know this is possible, but I am not an OO guy and need help getting this simple thing right. Please help. I also intend on having many foo().bar(); type functions, like foo().somethingelse(); and foo().anotherthing(); . I have made several attempts, but am struggling hard here. Also there must be an awesome tight way of doing it.
Thanks folks!
With jQuery, you can chain together actions/methods. Chaining allows us to run multiple jQuery methods (on the same element) within a single statement.
Function chaining is a pattern in JavaScript where multiple functions are called on the same object consecutively. Using the same object reference, multiple functions can be invoked. It increases the readability of the code and means less redundancy.
With jQuery, we can use do chaining which means to chain together multiple methods in a single statement on a single element. We have been using a single statement at once, but now using the chaining method we can bind multiple methods to make the code short.
append is a bit of a special case for method chaining because it creates a new element and returns a selection to it. In most cases methods that operate on an object will return the same object being operated on.
You are almost there:
new foo('hello').alertTest('world');
or if you don't like the new
:
var bar = function bar(str) {
this.str = str;
};
bar.prototype = {
alertTest : function(additional){
alert(this.str + ' ' + additional);
return this;
}
};
function foo(str) {
return new bar(str);
}
foo('hello').alertTest('world');
Live Demo.
I did something like this a while ago and it was a ton of fun to create!
If i remember correctly, To be able to use dot-operators, I had to return the object as part of the original function call. This way I could chain lots of stuff together like $(id).value('asdf').color('#ff0000')
function $(id){
this.e = document.getelementbyid(id)
me = this
this.val = function (newval) {
this.e.value = newval;
return me; // <- Important
};
return this; // <- Important
}
$("textbox1").val("New Value") // changes textbox1's value to "New Value"
If it helps for reference: http://www.mikedoesweb.com/vis/
Something I did really quick but you can relate to the essence of what we are trying to achieve here -
function ChainingObj() {
if (!(this instanceof ChainingObj)) {
return new ChainingObj();
}
}
ChainingObj.prototype.first = function() {
console.log("foo");
return this; //important to return this.
}
ChainingObj.prototype.second = function() {
console.log("bar");
return this;
}
var a = ChainingObj().first().second();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With