簡化版自己實(shí)現(xiàn)jQuery、this、arguments、閉包、原型鏈

Aldous 發(fā)布于2019-08-22 17:35 / 1305人閱讀

摘要：簡化版自己實(shí)現(xiàn)與盡量不要用規(guī)則太復(fù)雜用只需要注意兩點(diǎn)所有對象也都是因?yàn)榈刂凡灰粯幼约簩懪c用這是這是這是這是這是這是這是這是這是直接使用直接使用得到兄妹結(jié)點(diǎn)傳入的參數(shù)是一個節(jié)點(diǎn)返回兄妹結(jié)點(diǎn)的數(shù)組添加或刪除傳入的第一個參數(shù)是結(jié)點(diǎn)第

簡化版自己實(shí)現(xiàn)jQuery 1. == 與===

盡量不要用 == 規(guī)則太復(fù)雜

用===只需要注意兩點(diǎn),1.NaN===NaN,false,2.所有對象===也都是false,因?yàn)榈刂凡灰粯?

2.自己寫jQuery與用jQuery




    
    jQuery-Study
    
    
    




    這是li1
    這是li2
    這是li3
    這是li4
    這是li5
    這是li6
    這是li7
    這是li8




    1
    2
    3
    4
    5

01_myjQuery1.js

// 得到兄妹結(jié)點(diǎn)
//傳入的參數(shù)是一個節(jié)點(diǎn),返回兄妹結(jié)點(diǎn)的數(shù)組
function getSiblings(node) {
    var allSilings = node.parentNode.children;
    var siblingsArray = {length:0};
    for (let i = 0; i < allSilings.length; i++) {
        if (allSilings[i]!==node){
            siblingsArray[siblingsArray.length] = allSilings[i];
            siblingsArray.length++;
        }
    }
    return siblingsArray;
}
//添加或刪除class
//傳入的第一個參數(shù)是結(jié)點(diǎn),第二個參數(shù)是對象, 這個對象里是key:value,key就是要操作的class,value判斷操作類型,true添加,false刪除
function addClass(node,object){
    for (let key in object){
        //對象調(diào)用方法的兩種方式:
        // obj.f()
        // obj["f"]()

        var methodName;

        methodName = object[key] ? "add":"remove";
        node.classList[methodName](key);

        /*上面兩句代碼相當(dāng)于
        if (object[key]) {
            node.classList.add(key);
        }else {
            node.classList.remove(key);
        }*/
    }
}
window.mydom = {};
mydom.getSiblings = getSiblings;
mydom.addClass = addClass;//命名空間,常用的設(shè)計或者組合就叫做設(shè)計模式.哈希,數(shù)組,都是一種設(shè)計模式
//所以jQuery就是這樣來的,jQuery就是一個命名空間,里面有很多函數(shù).

// 命名空間作用:1.方便識別庫,2.如果都放在window里,可能會覆蓋別的庫,所以命名空間是為了防止覆蓋別的函數(shù)

