javascript - 无法在 HTML 元素上调用函数

Question

我开始在 Vanilla JS 中编写 jQuery 并且我的选择器可以工作，但是当我在 HTML 元素上调用我的附加函数时，我收到“不是函数”错误。

var $ = function(){
    this.select = function(input) {
        if (input.split("")[0] == "#") {
            input = input.slice(1, input.length)
            return document.getElementById(input)

        }
        else if (input.split("")[0] == ".") {
            input = input.slice(1, input.length)
            return document.getElementsByClassName(input)

        }
        else {
            return document.getElementsByTagName(input)

        }
    },

    this.append = function(text) {
     return this.innerhtml = this.innerhtml + text

}
};

我的控制台尝试:

var myQuery = new $();

返回未定义

myQuery.select("#testspan")

在这里返回我的span标签

myQuery.select("#testspan").append("hellohello")

返回错误

VM2207:1 Uncaught TypeError: myQuery.select(...).append is not a function(…)

Answer 1

从您的代码片段中，每个 select 方法的返回都返回一个 DOM 元素(或集合)。您真正想要做的是称为 Chaining，其中方法的结果返回原始对象。因此，您可以继续对同一对象调用其他方法。

现在，在您的示例中，您将需要一组元素(节点)，然后对象可以再次访问这些元素。这是一个简单的例子。

var $ = function () {
    this.nodes = [];
    this.select = function (input) {
        var self = this;
        if (input.split("")[0] == "#") {
            input = input.slice(1, input.length)
            var node = document.getElementById(input);
            if (node)
                this.nodes.push(node);

        }
        else if (input.split("")[0] == ".") {
            input = input.slice(1, input.length)
            Array.prototype.slice.call(document.getElementsByClassName(input), 0).forEach(function (node) {
                self.nodes.push(node);
            });
        }
        else {
            Array.prototype.slice.call(document.getElementsByTagName(input), 0).forEach(function (node) {
                self.nodes.push(node);
            });
        }
        return this;
    },

    this.append = function (text) {
        this.nodes.forEach(function (i) {
            i.innerHTML += text;
        });
        return this;
    }
};

示例 HTML:

<p id="test">This is test </p>
<p>This is number to</p>

控制台(Chrome):

$ = new $()
$ {nodes: Array[0]}
$.select('p').append('hi')

现在这里的一个小问题是您(在控制台中)设置了 $ = new $()，它有效地覆盖了再次调用 new $() 的能力相同的脚本。我在下面提供了一个将其重命名为 myQuery 的 fiddle 。还更改了每次调用 select 时都会清除 node 数组。

修订:

var myQuery = function () {
    this.nodes = [];
    this.select = function (input) {
        this.nodes = [];
        var self = this;
        if (input.split("")[0] == "#") {
            input = input.slice(1, input.length)
            var node = document.getElementById(input);
            if (node)
                this.nodes.push(node);

        }
        else if (input.split("")[0] == ".") {
            input = input.slice(1, input.length)
            Array.prototype.slice.call(document.getElementsByClassName(input), 0).forEach(function (node) {
                self.nodes.push(node);
            });
        }
        else {
            Array.prototype.slice.call(document.getElementsByTagName(input), 0).forEach(function (node) {
                self.nodes.push(node);
            });
        }
        return this;
    },

    this.append = function (text) {
        this.nodes.forEach(function (i) {
            i.innerHTML += text;
        });
        return this;
    }
};


$ = new myQuery();
$.select('p').append(' test selection by tag name ');

$ = new myQuery();
$.select('.p1').append(' test selection by class ');

$ = new myQuery();
$.select('#p1').append(' test selection by id ');

$ = new myQuery();
$.select('#p2').append(' test selection by id ').append('and then chanined').select('.p2').append(' still chaining');

fiddle :https://jsfiddle.net/kxwt9gmg/