VQuery-封裝自己的JQuery

EdwardUp 發(fā)布于2019-08-21 10:48 / 3062人閱讀

摘要：無參數(shù)當(dāng)前當(dāng)前文檔中其所在在位置從開始工具函數(shù)函數(shù)函數(shù)包裝器可以不用了工具函數(shù)通過類名來選取元素父級對象類名獲取到的節(jié)點(diǎn)數(shù)組事件添加函數(shù)需要綁定事件的對象事件類型事件觸發(fā)執(zhí)行的函數(shù)標(biāo)準(zhǔn)修改下指向的問題最后選擇

VQuery-封裝自己的JQuery

標(biāo)簽（空格分隔）： JS

封裝自己的jQuery--vQuery vQurey選擇器 VQuery類

elements屬性,存儲選擇的元素

參數(shù)

typeof的使用判斷傳入?yún)?shù)的類型

字符串

class/id/tagname

函數(shù)

事件綁定-

對象

直接插入

//VQuery選擇器
 function VQuery(vArg) {
    //用來保存選擇的元素
    this.elements = [];
    switch (typeof vArg) {
        //當(dāng)傳入函數(shù)時(shí).
    case "function":
        myAddEvent(window, "load", vArg);
        break;
    case "string":
        //傳入字符串時(shí).
        switch (vArg.charAt(0)) {
        case "#": //id
            var obj = document.getElementById(vArg.substring(1));
            this.elements.push(obj);
            break;
        case ".": //class
            this.elements = getByClassName(document, vArg.substring(1));
            break;
        default: //tagName
            this.elements = document.getElementsByTagName(vArg);
        }
        break;
    case "object":
        this.elements.push(vArg);
        break;
    }
}

VQuery事件 綁定事件 click方法.綁定點(diǎn)擊事件

/**
 * 元素點(diǎn)擊方法
 * @param {Function} fn 點(diǎn)擊后執(zhí)行的函數(shù)
 */
VQuery.prototype.click = function (fn) {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        myAddEvent(this.elements[i], "click", fn);
    }
};

顯示隱藏方法.hide/show.改變display屬性

 /**
 * 顯示元素,display:block
 */
VQuery.prototype.show = function () {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        this.elements[i].style.display = "block";
    }
};
/**
 * 隱藏元素,display:none
 */
VQuery.prototype.hide = function () {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        this.elements[i].style.display = "none";
    }
};

hover方法.鼠標(biāo)移入移出時(shí)

/**
 * 鼠標(biāo)移入移出方法
 * @param {Function} fnOver 鼠標(biāo)移入執(zhí)行的函數(shù)
 * @param {Function} fnOut  鼠標(biāo)移出執(zhí)行的函數(shù)
 */
VQuery.prototype.hover = function (fnOver, fnOut) {
    for (var i = 0, len = this.elements.length; i < len; i++) {
        myAddEvent(this.elements[i], "mouseover", fnOver);
        myAddEvent(this.elements[i], "mouseout", fnOut);
    }
};

解決函數(shù)中的this問題

call/apply可以動態(tài)修改對象的this指向.

知乎如何理解和熟練運(yùn)用js中的call及apply？

toggle方法.切換

點(diǎn)擊記數(shù)

 //使用匿名函數(shù)包裝器來給每個(gè)對象創(chuàng)建局部變量
(function (obj) {
    var count = 0;
    myAddEvent(obj, "click", function () {
        alert(count++);
    });
})(this.elements[i]);

arguments的使用

toggle方法,切換,接收任意個(gè)參數(shù),不斷在參數(shù)間循環(huán).例:點(diǎn)擊顯示隱藏
*/
VQuery.prototype.toggle = function () {
var _arguments = arguments;
for (var i = 0, len = this.elements.length; i < len; i++) {

   addToggle(this.elements[i]);

}

function addToggle(obj) {

   var count = 0;
   myAddEvent(obj, "click", function () {
       _arguments[count++ % _arguments.length].call(obj);
   });

}
};

css方法, 設(shè)置或者獲取樣式

簡單形式 -- 設(shè)置/獲取

獲取計(jì)算后的樣式

/**
 * 設(shè)置與獲取元素樣式的方法:
 * 接受1個(gè)或者2個(gè)參數(shù)(1個(gè)參數(shù)時(shí):返回傳入屬性名對應(yīng)的的樣式值,兩個(gè)參數(shù):為傳入的樣式名為設(shè)置樣式值)
 * @param {String} attr  設(shè)置或獲取的樣式名
 * @param {String} value 樣式值(可選)
 */
VQuery.prototype.css = function (attr, value) {
    if (arguments.length == 2) {
        for (var i = 0, len = this.elements.length; i < len; i++) {
            this.elements[i].style[attr] = value;
        }
    } else {
        //1個(gè)參數(shù)時(shí)返回獲取到的樣式
        return getStyle(this.elements[0], attr);

    }
};

