Question

我试图通过返回DOM元素来理解Javascript链接。我不知道该怎么做。

这是我的代码：

        (function () {
            function MyQuery(selector) {
                if (!(this instanceof MyQuery)) {
                    return new MyQuery(selector);
                }

                this.nodes = document.querySelectorAll(selector);

                for (var i = 0; i < this.nodes.length; i++) {
                    this.nodes[i] = this.nodes[i];
                }

            }

            MyQuery.fn = MyQuery.prototype = {
                parent: function () {
                    return this.nodes[0].parentNode;
                },
                color: function(setColor) {
                    this.nodes[0].style.color = setColor;
                    return this;
                }
            };

            window.myQuery = window.$ = MyQuery;

        })();

通话方式：

myQuery(".mySpan").parent(); 

// Returns .. <div>

myQuery(".mySpan").parent().color("red");

// TypeError: myQuery(...).parent(...).color is not a function

HTML：

    <div>
        This DIV has some content.
        <span class="mySpan">This is a span</span>
        more content here.
    </div>

我不确定为什么它会给我一个TypeError，我有一个parentNode，它是 div 我想要做的就是设置该div的颜色文本。

Answer 1

为了使可链接方法可用，您必须不返回DOM元素，而是返回具有此方法的MyQuery类的实例。

function MyQuery(selector) {
    if (!(this instanceof MyQuery)) {
        return new MyQuery(selector);
    }

    if (Array.isArray(selector)) {
        this.nodes = selector;
    } else {
        this.nodes = [];
        if (typeof selector == "string") {
            var nodes = document.querySelectorAll(selector);
            for (var i = 0; i < nodes.length; i++) {
                this.nodes[i] = nodes[i];
            }
        }
    }
}

MyQuery.prototype.parent = function () {
    return new MyQuery([this.nodes[0].parentNode]);
};
MyQuery.prototype.color = function(setColor) {
    this.nodes[0].style.color = setColor;
    return this;
};

JavaScript - 使用返回DOM元素理解方法链接

1 个答案: