Как вернуть правильно и с цепью, и по умолчанию функции

Question

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

main.default('word'); 
main.default('word').chain(); 

, где, как я хочу сделать

main('word'); 
main('word').chain(); 

Этот код предназначен только для примера console.log(), чтобы увидеть, могу ли я переносить это слово. войти «слово» или войти «прикован слово»

Если я return this; то я могу цепь:

var main = function(input){ 

    this.input = input; 

    this.chain = function(){ 
     this.chained='chained '+this.input; 
     return this.chained; 
     } 

    this.default = function(){ 
     return this.input; 
     } 

    return this; 
}; 

console.log(main('word').chain()); //'chained word' 

Но, я не могу сделать console.log(main('word').chain().chain()); я думаю от того, что я прочитал, потому что цепного функции не возвращает this, вместо этого он возвращает this.chained

Тогда, если я return this.default(); внутри функции main, действие по умолчанию я хочу main выполнить происходит

var main = function(input) { 


    this.input = input; 


    this.chain = function() { 
     this.chained = 'out '+this.input; 
     return this.chained; 
    } 

    this.default = function() { 
     return this.input; 
    } 

    return this.default(); 
}; 

console.log(main('word'));  //'word' 

Я также просматривал jquerys основного файла, чтобы увидеть, если я могу выбрать, как они сделали это с помощью функции JQuery, но я действительно не могу увидеть, что там происходит.

Answer 1

Является ли это то, что вы хотите заархивировать:

main('word').chain().chain().chain().getInput(); 
// resulting in 'chained chained chained word' 

Попытка вернуть это все время, а не строку, как в коде вопроса. Теперь вы можете изменить внутренние переменные, но вам нужна функция get ...() для доступа к ним извне.

var main = function(input) { 
 

 
    this.input = input; 
 

 
    this.chain = function() { 
 
    this.input = 'chained ' + this.input; 
 
    return this; 
 
    } 
 

 
    this.getInput = function() { 
 
    return this.input; 
 
    } 
 

 
    return this; 
 
}; 
 

 
var valueString = main('word').chain().chain().chain().getInput(); //'chained chained chained word' 
 
document.querySelector('#result').value = valueString;

input { 
 
    width: 100% 
 
}

result: 
 
<input id="result" />

Answer 2

Я нашел то, что нужно здесь: http://blog.buymeasoda.com/creating-a-jquery-like-chaining-api/

И только упаковывают, что сайт никогда не уходит ...

Реализация нашего собственного построения цепочки API Чтобы упростить вещи, если убрать некоторые из слоев, вот как мы можем реализовать скелет функции конструктора jQuery для создания простого API цепочки.

var myQuery, $; 

(function() { 

    myQuery = $ = function(selector) { 
     return new MyQuery(selector); 
    }; 

    var MyQuery = function(selector) { 
     // Lets make a really simplistic selector implementation for demo purposes 
     var nodes = document.getElementsByTagName(selector); 
     for (var i = 0; i < nodes.length; i++) { 
      this[i] = nodes[i]; 
     } 
     this.length = nodes.length; 
     return this; 
    }; 

    // Expose the prototype object via myQuery.fn so methods can be added later 
    myQuery.fn = MyQuery.prototype = { 
     // API Methods 
     hide: function() { 
      for (var i = 0; i < this.length; i++) { 
       this[i].style.display = 'none'; 
      } 
      return this; 
     }, 
     remove: function() { 
      for (var i = 0; i < this.length; i++) { 
       this[i].parentNode.removeChild(this[i]); 
      } 
      return this; 
     } 
     // More methods here, each using 'return this', to enable chaining 
    }; 

}()); 

// Example usage 
$('p').hide().remove(); 

// Add a plugin 
$.fn.red = function() { 
    for (var i = 0; i < this.length; i++) { 
     this[i].style.color = 'red'; 
    } 
    return this; 
} 

$('li').red();