将 Sizzle.js 与 jQuery 解耦，并将其替换为 Sel.js

Question

我最近遇到了Sel.js，它支持Draft CSS Level 4 Selectors（例如Subject selector，它可以让您定位匹配的CSS节点的父节点）。

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

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

Answer 1

这本身不一定是真正的替换，而是一种后备。 Sizzle 在遇到它认为是“无效语法”的情况时会抛出错误，例如 CSS4 主题选择器（例如div! > .jquery-css4）。

> 未捕获的错误：语法错误，无法识别的表达式：div！ > .jquery-css4

一种解决方案是 catch {} 那些由 Sizzle 引发的错误，然后通过覆盖 $() 函数尝试回退到 Sel.js 进行选择如下：

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

以这种方式覆盖后，您可以使用：

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

...这将正确返回包含 .jquery-css4 类的子类的 <div>。

作为替代方案，您可以创建一个简单的css4 选择插件，使用类似：

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

此时可以重写上面的内容：

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

这种方法的好处是它不依赖错误处理，并且更具声明性。本质上——你应该知道什么时候使用 CSS4 选择器，需要额外的支持，什么时候不需要。但是 - 这两种方法都相当非侵入性。

对于使用这些方法的任何人，请注意：我没有对使用 context 参数的查询进行广泛测试。与Sel.js 搭配使用可能效果不佳 - 因此，如果您需要更进一步，请注意您可能需要进一步增强此代码。

这是一个working jsFiddle，显示了正在运行的代码。