window.onload = function () {
// 測試


    // 如何直接使用item3.addclass()?,item3.getSiblings()?
    // 方法一:給原型鏈加公有屬性公有方法,但是有缺點(diǎn),容易覆蓋
    Node.prototype.getSiblings = function () {
        var allSilings = this.parentNode.children;//誰調(diào)用這個函數(shù),this就是誰
        var siblingsArray = {length:0};
        for (let i = 0; i < allSilings.length; i++) {
            if (allSilings[i]!==this){
                siblingsArray[siblingsArray.length] = allSilings[i];
                siblingsArray.length++;
            }
        }
        return siblingsArray;
    }
    let item3 = document.getElementById("item3");
    // console.log(item3.getSiblings.call(item3));如果用cal.第一個參數(shù)就是函數(shù)里的this,如果不用call(),那么this就自動變成了item3
    console.log(" 方法一:");
    console.log(item3.getSiblings());//測試成功

    Node.prototype.addClass = function (object) {
        for (let key in object){
            var methodName;
            methodName = object[key] ? "add":"remove";
            this.classList[methodName](key);
        }
    }
    // item3.addClass.call(item3,{a:true,xxx:false,c:true});;如果用call.第一個參數(shù)就是函數(shù)里的this,如果不用call(),那么this就自動變成了item3
    console.log(" 方法一:");
    item3.addClass.call(item3,{a:true,xxx:false,c:true});
    // item3.addClass({a:true,xxx:false,c:true});
    console.log(item3);//測試成功


    // 如何直接使用item3.addclass()?,item3.getSiblings()?
    // 方法二:因?yàn)榉椒ㄒ辉谠椭刑砑雍瘮?shù)容易覆蓋,所以自己做一個類似的Node出來
    var Node2 = function (node) {// 將要操作的結(jié)點(diǎn)傳進(jìn)去,然后返回一個對象,這個對象里給添加了有操作這個節(jié)點(diǎn)方法,所以對象.方法就可以實(shí)現(xiàn)操作了,而不需要mydom.addclass(item3,...)這樣了
        return{
            getSiblings: function () {
                var allSilings = node.parentNode.children;
                var siblingsArray = {length:0};
                for (let i = 0; i < allSilings.length; i++) {
                    if (allSilings[i]!==node){
                        siblingsArray[siblingsArray.length] = allSilings[i];
                        siblingsArray.length++;
                    }
                }
                return siblingsArray;
            },
            addClass:function (object) {
                for (let key in object){

                    var methodName;

                    methodName = object[key] ? "add":"remove";
                    node.classList[methodName](key);

                }
            }
        }
    }
    let item4 = document.getElementById("item4");

    var item4obj = Node2(item4);

    console.log(" 方法二:");
    console.log(item4obj.getSiblings());//測試成功

    console.log(" 方法二:");
    item4obj.addClass({a:true,xxx:false,c:true});
    console.log(item4);//測試成功

    // 改為jQuery
    var jQuery = function (nodeOrSelector) {//將Node2改為jQuery,jQuery可以根據(jù)選擇器去找到對應(yīng)的元素
        var node;
        if(typeof nodeOrSelector==="string"){
            node = document.querySelector(nodeOrSelector);
        }else {
            node = nodeOrSelector;
        }
        return{
            getSiblings: function () {
                var allSilings = node.parentNode.children;
                var siblingsArray = {length:0};
                for (let i = 0; i < allSilings.length; i++) {
                    if (allSilings[i]!==node){
                        siblingsArray[siblingsArray.length] = allSilings[i];
                        siblingsArray.length++;
                    }
                }
                return siblingsArray;
            },
            addClass:function (object) {
                for (let key in object){

                    var methodName;

                    methodName = object[key] ? "add":"remove";
                    node.classList[methodName](key);

                }
            }
        }
    }
    let item5 = document.getElementById("item5");

    var $item5 = jQuery(item5);
    console.log(" 改為jQuery方法:");
    console.log($item5.getSiblings());

    console.log(" 改為jQuery方法:");
    $item5.addClass({red:true,xxx:false,c:true});
    console.log(item5);//測試成功
     var child3 = jQuery("ul>li:nth-child(3)");
     child3.addClass({blue:true});


     // jQuery操作多個節(jié)點(diǎn)
    var jQueryS = function (nodeOrSelector) {
        var node = {};
        if (typeof nodeOrSelector ==="string"){
            var temp = document.querySelectorAll(nodeOrSelector);//先用querySelectorAll獲取這個偽數(shù)組
            for (let i = 0; i < temp.length; i++) {
                node[i] = temp[i];
            }
            node.length = temp.length;//將偽數(shù)組凈化,凈化成只有0123值和length的偽數(shù)組

        } else if(nodeOrSelector instanceof Node){// 如果是node,也將其轉(zhuǎn)化成偽數(shù)組
            node[0] =nodeOrSelector;
            node.length = 1;
        }
        node.getSiblings = function () {

        };
        node.addClass = function (classesArray) {//傳入class數(shù)組,給選擇的多個節(jié)點(diǎn)都加上數(shù)組中class
            classesArray.forEach(value=>{
                for (let i = 0; i < node.length; i++) {
                    node[i].classList.add(value);
                }
            })
        }
        node.getTexts = function () {
            var texts=[];
            for (let i = 0; i < node.length; i++) {
                texts.push(node[i].textContent);
            }
            return texts;
        }
        node.setTexts = function (text) {
            for (let i = 0; i < node.length; i++) {
                node[i].textContent = text;
            }
        }

        //set和get合并
        node.text = function (text) {
            if (text===undefined){
                var texts=[];
                for (let i = 0; i < node.length; i++) {
                    texts.push(node[i].textContent);
                }
                return texts;
            }else{
                for (let i = 0; i < node.length; i++) {
                    node[i].textContent = text;
                }
            }
        }
        return node;
    }

    var allNodes = jQueryS("ul>li:nth-child(even)");//偶數(shù)孩子
    allNodes.addClass(["big","green"]);
    console.log(allNodes.getTexts());
    console.log(allNodes.text());
    // console.log(allNodes.text(1));//測試成功

    //總結(jié):jQuery的作用就是將選擇其選擇的元素放到一個對象里,這個對象里有01234標(biāo)序,代表每一個選擇的元素,有l(wèi)ength代表所有元素加起來總共的長度,有各種方法,addclass,gettext等等.就是反悔了這樣一個hash
};

UseJquery.js

var $nodes  = $("ul>li:nth-child(even)");//注意$nodesjQuery聲明的變量前面要加一個$,防止混淆,因?yàn)閖Query聲明的變量只能用jQuery的api,不能用dom的api.
console.log($nodes);
x.onclick = function () {
    $nodes.toggleClass("pink");//toggle,開關(guān),切換
    // console.log(1);
}

