解耦嘶嘶声。jQuery中的js，并将其替换为Sel。js公司

Question

我最近遇到了Sel。js，除其他外，它支持草稿CSS级别4选择器（例如主题选择器，它允许您以匹配CSS节点的父节点为目标）。

我很想开始与jQuery结合使用这个库，并且很好奇是否有人有经验（或者对如何完成有很好的猜测）将jQuery基于的Sizzle.js选择器库替换为不同的选择器库（在这种情况下是Sel.js）。

有什么想法或示例可以在网络上某个地方查看，以将jQuery与Sizzle解耦，并使其依赖于不同的选择器引擎？

Answer 1

这本身并不一定是真正的替代，而是一种倒退。Sizzle在遇到它认为“无效语法”时会抛出一个错误，例如CSS4主题选择器（div！

> Uncaught Error: Syntax error, unrecognized expression: div! > .jquery-css4

一种解决方案是捕获{}Sizzle抛出的那些错误，然后尝试返回到Sel.js进行选择，方法是覆盖$（）函数，如下所示：

$ = function (selector, context) {
    try {
        return jQuery(selector, context);
    } catch (e) {
        return jQuery(sel.sel(selector, context));
    }
};

以这种方式重写后，您可以使用：

$('div! > .jquery-css4');

...将正确返回<代码>

另一种选择是，您可以创建一个简单的css4选择插件，使用如下内容：

$.css4 = function(selector, context) { 
    return $(sel.sel(selector, context));
};

此时可以重新写入上述内容：

$.css4('div! > .jquery-css4');

这种方法的好处是它不依赖于错误处理，并且更具声明性。本质上，您应该知道何时使用CSS4选择器，何时需要额外的支持，何时不需要。然而，这两种方法都相当不具侵入性。

但是，对于使用这些方法的任何人，请注意：我还没有对使用上下文参数的查询进行广泛测试。它可能不适合Sel.js-因此，如果您需要进一步执行该步骤，请注意您可能需要进一步增强此代码。

下面是一个正在运行的JSFIDLE，它显示了正在运行的代码。