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，作为示例）。

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

一个解决方案是catch {} Sizzle 引发的错误，然后尝试通过覆盖{{来回退到 Sel.js 进行选择1}}功能如下：

$()

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

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

...这将正确返回包含班级$('div! > .jquery-css4');的子级的<div>。

作为替代方案，您可以使用以下内容创建一个简单的.jquery-css4选择插件：

css4

此时可以重写以上内容：

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

这种方法的好处是它不依赖于错误处理，而且更具说明性。从本质上讲 - 您应该知道何时使用CSS4选择器，并且需要增加支持，而不是。但是 - 这两种方法都是非侵入性的。

对于使用这些方法的任何人，请注意：我没有使用$.css4('div! > .jquery-css4');参数对查询进行大量测试。它可能与context不太匹配 - 所以如果您需要采取进一步措施，请注意您可能需要进一步增强此代码。

这是一个working jsFiddle，显示代码在行动中。

将Sizzle.js与jQuery分离，并将其替换为Sel.js

1 个答案: