如何使用链式函数和默认函数正确返回

How to return properly with both chained and a default function

本文关键字：函数 返回 默认 何使用      更新时间：2023-09-26

我通过搜索看到的教程会给我留下一种不理想的格式，比如

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

然后，如果我在main函数中执行return this.default();，我希望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函数做到这一点的，但我真的看不出那里发生了什么。

这就是您想要归档的内容吗：

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

尝试始终返回this，而不是像问题代码中那样返回字符串。现在您可以修改内部变量，但需要获取。。。（）功能从外部访问它们。

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" />

我在这里找到了我需要的东西：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 &lt; 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 &lt; this.length; i++) {
                this[i].style.display = 'none';
            }
            return this;
        },
        remove: function() {
            for (var i = 0; i &lt; 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 &lt; this.length; i++) {
        this[i].style.color = 'red';
    }
    return this;
}
$('li').red();
相关文章：