var colorArray = ["blue","yellow","red","pink","big"]
var $nodes2 = $("#ol2>li");
$nodes2.addClass(function (index,currentClass) {
    return colorArray[index];//ol里面的每一個li加了"blue","yellow","red","pink","big"這幾個屬性
})
//https://www.jquery123.com/addClass/

3.this 和 arguments

f.call(asThis, input1,input2)

其中 asThis 會被當(dāng)做 this，[input1,input2] 會被當(dāng)做 arguments
禁止使用 f(input1, input2)，因?yàn)閷W(xué)會 .call 才能理解 this

this 和 arguments

function f(){
    "use strict"
    console.log(this)
    console.log(arguments)
    return undefined
}
f.call(1,2,3) // this 為 1，arguments 為 [2,3]

this 的值到底是什么？一次說清楚---方應(yīng)杭
this定義:this是call的第一個參數(shù).
this定義:this是call的第一個參數(shù).
this定義:this是call的第一個參數(shù).
「每日一題」JS中的閉包是什么？---方應(yīng)杭

關(guān)于原型鏈:
「每日一題」什么是 JS原型鏈？---方應(yīng)杭

JavaScript 世界萬物誕生記

dom就是一個命名的空間,命名的所屬對象
函數(shù)庫:特定種類的API
jQueryMobil已經(jīng)過時,不要學(xué)

jQuery的原型

測試代碼




    
    
    
    Document

結(jié)果如下:

就像Boolea,Array一樣,
他的原型就是jQuery.prototype

總結(jié)：自己實(shí)現(xiàn)jquery例子

var myjQueryS = function(node){
    var Node = {}
    Node.length = 0
    if((typeof node)==="string"){
        var nodearr  = document.querySelectorAll(node)
        for (let index = 0; index < nodearr.length; index++) {
            let element = nodearr[index];
            Node[index] = element
            Node.length++
        }
    }else{
        Node["0"] = node
        Node.length++
    }
    Node.addClass = function(addclass){
        for (let index = 0; index < Node.length; index++) {
            let element = Node[index]
            element.classList.add(addclass)
        }
    }
    Node.text = function(text){
        
        if(text===undefined){
            let textArr = []
            for (let index = 0; index < Node.length; index++) {
                let element = Node[index]
                textArr.push(element.textContent)
            }
            return textArr
        }else{
            for (let index = 0; index < Node.length; index++) {
                let element = Node[index]
                element.textContent = text
            }
        }
    }
    return Node
}
var $div = myjQueryS("div")
console.log($div)
$div.addClass("xxx")
console.log($div.text())
// $div.text("xxx")

GPU云服務(wù)器云服務(wù)器原型原型鏈簡化版原型鏈原型鏈繼承

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/95317.html

發(fā)表評論

登陸后可評論

0條評論

Aldous

男|高級講師

我要關(guān)注我要私信

TA的文章

美妝專題研究報告（合集）

閱讀 1519·2021-11-23 09:51
EasyUi項(xiàng)目《網(wǎng)上書城》之權(quán)限登陸，注冊，左側(cè)樹形菜單

閱讀 3639·2021-09-26 09:46
當(dāng)過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會成長

閱讀 2125·2021-09-22 10:02
前端—初級階段2(5-8)

閱讀 1818·2019-08-30 15:56
css3 響應(yīng)式神器 calc()

閱讀 3319·2019-08-30 12:51
flex布局的溫故學(xué)習(xí)

閱讀 2224·2019-08-30 11:12
z-index與堆疊上下文

閱讀 2060·2019-08-29 13:23
vue 1.x 組件數(shù)據(jù)傳遞

閱讀 2323·2019-08-29 13:16

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

簡化版自己實(shí)現(xiàn)jQuery、this、arguments、閉包、原型鏈

相關(guān)文章

JavaScript學(xué)習(xí)之路 — 函數(shù)、閉包與原型鏈

【進(jìn)階 6-2 期】深入高階函數(shù)應(yīng)用之柯里化

JS語言缺陷

漫談javascript函數(shù)式編程

jquery里面val函數(shù)重載的實(shí)現(xiàn)思路

發(fā)表評論

0條評論

Aldous

男|高級講師

TA的文章

美妝專題研究報告（合集）

EasyUi項(xiàng)目《網(wǎng)上書城》之權(quán)限登陸，注冊，左側(cè)樹形菜單

當(dāng)過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會成長

前端—初級階段2(5-8)

css3 響應(yīng)式神器 calc()

flex布局的溫故學(xué)習(xí)

z-index與堆疊上下文

vue 1.x 組件數(shù)據(jù)傳遞

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

簡化版自己實(shí)現(xiàn)jQuery、this、arguments、閉包、原型鏈

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

簡化版自己實(shí)現(xiàn)jQuery、this、arguments、閉包、原型鏈