Java程序猿的JavaScript學習筆記（12——jQuery-擴展選擇器）

時間 2019-11-11

標籤 java 程序 javascript 學習筆記 jquery 擴展選擇器欄目 Java 简体版

原文原文鏈接

計劃按例如如下順序完畢這篇筆記：

這是筆記的第12篇，本篇咱們嘗試擴展jQuery選擇器。同一時候這也是一個jQuery源代碼解讀的過程。

做者博客：http://blog.csdn.net/stationxp
做者微博：http://weibo.com/liuhailong2008
轉載請取得做者容許

0、爲何要擴展？

自帶的功能很是強。但有時候代碼會很是囉嗦，而且0基礎人員老是掌握很差，影響效率。
從架構角度可以簡化的話，能提升程序可讀性，提升效率。

一、怎樣擴展？

jQuery爲選擇器提供了豐富的擴展機制。例如如下：

// Override sizzle attribute retrieval
jQuery.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選擇器的代碼例如如下：
javascript

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

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

問過分娘，psedudos中定義的選擇器使用方法是：

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

那咱們擴展的選擇器使用方法應該是： $("blabla :uitype") 。

Err...還需要傳入參數，形如： $("div[:uitype='panel']");
找個樣例：
java

		"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 indexes
			while ( i-- ) {
				if ( seed[ (j = matchIndexes[i]) ] ) {
					seed[j] = !(matches[j] = seed[j]);
				}
			}
		});
	});
}

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

二、舉樣例

2.一、不帶參數的

<div uitype='header'>頭</div>
<div uitype='footer'>尾</div>
<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.二、帶參數的

<div uitype='header'>header</div>
<div uitype='footer'>footer</div>
<script>
$.extend($.expr[':'],{
    "uitype": function(elem){
	// var t = $(elem).attr('uitype');
	console.log(arguments.callee.caller);//打印調用者
	for(var i = 0;i<arguments.length;++i){//打印參數的值
		console.log(typeof arguments[i],arguments[i]);
	}
        return true;
    }
});
var arr = $(":uitype[uitype='footer']");
console.log(arr.length); // output : 1

輸出：
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。
仍是沒能夠得到選擇表達式中寫的參數。必定是姿式不正確。

[]已經被實現了，試試小括號：閉包

<div uitype='header'>header</div>
<div uitype='footer'>footer</div>
<script>
$.extend($.expr[':'],{
    "uitype": function(elem,content,xml){
	for(var i = 0;i<arguments.length;++i){
		console.log(i);
		console.log(typeof arguments[i],arguments[i]);
	}
        return true;
    }
});
var arr = $(":uitype(xx)");
console.log(arr.length);
</script>

輸出：
object div // elem
number 0 // 什麼？
object ["uitype", "uitype", "", "xx"] //獲得了 xx 。這個正是我想要的

充滿無限可能了！架構

整理代碼框架例如如下：

<strong><div uitype='header'>header</div>
<div uitype='footer'>footer</div>
<script>
$.extend($.expr[':'],{
    "uitype": function(elem,someNumber,exprParams){
	console.log($(elem).attr('uitype'),exprParams[3]);
        return true;
    }
});
var arr = $(":uitype(xx)");</strong>

輸出：
header xx footer xx 能限制你的僅僅有你的想象力了！