是否有展示創作插件接受選擇語法的jQuery的教程？

Question

我試圖寫我的第一個jQuery插件來查詢複雜對象的多維數組。它是我想要的一種功能，但現在它接收一個屬性名稱和值作爲輸入項目的比較。我想修改它，以便它可以接收jQuery的選擇器語法作爲輸入，以便以更具包容性的方式過濾我的對象。

我希望能夠提供語法相同或類似jQuery的「天然」選擇語法：

"string" 
"number" 
"boolean" 
"object" 
"string,number,boolean" 
"object[FirstName='Ben'][LastName='Alabaster']" 
"object[LastName^='Ala']" 
"object[LastName$='er']" 

等

是否有證明這種能力分析任何教程或插件用於比較對象的選擇器語法？

Answer 1

該jQuery使用該選擇的語法被抽象成的Sizzlelibrary。您可以在GitHub上查看the source到Sizzle。

嘶嘶聲已經很清楚地定製對查詢文檔的文檔對象模型，所以你會做修改，讓它對查詢其他類型的數據。看看行294至303：

match: { 
    ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, 
    CLASS: /\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/, 
    NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/, 
    ATTR: /\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/, 
    TAG: /^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/, 
    CHILD: /:(only|nth|last|first)-child(?:\((even|odd|[\dn+\-]*)\))?/, 
    POS: /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/, 
    PSEUDO: /:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/ 
}, 

而這裏出現解析屬性選擇像^=和~=代碼，行661至691：

ATTR: function(elem, match){ 
    var name = match[1], 
     result = Expr.attrHandle[ name ] ? 
      Expr.attrHandle[ name ](elem) : 
      elem[ name ] != null ? 
       elem[ name ] : 
       elem.getAttribute(name), 
     value = result + "", 
     type = match[2], 
     check = match[4]; 

    return result == null ? 
     type === "!=" : 
     type === "=" ? 
     value === check : 
     type === "*=" ? 
     value.indexOf(check) >= 0 : 
     type === "~=" ? 
     (" " + value + " ").indexOf(check) >= 0 : 
     !check ? 
     value && result !== false : 
     type === "!=" ? 
     value !== check : 
     type === "^=" ? 
     value.indexOf(check) === 0 : 
     type === "$=" ? 
     value.substr(value.length - check.length) === check : 
     type === "|=" ? 
     value === check || value.substr(0, check.length + 1) === check + "-" : 
     false; 
}, 

的方式，這些正則表達式和邏輯使用可能會給你如何實現你的數據結構查詢的想法。