Как реализовать цепочечные вызовы методов, такие как jQuery?

Question

Так что я (все еще) полностью влюблен во всемогущий jQuery, и у меня есть собственная растущая библиотека утилит, которую я хочу кодифицировать в объекте java-script. И я хотел бы сохранить синтаксис, аналогичный синтаксису jquery, для простоты для других моих разработчиков. Поэтому я хочу что-то вроде этого:

 foo(argument).method(argument);

Я пытался что-то вроде этого:

var foo = function(str){
    this.str = str;
}

foo.prototype = {
    alertTest  :  function(additional){
         alert(this.str + ' ' + additional);
    }
}

Так что foo ('привет'). AlertTest ('world); с предупреждением "Привет, мир"

Я знаю, что это возможно, но я не специалист по OO и нуждаюсь в помощи, чтобы исправить эту простую вещь правильно. Пожалуйста помоги. Я также намереваюсь иметь много foo (). Bar (); функции типа, такие как foo () .thingelse (); и foo (). anotherthing (); , Я сделал несколько попыток, но изо всех сил здесь. Также должен быть удивительный жесткий способ сделать это.

Спасибо, ребята!

Answer 1

Вы почти у цели:

new foo('hello').alertTest('world');

или если вам не нравится 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 .

Answer 2

Некоторое время назад я делал что-то подобное, и создавать было очень весело!

Если я правильно помню, чтобы иметь возможность использовать точечные операторы, мне пришлось возвращать объект как частьоригинальный вызов функции.Таким образом, я мог бы связать много вещей вместе, как $(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"

Если это поможет для справки: http://www.mikedoesweb.com/vis/

Answer 3

Что-то, что я сделал очень быстро, но вы можете коснуться сути того, чего мы пытаемся достичь -

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