jQuery源码分析13--仿栈与队列的操作(数组的操作)

来源:互联网 发布:java api怎么导入 编辑:程序博客网 时间:2024/05/16 06:44

仿栈与队列的操作

jQuery既然是模仿的数组结构,那么肯定会实现一套类数组的处理方法,比如常见的栈与队列操作push、pop、shift、unshift、求和、遍历循环each、排序及筛选等一系的扩展方法。

jQuery对象栈是一个便于Dom的查找,提供的一系列方法,jQuery可以是集合元素,那么我们怎么快速的找到集合中对应的目标元素呢?正序,逆序。

jQuery提供了.get()、:index()、 :lt()、:gt()、:even()及 :odd()这类索引值相关的选择器,他们的作用可以过滤他们前面的匹配表达式的集合元素,筛选的依据就是这个元素在原先匹配集合中的顺序。

我们来分别看一下这几个选择器的实现原理:

get方法--是通过检索匹配jQuery对象得到对应的DOM元素,如下代码实现:

get: function(num) {    return num != null ?    // Return just the one element from the set    (num < 0 ? this[num + this.length] : this[num]) :    // Return all the elements in a clean array    slice.call(this);}

原理很简单,因为jQuery查询出来的是一个数组的DOM集合,所以就可以按照数组的方法通过下标的索引取值,当然如果num的值超出范围,比如小于元素数量的负数或等于或大于元素的数量的数,那么它将返回undefined。 假设我们页面上有一个简单的无序列表,如下代码:

<ul>  <li id="foo">foo</li>  <li id="bar">bar</li></ul>

如果指定了index参数,.get()则会获取单个元素,如下代码:

console.log( $( "li" ).get( 0 ) );

由于索引 index 是以 0 开始计数的,所以上面代码返回了第一个列表项<li id="foo">foo</li>

然而,这种语法缺少某些 .get() 所具有的附加功能,比如可以指定索引值为负值:

console.log( $( "li" ).get(-1) );

负的索引值表示从匹配的集合中从末尾开始倒数,所以上面这个例子将会返回列表中最后一项:<li id="bar">bar</li>

由于是数组的关系,所以我们有几个快速方法,比如头跟尾的取值:

first: function() {    return this.eq( 0 );},last: function() {    return this.eq(-1);},
有一条语句要重点解释:
有一条语句要重点解释:
由于是数组的关系,所以我们有几个快速方法,比如头跟尾的取值:

Array.prototype.slice.call(argments,0)

Array.prototype.slice.call(thisArg[, arg1[, arg2[, ...]]]) 

成员介绍: 
Array [object] 

Array对象(即数组对象) 
prototype [property] 
Javascript的原型,此prototype非Prototype.js,可以暂且理解为Java中的静态属性/方法。


slice [Function] 
数组切分方法,很有用的一个方法,具体请看这里,或那里。 


call [Function] 
神奇的方法,该方法是所有Function对象里的方法,所以slice就有这样一个方法。用于把Function对象里的this替换为目标对象。

作用效果: 
Array.prototype.slice.call == [].slice 

虽然运行结果是一个样的,前者的运行效率比后者大大提高

机理: 
这里的slice方法就是一个Function对象。通常情况下,程序员通过如下方法调用Function,实质是普通的函数调用方法: 

Array.slice(begin,end) 

至于call()方法,METHOD: Function::call告诉我们,可以通过 

Function.call(thisArg[, arg1[, arg2[, ...]]]) 

的形式调用一个Function对象,把当中的this对象替换为thisArg,即可以得到下面的代码: 

Array.prototype.slice.call(obj,begin,end) 

用伪代码模拟过程: 

好,我们用伪代码的方法来模拟整个过程: 

1 var mySlice=Array.prototype.slice; 

2 alert(mySlice); //alert: function(begin[,end]){...},这是个“函数” 

3 var array_empty=mySlice(begin,end); //create a new,empty array 

4 set array_empty=obj; //此时,把obj赋给这个空的数组,使数组有了种子, 
                              //这就是call()所做的事,“人工受精” 

5 alert(array_empty); //这是个未定型的数组对象,由Javascript内部掌控着, 
                           //这样看可能没什么结果,但有结果的话,就一定与obj有关 

//下面是关键的一行: 
6 var array_last=array_empty.slice(begin,end); 
/** 
*虽然之前说未定型, 
*但返回的已经是一个数组了,我们对数组进行切割,但拿什么进行切? 
*没错,就拿用obj制造出来的数组进行切割, 
*一个新的数组对象产生了! 
*/ 

0 0
原创粉丝点击