如何实现像jQuery这样的链式方法调用？

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:

所以我(仍然)完全爱上了全能的jQuery,我有自己不断增长的实用程序库,我想在java脚本对象中编写代码。为了简化我的其他前端开发人员,我想保持类似于jquery的语法。所以我想要这样的东西:

 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'

那就是foo('你好')。alertTest('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.

我知道这是可能的,但我不是一个OO家伙,需要帮助让这件事变得简单。请帮忙。我还打算有很多foo()。bar();类型函数,如foo()。somethingelse();和foo()。anotherthing(); 。我做了几次尝试,但我在这里努力奋斗。还必须有一个非常紧凑的方式来做到这一点。

Thanks folks!

3 个解决方案

#1

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.

#2

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')

如果我没记错的话,为了能够使用点运算符,我必须将对象作为原始函数调用的一部分返回。通过这种方式,我可以像$(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/

如果它有助于参考:http://www.mikedoesweb.com/vis/

#3

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();

#1