簡化版自己實現jQuery、this、arguments、閉包、原型鏈

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

摘要：簡化版自己實現與盡量不要用規(guī)則太復雜用只需要注意兩點所有對象也都是因為地址不一樣自己寫與用這是這是這是這是這是這是這是這是這是直接使用直接使用得到兄妹結點傳入的參數是一個節(jié)點返回兄妹結點的數組添加或刪除傳入的第一個參數是結點第

簡化版自己實現jQuery 1. == 與===

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

用===只需要注意兩點,1.NaN===NaN,false,2.所有對象===也都是false,因為地址不一樣.

2.自己寫jQuery與用jQuery




    
    jQuery-Study
    
    
    




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




    1
    2
    3
    4
    5

01_myjQuery1.js

// 得到兄妹結點
//傳入的參數是一個節(jié)點,返回兄妹結點的數組
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
//傳入的第一個參數是結點,第二個參數是對象, 這個對象里是key:value,key就是要操作的class,value判斷操作類型,true添加,false刪除
function addClass(node,object){
    for (let key in object){
        //對象調用方法的兩種方式:
        // obj.f()
        // obj["f"]()

        var methodName;

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

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

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

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


    // 如何直接使用item3.addclass()?,item3.getSiblings()?
    // 方法一:給原型鏈加公有屬性公有方法,但是有缺點,容易覆蓋
    Node.prototype.getSiblings = function () {
        var allSilings = this.parentNode.children;//誰調用這個函數,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.第一個參數就是函數里的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.第一個參數就是函數里的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()?
    // 方法二:因為方法一在原型中添加函數容易覆蓋,所以自己做一個類似的Node出來
    var Node2 = function (node) {// 將要操作的結點傳進去,然后返回一個對象,這個對象里給添加了有操作這個節(jié)點方法,所以對象.方法就可以實現操作了,而不需要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可以根據選擇器去找到對應的元素
        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é)點
    var jQueryS = function (nodeOrSelector) {
        var node = {};
        if (typeof nodeOrSelector ==="string"){
            var temp = document.querySelectorAll(nodeOrSelector);//先用querySelectorAll獲取這個偽數組
            for (let i = 0; i < temp.length; i++) {
                node[i] = temp[i];
            }
            node.length = temp.length;//將偽數組凈化,凈化成只有0123值和length的偽數組

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

        };
        node.addClass = function (classesArray) {//傳入class數組,給選擇的多個節(jié)點都加上數組中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)");//偶數孩子
    allNodes.addClass(["big","green"]);
    console.log(allNodes.getTexts());
    console.log(allNodes.text());
    // console.log(allNodes.text(1));//測試成功

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

UseJquery.js

var $nodes  = $("ul>li:nth-child(even)");//注意$nodesjQuery聲明的變量前面要加一個$,防止混淆,因為jQuery聲明的變量只能用jQuery的api,不能用dom的api.
console.log($nodes);
x.onclick = function () {
    $nodes.toggleClass("pink");//toggle,開關,切換
    // 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 會被當做 this，[input1,input2] 會被當做 arguments
禁止使用 f(input1, input2)，因為學會 .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 的值到底是什么？一次說清楚---方應杭
this定義:this是call的第一個參數.
this定義:this是call的第一個參數.
this定義:this是call的第一個參數.
「每日一題」JS中的閉包是什么？---方應杭

關于原型鏈:
「每日一題」什么是 JS原型鏈？---方應杭

JavaScript 世界萬物誕生記

dom就是一個命名的空間,命名的所屬對象
函數庫:特定種類的API
jQueryMobil已經過時,不要學

jQuery的原型

測試代碼




    
    
    
    Document

結果如下:

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

總結：自己實現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云服務器原型原型鏈簡化版原型鏈原型鏈繼承

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

轉載請注明本文地址：http://m.hztianpu.com/yun/95317.html

JavaScript學習之路 — 函數、閉包與原型鏈

摘要：全局的函數第個對象第個對象作為構造器進行調用也就是利用運算符進行調用。與操作的共同使用只有通過操作產生的對象，可以使用構造器函數原型鏈上的內容，否則對象只能使用自己原型鏈上的內容。今天這個話題是因為這幾天看了《JavaScript忍者秘籍》，感覺這本書把這幾個內容講的蠻透徹了，特撰本文，以便日后翻閱。（應該都會以知識點的形式給出吧。）函數 1.【基本類型】 JavaScript中函...

klivitamJ 2019-08-20 18:52 評論0 收藏0
【進階 6-2 期】深入高階函數應用之柯里化

摘要：引言上一節(jié)介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。我們期望函數輸出，但是實際上調用柯里化函數時，所以調用時就已經執(zhí)行并輸出了，而不是理想中的返回閉包函數，所以后續(xù)調用將會報錯。引言上一節(jié)介紹了高階函數的定義，并結合實例說明了使用高階函數和不使用高階函數的情況。后面幾部分將結合實際應用場景介紹高階函數的應用，本節(jié)先來聊聊函數柯里化，通過介紹其定義、比較常見的...

stackvoid 2019-05-22 19:25 評論0 收藏0
JS語言缺陷

摘要：語言缺陷是一門在極短時間里創(chuàng)造的腳本語言，它存在很多的不足，這使得在學習時無形加大了學習的難度，本文就將這些內容進行總結，以防繼續(xù)掉坑。 JS語言缺陷 js是一門在極短時間里創(chuàng)造的腳本語言，它存在很多的不足，這使得在學習時無形加大了學習的難度，本文就將這些內容進行總結，以防繼續(xù)掉坑。 1.變量提升 1.1 案例分析先來說一下變量提升,它其實就是先用后聲明，經常被拿來說明的一個例子是：...

I_Am 2019-08-26 13:50 評論0 收藏0
漫談javascript函數式編程

摘要：高階函數不是的所特有的，其他編程語言也有。高階函數面向切面編程面向切面編程這種思想在開發(fā)中比較常見，主要就是將一些與核心業(yè)務無關的功能抽離出來，比如異常處理，日志統(tǒng)計等。 javascript的函數式語言特性我們知道JavaScript使一門面向對象的編程語言，但這門語言同時擁有很多函數式語言的特性。 JavaScript的設計者在設計最初就參考了LISP方言之一的Scheme，引入...

liaorio 2019-08-22 13:47 評論0 收藏0
jquery里面val函數重載的實現思路

摘要：后續(xù)說完上面的再對比下面的理解，會更深入的理解原型與原型鏈這里是對象擁有了這樣的方法，而不是，是繼承區(qū)別于方法直接作用于原型上例子的實現所謂重載，就是一組相同的函數名，有不同個數的參數，在使用時調用一個函數名，傳入不同參數，根據你的參數個數，來決定使用不同的函數！但是我們知道js中是沒有重載的，因為后定義的函數會覆蓋前面的同名函數，但是我們又想實現函數重載該怎么辦呢？第1種方法： ...

learn_shifeng 2019-08-26 12:17 評論0 收藏0