attr方法,設(shè)置或獲取屬性

 /**
 * 屬性設(shè)置與獲取方法,與css方法基本一致.
 * @param   {String} attr  設(shè)置或獲取的屬性名
 * @param   {String} value 屬性值(可選)
 * @returns {String} 一個(gè)參數(shù)時(shí),返回對應(yīng)的屬性值
 */
VQuery.prototype.attr = function (attr, value) {
    if (arguments.length == 2) {
        for (var i = 0, len = this.elements.length; i < len; i++) {
            this.elements[i][attr] = value;
        }
    } else {
        return this.elements[0][attr];
    }

}

eq方法-減少匹配元素的集合為指定的索引的哪一個(gè)元素。

/**取其中的第n個(gè)對象-方法-減少匹配元素的集合為指定的索引的哪一個(gè)元素。
 * @param   {Number} n 需要的第幾個(gè)元素
 * @returns {Object} 返回獲取到的vquery元素
 */
VQuery.prototype.eq = function (n) {
    //必須使用$包裝.使返回的節(jié)點(diǎn)從普通對象變得vquery的元素(普通對象沒有vQuery方法)

    return $(this.elements[n]);
};

find方法-查找當(dāng)前對象的后代元素.

/**
 * 把a(bǔ)rr2內(nèi)的元素添加到arr1
 * 把類數(shù)組對象或數(shù)組轉(zhuǎn)變?yōu)閿?shù)組.(不需要類數(shù)組元素支持Array的方法)
 * @param {Array}  arr1 轉(zhuǎn)變后的數(shù)組
 * @param {Object} arr2 類數(shù)組對象或數(shù)組
 */
function appendArr(arr1, arr2) {
    for (var i = 0, len = arr2.length; i < len; i++) {
        arr1.push(arr2[i]);
    }
}
/**
 * 查找當(dāng)前對象的后代元素.
 * @param   {String} str class名或標(biāo)簽名
 * @returns {Object} 獲取到的對象集合
 */
 
VQuery.prototype.find = function (str) {
    var aResult = [];

    for (var i = 0, len = this.elements.length; i < len; i++) {
        switch (str.charAt(0)) {
        case ".": //class
            var aEle = getByClassName(this.elements[i], str.substring(1));
            appendArr(aResult, aEle);

            break;
        default: //標(biāo)簽
            var aEle = this.elements[i].getElementsByTagName(str);
            //            aResult = aResult.concat[aEle];//這樣做會出錯(cuò),因?yàn)閍Ele并不是一個(gè)真正的數(shù)組,必須使用下面的方法
            appendArr(aResult, aEle);
        }
    }
    //必須這么做,因?yàn)椴贿@樣做返回的是節(jié)點(diǎn)集合,不具有VQuery的方法和屬性
    var newVquery = $();
    newVquery.elements = aResult;
    return newVquery;
};

index方法--當(dāng)前元素在其同級元素中的位置

/**
 * 獲取當(dāng)前元素在同輩元素的位置
 * @param   {Object} obj 需要獲取的對象
 * @returns {Number} 獲取到的索引值
 */
function getIndex(obj) {
    var aBrother = obj.parentNode.children;
    for (var i = 0, len = aBrother.length; i < len; i++) {
        if (aBrother[i] == obj) {
            return i;
        }
    }
}
/**返回相對于它同輩元素的位置的索引值。無參數(shù)
 * @returns {Number} 當(dāng)前當(dāng)前文檔中其所在在位置,從0開始
 */
VQuery.prototype.index = function () {
    return getIndex(this.elements[0]);
};

工具函數(shù). $函數(shù)

//函數(shù)包裝器..可以不用new 了
function $(vArg) {
    return new VQuery(vArg);
}

工具函數(shù)

/**通過class類名來選取元素
 * @param   {Object} parent 父級對象,
 * @param   {String} sClass className類名
 * @returns {Array}  獲取到的節(jié)點(diǎn)數(shù)組
 */
function getByClassName(parent, sClass) {
    if (parent.getElementsByClassName) {
        return parent.getElementsByClassName(sClass);
    } else {
        var oEle = parent.getElementsByTagName("*"),
            arr = [],
            reg = new RegExp("" + sClass + "");
        for (var i = 0, len = oEle.length; i < len; i++) {
            if (reg.test(oEle[i].className)) {
                arr.push(oEle[i]);
            }
        }
        return arr;
    }
}

/**
 *事件添加函數(shù)
 * @param {Object}   obj  需要綁定事件的對象
 * @param {String}   type 事件類型
 * @param {Function} fn   事件觸發(fā)執(zhí)行的函數(shù)
 */
function myAddEvent(obj, type, fn) {
    //標(biāo)準(zhǔn)
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {
        //IE
        obj.attachEvent("on" + type, function () {
            //修改ie下this指向window的問題
            fn.call(obj);
        });
    } else {
        //最后選擇
        obj["on" + type] = fn;
    }
}