Question

我通过搜索看到的教程会让我看到像

这样的不受欢迎的格式

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

我想去哪里

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

此代码仅用于console.log（）示例，以查看是否可以通过该单词。记录'word'或记录'chained word'

如果我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

我在这里找到了我需要的东西：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();

Answer 2

这是您要归档的内容：

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

尝试一直返回 this ，而不是问题代码中的字符串。现在你可以修改内部变量，但是需要一个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" />

如何使用链接和默认功能正确返回

2 个答案: