jQuery框架結構簡析

　　一、 切入點：首先完成each方法和map方法的模擬；

　　　　each方法： jQuery的each方法，返回一個jQuery對象，即一個偽數組，因此each方法實現了鏈式編程。另外，jQuery的each方法的回調函數返回false，結束循環，內部的this指向當前遍歷的元素；

　　　　map方法： jQuery的map方法中，根據回調函數的放回結果來返回，如果回調函數返回的是數組，那么map方法返回數組，如果回調函數中沒有返回值，那么默認返回一個空數組。因此，map方法破壞了鏈式編程，內部的this不再指向遍歷元素，而是window；　　

　　二、框架搭建：

　　　　將整個框架的搭建放在一個沙箱中（閉包）

　　　　　　(funtion(window){})(window);   // window 有兩個作用： 一是減少作用域的搜索，而是提高壓縮的效率

　　　　需要一個函數，在此用MHQ表示；  

　　　　替換原型對象並還原構造器；

　　　　影藏new關鍵字：  // MHQ並不通過new關鍵字，jQuery的做法是，在其原型對象上添加init構造函數，該構造函數的實例就是MHQ;

　　　　現在的問題是MHQ.prototype.init()構造函數的實例怎么調用MHQ原型對象上的方法？ jQuery的做法是： 讓其原型對象上的init構造函數的原型對象指向其原型對象，也就是說：讓MHQ.prototype.init.prototype = MHQ.prototype;

　　　　那么現在如何要讓閉包中的MHQ暴漏給外部訪問呢？ 答案是將其掛到全局window上，於是有了window.MHQ = window.M = MHQ; MHQ就是jQuery，那么M就是$，現在，window.MHQ就直接訪問MHQ原型上的方法了。

　　　　現在的問題是：如何給jQuery擴展方法呢？   jQuery的做法是直接添加靜態屬性和實例方法，實現混入繼承。  MHQ.extend=MHQ.fn.extend=function(obj){for(var key in obj){this[k]=obj[k]}};將一個對象中的屬性和方法拷貝一份供自己使用；

　　　　另外jQuery中為了避免出現錯誤將所有的變量聲明提前。

(function(window){
    function MHQ(selector){
        return new MHQ.fn.init(selector);
    }
    MHQ.fn = MHQ.prototye = {
        constructor: MHQ,
        length:0,
        init: function(selector){
            // 對傳入選擇器的一系列的判斷
        }
    };
    MHQ.fn.init.prototype = MHQ.fn;
    MHQ.extend = MHQ.fn.extend = function(obj){
        var k;
        for(k in obj){    
            this[k] = obj[k];
        }
    };
    // 擴展實例方法，通過MHQ.fn.init(selector)的實例來訪問
    MHQ.fn.extend({...});    
    // 擴展靜態方法，一般是工具類方法，如each，map
    MHQ.extend({...});
    window.MHQ = window.M = MHQ; 
})(window); 

　　三、首先根據切入點一的分析封裝each和map方法

　　　　這里需要明確jQuery的$符里面能夠傳入的類型有：jQuery對象，字符串（html格式字符串和選擇器），DOM對象，函數等，因此需要判斷傳入的類型，因此也就有了其對應的判斷方式。

　　四、toArray方法和get方法的封裝

　　　　其中toArray方法沒有參數，get方法不傳參返回DOM元素的真數組，傳入參數為正數，返回對應下標的DOM元素，為負數從this.length開始計算返回DOM元素；

　　五、DOM操作的一些方法的封裝

　　　　在此需要注意的是鏈破壞，恢復鏈；

　

/**
 * Created by mhq on 2016/10/26.
 */
// window 的兩個作用： 減少作用域的搜素，提高壓縮效率
(function (window) {
    /*在閉包內部作用域中定義變量，提高效率*/
    var arr = [];
    var push = arr.push;
    var slice = arr.slice;

    // MHQ的原型對象中的init構造函數創建對象，影藏了new關鍵字，返回一個偽數組
    function MHQ(selector) {
        return new MHQ.fn.init(selector);
    }
    // 替換原型對象的方式實現繼承
    MHQ.fn = MHQ.prototype = {
        // 還原構造器
        constructor: MHQ,
        // 添加length屬性，返回時是偽數組
        length: 0,
        init: function (selector) {
            // 判斷選擇器類型
            if (!selector) return this;
            if (typeof selector === "string") {
                // HTML格式的字符串
                if (selector.charAt(0) === "<") {
                    push.apply(this, parseHTML(selector));
                    return this;
                } else { // 選擇器
                    push.apply(this, document.querySelectorAll(selector));
                    return this;
                }
            }
            if (typeof selector === "function") {
                // 傳入類型是函數  將來處理事件
            }
            if (selector.nodeType) {  // 是DOM對象時
                this[0] = selector;
                this.length = 1;
                return this;
            }
            if (selector.constructor.name === MHQ) { // 是MHQ類型的對象
                return selector;
            }
            if (selector.length >= 0) { // 是數組或者偽數組
                push.apply(this, selector);
            } else {
                this[0] = selector;
                this.length = 1;
            }
        }
    };
    // 使init構造函數的實例能夠訪問MHQ原型對象中的方法
    MHQ.fn.init.prototype = MHQ.fn;
    // 混入實現繼承 
    MHQ.extend = MHQ.fn.extend = function (obj) {
        var k;
        for (k in obj) {
            this[k] = obj[k];
        }
    };
    
    MHQ.fn.extend({
        each: function (callback) {
            return MHQ.each(this, callback);
        },
        map: function (callback) {
            return MHQ.map(this, callback);
        }
    });
    
    MHQ.extend({
        each: function (obj, callback) {
            var i,
                len = obj.length,
                isArray = len >= 0;
            if (isArray) {
                for (i = 0; i < len; i++) {
                    if (callback.call(obj[i], i, obj[i]) === false) break;
                }
            } else {
                for (i in obj) {
                    if (callback.call(obj[i], i, obj[i]) === false) break;
                }
            }
            return obj;
        },
        map: function (obj, callback) {
            var i,
                len = obj.length,
                isArray = len >= 0,
                result,
                ret = [];
            if (isArray) {
                for (i = 0; i < len; i++) {
                    result = callback(obj[i], i);
                    if (result != null) {
                        ret.push(result);
                    }
                }
            } else {
                for (i in obj) {
                    result = callback(obj[i], i);
                    if (result != null) {
                        ret.push(result);
                    }
                }
            }
            return ret;
        },
        next: function ( dom ) {
            var node = dom;
            while( node = node.nextSibling ) {
                if ( node.nodeType === 1 ) {
                    return node;
                }
            }
            return null;
        }
    });

    // 處理HTML字符串的方法
    function parseHTML(htmlStr) {
        var div = document.createElement("div"),
            i = 0,
            nodeArr = [];
        div.innerHTML = htmlStr;
        for (; i < div.childNodes.length; i++) {
            nodeArr.push(div.childNodes[i]);
        }
        return nodeArr;
    }

    // 實現toArray方法、get方法（獲取DOM元素）
    MHQ.fn.extend({
        toArray: function () {
            return slice.call(this);
        },
        get: function (index) {
            if (index === undefined) {
                return this.toArray();
            } else {
                return this[index > 0 ? index : this.length + index];
            }
        }
    });

    // DOM元素操作模塊
    MHQ.fn.extend({
        appendTo: function (selector) {
            var i,
                j,
                tmpObj,
                ret = [],
                destinationObj = MHQ(selector);

            for (i = 0; i < this.length; i++) {
                for (j = 0; j < destinationObj.length; j++) {
                    tmpObj = j === destinationObj.length - 1 ? this[i] : this[i].cloneNode(true);
                    ret.push(tmpObj);
                    destinationObj[j].appendChild(tmpObj);
                }
            }
            return this.pushStack(ret);
        },
        prependTo: function (selector) {
            // 將 this[i] 加入到 selector[j] 中, 鏈會破壞
            // MHQ( selector ).prepend( this );
            var tmpObj, ret = [],
                i, j,
                destinationObj = MHQ(selector);
            for (i = 0; i < this.length; i++) {
                for (j = 0; j < destinationObj.length; j++) {
                    tmpObj = j === destinationObj.length - 1 ? this[i] : this[i].cloneNode(true);
                    ret.push(tmpObj);
                    destinationObj[j].insertBefore(tmpObj, destinationObj[j].firstChild);
                }
            }

            return this.pushStack(ret);
        },
        prepend: function (selector) {
            MHQ(selector).appendTo(this);
            return this;
        },
        append: function (selector) {
            // 將 selector[j] 加到 this[i] 中
            // 不會造成鏈破壞
            MHQ(selector).appendTo(this);
            return this;
        },
        next: function () {
            /*
             var ret = [];
             this.each(function () {
             ret.push( this.nextElementSibling );
             });
             return this.pushStack( ret );
             */
            return this.pushStack(
                this.map(function ( v ) {
                    return MHQ.next( v );
                }));
        },
        remove: function () {
            this.each(function () {
                this.parentNode.removeChild(this);
            });
        }
    });

    // 恢復鏈
    MHQ.fn.extend({
        end: function () {
            return this.prevObj || this;
        },
        pushStack: function (array) {
            var newObj = MHQ(array);
            newObj.prevObj = this;
            return newObj;
        }
    });

    window.MHQ = window.M = MHQ;

})(window);

　　暫時先分析這些基本的功能實現過程。

　　

　　學習是一個辛苦但又興奮的過程，只有通過不斷的努力，才能勉強不讓自己在快速發展的節奏中脫節。