小谈Jquery框架

      如今Jquery框架对于开发人员基本上是无人不知，无人不晓了，用起来十分的方便，特别是选择器十分强大，提升了咱们的开发速度。可是好多人也只是停留在了会用的基础上，我我的以为会用一个框架不算什么，只能说明你对那个框架比较熟悉，知道里面的思想和实现才是王道。有好多大牛对Jquery框架进行了剖析，今天我只是根据个人看法来分析一下。

          一段代码以下：

        (function (win) {
            var _$ = function (selector, context) {
                return new _$.prototype.Init(selector, context);
            }
            _$.prototype = {
                Init: function (selector, context) {
                    this.elements = [];
                    var context = context || document;
                    if (context.querySelectorAll) {
                        var arr = context.querySelectorAll(selector);
                        for (var i = 0; i < arr.length; i++) {
                            this.elements.push(arr[i]);
                        }
                    }
                    ////这一块是选择器的实现,没有写完，能够本身实现
                },
                each: function (callback) {
                    if (this.elements.length > 0) {
                        for (var i = 0; i < this.elements.length; i++) {
                            callback.call(this, i, this.elements[i]);
                        }
                    }
                }
            }
            _$.prototype.Init.prototype = _$.prototype;
            window.$ = _$;
        })(window || global);

 通常的咱们写一个函数，调用的方法以下：

               var   Demo=function(){

 

               }

           Demo.prototype= {

                    method:function(){

                    }

             }

var   demo=new  Demo();//实例化Demo

以后咱们能够调用method方法：

demo.method();

若是这样的话，咱们每次都要实例化一下，才能调用里面的方法，岂不是有点儿烦？

我想直接这样调用：Demo().method();这样不是省了一段代码（哈哈，程序员都喜欢偷懒）。

那么咱们再写一段代码：

   var  demo=function(){

   return  new  Demo();

    }

而后就能够demo().method()这样调用了。

若是你理解了我讲的这个，相信下面的代码你就会明白了：

        var _$ = function (selector, context) {
                return new _$.prototype.Init(selector, context);
        }
接下来咱们再看看_$.prototype.Init方法的扩展

              Init: function (selector, context) {
                    this.elements = [];
                    var context = context || document;
                    if (context.querySelectorAll) {
                        var arr = context.querySelectorAll(selector);
                        for (var i = 0; i < arr.length; i++) {
                            this.elements.push(arr[i]);
                        }
                    }
                    ////这一块是选择器的实现,没有写完，能够本身实现
                }
这里面有selector，context两个参数：
selector其实就是所谓的选择器符号了，咱们是根据这个来找到dom节点对象的。
context就是咱们所说的执行上下文了，一般都是document,这个是可选参数，只是为了之后的扩展。
而后咱们要获取节点对象了 
 var arr = context.querySelectorAll(selector);
 document.querySelector和document.querySelectorAll是w3c标准新加入的方法 ，是已经写好的选择器，可是ie8如下的版本不支持。
咱们要优先查看有没有这个方法，有的话就直接用这个了。
没有就直接用document.getElementById,  document.getElementsByClassName(IE8如下不兼容，须扩展)， document.getElementsByName,document.getElementsByTagName扩展了
（这个后面会讲具体实现）。
 this.elements=[]保存查询出的dom节点对象。
 而后说说each方法，这个实际上是用回掉简化 elements的循环。

   each: function (callback) {
                    if (this.elements.length > 0) {
                        for (var i = 0; i < this.elements.length; i++) {
                            callback.call(this, i, this.elements[i]);
                        }
                    }
                }

   这些方法咱们都实现了，可是有一个问题：怎么让Init方法的this.elements这个属性让$也能共享呢？他们的做用域不同呢。

var _$ = function (selector, context) {
                return new _$.prototype.Init(selector, context);
         }
咱们最终得想法实际上是想用$().method()这种方式去对dom节点作事件绑定，动画效果，样式设置等等处理。

咱们知道：若是让两个对象共享一个属性，那么有一个方法就是让他们的原型指向一致
那么，关键的一段代码上场了：

 _$.prototype.Init.prototype = _$.prototype;这样以后咱们就可让_$和Init实现对elements的共享了。Jquery框架的核心代码其实就是这些了。后面就能够对$进行方法扩展了。今天就讲到这，有些说法不是很规范，可是应该能看懂，后面会陆续讲各个方法的具体实现。。。