javascript - 用于普通 javascript 对象而不是 DOM 元素的 jquery 选择器

Question

我刚开始使用 jquery，我非常喜欢使用选择器。我突然想到，这个成语是遍历对象树(例如，JSON 查询结果)的一种非常好的方式。例如，如果我有这样一个对象:

var obj = { 'foo': 1, 'bar': 2,
            'child': { 'baz': [3, 4, 5] }
          };

我希望能够编写类似 $('child baz:last', obj) 的代码并得到 5。我知道链接不起作用，但我仍然喜欢选择运算符。任何人都知道这样的野兽是否存在，或者写一个最简单的方法是什么？

Answer 1

这是让 jQuery 本身在对象上工作的概念验证实现。通过对象包装器 (FakeNode)，您可以诱使 jQuery 在纯 JavaScript 对象上使用其内置的选择器引擎 (Sizzle):

function FakeNode(obj, name, parent) {
    this.obj = obj;
    this.nodeName = name;
    this.nodeType = name ? 1 : 9; // element or document
    this.parentNode = parent;
}

FakeNode.prototype = {
    documentElement: { nodeName: "fake" },

    getElementsByTagName: function (tagName) {
        var nodes = [];

        for (var p in this.obj) {
            var node = new FakeNode(this.obj[p], p, this);

            if (p === tagName) {
                nodes.push(node);
            }

            Array.prototype.push.apply(nodes,
                node.getElementsByTagName(tagName));
        }

        return nodes;
    }
};

function $$(sel, context) {
    return $(sel, new FakeNode(context));
}

用法是:

var obj = {
    foo: 1,
    bar: 2,
    child: {
        baz: [ 3, 4, 5 ],
        bar: {
            bar: 3
        }
    }
};

function test(selector) {
    document.write("Selector: " + selector + "<br>");

    $$(selector, obj).each(function () {
        document.write("- Found: " + this.obj + "<br>");
    });
}

test("child baz");
test("bar");

给出输出:

Selector: child baz- Found: 3,4,5Selector: bar- Found: 2- Found: [object Object]- Found: 3

当然，您必须实现比上述更多的东西才能支持更复杂的选择器。

顺便说一句，你见过jLinq吗？ ？