Java程式員的JavaScript學習筆記（12——jQuery-延伸選取器）

Java程式員的JavaScript學習筆記（12——jQuery-延伸選取器）
計劃按如下順序完成這篇筆記：
1. 理念。
2. 屬性複製和繼承。
3. this/call/apply。
4. 閉包/getter/setter。
5. prototype。
6. 物件導向類比。
7. jQuery基本機制。
8. jQuery選取器。
9. jQuery工具方法。
10. jQuery-在“類”層面擴充。
11. jQuery-在“對象”層面擴充。
12. jQuery-延伸選取器。
13. jQuery UI。
14. 擴充jQuery UI。
這是筆記的第12篇，本篇我們嘗試擴充jQuery選取器，同時這也是一個jQuery源碼解讀的過程。

0、為什麼要擴充？內建的功能很強，但有時候代碼會很囉嗦，而且初級人員總是掌握不好，影響效率。
從架構角度可以簡化的話，能提高程式可讀性，提高效率。

1、如何擴充？jQuery為選取器提供了豐富的擴充機制。如下：

// Override sizzle attribute retrievaljQuery.find = Sizzle;jQuery.expr = Sizzle.selectors;jQuery.expr[:] = jQuery.expr.pseudos;jQuery.unique = Sizzle.uniqueSort;jQuery.text = Sizzle.getText;jQuery.isXMLDoc = Sizzle.isXML;jQuery.contains = Sizzle.contains;

從字面分析jQuery.expr和jQuery.expr[:]應該是我們的著力點。

Expr = Sizzle.selectors = {pseudos: {enabled: function( elem ) {return elem.disabled === false;},disabled: function( elem ) {return elem.disabled === true;}}}

通過以上代碼，我們看出jQuery.expr[:]就是我們的發力點，jQuery.expr.pseudos的代碼可以作為我們的參考。
擴充jQuery選取器的代碼如下：

$.extend($.expr[':'],{    uitype: function(elem){// blabla        return true/false;    }});  

從傳入參數elem中，可以通過elem.attr()獲得屬性，做判斷，然後決定當前元素是否返回。
比想象的簡單太多！

問過度娘，psedudos中定義的選取器用法是：

$(:enabled)$(#xx :enabled)$(blabla :enabled)

那我們擴充的選取器用法應該是： $(blabla :uitype) 。
Err...還需要傳入參數，形如： $(div[:uitype='panel']);
找個例子：

gt: createPositionalPseudo(function( matchIndexes, length, argument ) {var i = argument < 0 ? argument + length : argument;for ( ; ++i < length; ) {matchIndexes.push( i );}return matchIndexes;}) function createPositionalPseudo( fn ) {return markFunction(function( argument ) {argument = +argument;return markFunction(function( seed, matches ) {var j,matchIndexes = fn( [], seed.length, argument ),i = matchIndexes.length;// Match elements found at the specified indexeswhile ( i-- ) {if ( seed[ (j = matchIndexes[i]) ] ) {seed[j] = !(matches[j] = seed[j]);}}});});}

太複雜，懶得看，寫段代碼試一下

2、舉例子2.1、不帶參數的

頭尾<script>$.extend($.expr[':'],{ uitype: function(elem){var t = $(elem).attr('uitype');console.log(t); return !!t; }});var arr = $(:uitype);console.log(arr.length);</script>輸出：
undefined
undefined
undefined
undefined
header
footer
undefined
2 // 找到兩個


2.2、帶參數的

headerfooter<script>$.extend($.expr[':'],{ uitype: function(elem){// var t = $(elem).attr('uitype');console.log(arguments.callee.caller);//列印調用者for(var i = 0;i輸出：
function code ...
object div //footer的dom，而且只有這個，已經做好篩選了， [] 中的篩選是不需要我寫代碼就能獲得的
object #document //文檔根對象
boolean false
關於調用者，根據function code找到了

function elementMatcher( matchers ) {return matchers.length > 1 ?function( elem, context, xml ) {var i = matchers.length;while ( i-- ) {if ( !matchers[i]( elem, context, xml ) ) {return false;}}return true;} :matchers[0];}

傳入了3個參數：元素本身，上下文，和是否xml。
還是沒能夠獲得選擇運算式中寫的參數，一定是姿勢不對。

[]已經被實現了，試試小括弧：

headerfooter<script>$.extend($.expr[':'],{    uitype: function(elem,content,xml){for(var i = 0;iobject div // elem
number 0 // 什嗎？
object [uitype, uitype, , xx] //得到了 xx ，這個正是我想要的
 
充滿無限可能了！

整理代碼架構如下：
headerfooter<script>$.extend($.expr[':'],{    uitype: function(elem,someNumber,exprParams){console.log($(elem).attr('uitype'),exprParams[3]);        return true;    }});var arr = $(:uitype(xx));

輸出：
header xx
footer xx


能限制你的只有你的想象力了！</script>