小談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框架的核心代碼其實就是這些了。後面就能夠對$進行方法擴展了。今天就講到這，有些說法不是很規範，可是應該能看懂，後面會陸續講各個方法的具體實現。。。