jQuery方法原生实现---each遍历

最近有点浮躁，总想着快速前端进阶，成为高手。奈何现实残酷，故此用原生js实现下jQuery一些函数，用于练手。

each遍历类数组，数组挺好用的。网上也有很多教程，原理无非是利用call，apply改变this指针指向，指向谁呢？嗯，js数组！

原生数组有着很多方法能够读取数组元素，例如新增加every()方法遍历数组,IE9以上支持该方法

function each(object,callback){[].every.call(object, function(v, i){              return callback.call(v, i, v) === false ? false : true;          });  }each(ages,function(v,i){console.log(i);});

使用扩展方式，对js原生函数进行改造，也就是利用call改变this指针，让其指向传进来的object，后方的function则是参数。合起来就是带有两个参数的匿名function连同数组array同时指向object，此时object便具有原生数组的every特性和带有两个参数方法。

那为何function方法返回布尔值？原因就是every方法遍历返回的便是布尔值。

到此，简单的each遍历就实现了。不过问题来了，此时的each只能是数组和类数组，因为调用的是数组原生方法every，对象格式就不行了。

所以我们还要对象进行遍历，就得再写一个函数，返回对象键和值(key  value),我们需要for循环遍历

function each1(obj,fn){    for(var i in obj){        if(fn.call(obj,i,obj[i])===false){            break;        }    }}var obj = {name:"张三",age:"15"}each1(obj,function(i,v){    console.log(i+"  "+v);});

call能够改变this内部指针的指向，从而改变某个对象的执行上下文环境，也就是改变了fn回掉函数的指向，指向了obj对象，从而达到遍历对象目的。所以call也能够用来实现js式的继承，不过es6的出现，弥补好多js缺陷，有兴趣的自己去百度下es6继承。

类数组验证：

<p>1</p>    <p>2</p>    <p>3</p>    <p>4</p>

var p = document.querySelectorAll('p');each1(p,function(i,v){    console.log(i+"  "+v.innerHTML);})

结果会输出下标0123和值1234

回过头来看下，我们发现其实这个实现有缺陷，我们并没有对传入的第一个参数做类型判断。如果将对象类型和类数组类型传给第一个函数each，就会报错，它只能处理数组对象。

所以我们要给它添加类型判断，用于区分处理。这里我们要用到一个数组对象属性constructor，constructor 属性返回对创建此对象的数组函数的引用，我们用它来区分各个类型数据。

var test=new Array();if (test.constructor==Array){document.write("This is an Array");}if (test.constructor==Boolean){document.write("This is a Boolean");}if (test.constructor==Date){document.write("This is a Date");}if (test.constructor==String){document.write("This is a String");}

以上是引用w3c网站的例子，我们each遍历函数主要是数组，类数组，对象格式三种格式，所以我们在参数传进来时候做一个判断即可。

var type = (function(){          switch (object.constructor){            case Object:                return 'Object';                break;            case Array:                return 'Array';                break;            case NodeList:                return 'NodeList';                break;            default:                return 'null';                break;        }    })();

到了这里我们就可以保证each函数不出错，数组和类数组调用each，对象格式调用each1，怎么？两个函数，自己开个if--else控制语句就可以合并了。到了这里基本可以算是完事了，但貌似every不支持ie9以下浏览器，那怎么办呢？你完全可以使用第二种方法嘛！数组也是对象啊！！！！！

each1([45,1,5,36],function(i,v){    console.log(i+"  "+v);});

那each和each1区别？个人猜测，毕竟是原生支持的属性，every在浏览器内部运行总归要快点吧。

那还有没有其它实现？有，你还可以使用arguments代替哈

function each2(){    for(var i=0;i<arguments[0].length;i++){        if(arguments[1].call(arguments[0],i,arguments[0][i])===false){            break;        }    }}

其实挺无聊的，就先这么着了，但是我们要实现jQuery的each函数，$('xx').each(obj,function(i,v){})这种形式才成，不然和jQuery就没关系了。

那么$('xx')怎么实现呢？简单的好实现，复杂的，自己研究jQuery源代码吧，网络上教程也不少。

<p id="aa">1</p>    <p class="bb">2</p>    <p class="bb">3</p>    <p>4</p>

//$()的简单实现var doc = document;function $(dom){    //dom元素简单区分    //清除空格    dom=dom.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');      //过滤#和.    var str = /[^#|\.]\w*/.exec(dom);    //获得#或.    var match1 = /^#|\./.exec(dom);    console.log(match1)    return match1 == "#"?doc.getElementById(str):(match1 == "."?doc.getElementsByClassName(str):doc.getElementsByTagName(str));}console.log($(' #aa'));console.log($('.bb'));console.log($('p'));

以上是$的简单模拟，但是问题还没有解决，它并不能链式调用，怎么办呢？采用jQuery做法，内部返回原型，可是直接返回this没用，函数中this由调用该函数的环境决定。所以我们需要封装成对象，以下是模拟jQuery插件搞得一个简单js库，可以判断是ID，clas和标签，然后做一个链式调用。

+function(window){    var aQuery = function(selector){        return new aQuery.prototype.init(selector);    }    aQuery.prototype ={        init : function(selector){            //dom元素简单区分            //清除空格            var doc = document;            selector=selector.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');              //过滤#和.            var str = /[^#|\.]\w*/.exec(selector);            //获得#或.            var match1 = /^#|\./.exec(selector);            this.selector = match1 == "#"?doc.getElementById(str):(match1 == "."?doc.getElementsByClassName(str):doc.getElementsByTagName(str));            return this;        },        each : function(){            console.log(this.selector)            for(var i=0;i<this.selector.length;i++){                if(arguments[0].call(this.selector,i,this.selector[i])===false){                    break;                }            }            return this;        }    }    aQuery.prototype.init.prototype = aQuery.prototype;    window.aQuery = window.$ = aQuery;    }(window);$('.bb').each(function(i,v){    console.log(i+" "+v.innerHTML);})

简单说下原理，插件使用立即执行函数包裹，避免变量污染；使用无new构造方法，通过原型赋值实现无new方式；通过每个方法末端返回this，这里this指代aQuery对象，由于js天生原型链，所以返回的方法就可以被链式调用。

参考文章链接：http://www.cnblogs.com/aaronjs/p/3278578.html

    http://www.cnblogs.com/MonaSong/p/6424366.html