Java程序员的JavaScript学习笔记(12——jQuery-扩展选

页面导航:首页 > 网络编程 > JavaScript > Java程序员的JavaScript学习笔记(12——jQuery-扩展选

Java程序员的JavaScript学习笔记(12——jQuery-扩展选

来源: 作者: 时间:2016-02-20 09:49 【

计划按如下顺序完成这篇笔记:1 理念。2 属性复制和继承。3 this call apply。4 闭包 getter setter。5 prototype。6 面向对象模拟。7 jQuery基本机制。8 jQuery选择器。9 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 retrieval
jQuery.find = Sizzle;
jQuery.expr = Sizzle.selectors;
jQuery.expr[:] = jQuery.expr.pseu;
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 indexes
			while ( 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、带参数的


header
footer
<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。
还是没能够获得选择表达式中写的参数,一定是姿势不对。


[]已经被实现了,试试小括号:

header
footer
<script> $.extend($.expr[':'],{ uitype: function(elem,content,xml){ for(var i = 0;i object div // elem
number 0 // 什么?
object [uitype, uitype, , xx] //得到了 xx ,这个正是我想要的

 

充满无限可能了!


整理代码框架如下:

header
footer
<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>
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<