閑話🎈

最近在弄 jquery 原始碼，感覺真的對自己的提升有很大的進步，在jquery框架中也就使用到了原型和原型鏈，還有閉包的概念，然后各種的思想，什么鏈式編程，還有extend這個方法非常的nice，然后接下來，我會帶著大家寫一下，jquery 中的 nextAll 和 prevAll 這兩個函式🎈，

第一步：構建一個自己的 jQuery🧨

可能大家有點疑惑為什么要傳入 window 和 undefined，\L

傳入 window：
1.1 為了后期壓縮代碼方便，
1.2 為了更高效的查找window，

傳入 undefined：
2.1 為了后期壓縮代碼方便，
2.2 因為IE8及以下瀏覽器可以對undefined進行改變，所以我們要創建一個私有的undefined，以免以后被隨意修改，

// 1. 建立一個 IIFE 函式
(function (window,undefined) {
	var mjQuery = function (selector) {
		return new mjQuery.prototype.init(selector);
	};
	// 創建一個自己的 prototype
	mjQuery.prototype = {
	    constructor：mjQuery,
        init: function (selector) {
        	
        }
    }
    // 改變init的原型 使他的原型指向我們的mjQuery的原型，
	mjQuery.prototype.init.prototype = mjQuery.prototype;
	
    window.mjQuery = $ = mjQuery;
})(window)

<script src="xmjQuery.js"></script>
<body>
	<script>
		console.log($()); // 回傳 init{};
	</script>
</body>

第二步：撰寫一些基本結構🎨

為了后期做準備當我們 $('div‘) 將會獲取到div里面所以的元素并將回傳到一個init物件里面進行操作，

mjQuery.prototype = {
        init: function (selector) {

            if (typeof selector === 'string') {

                // 判斷是否為代碼片段
                if (selector.charAt(0) == "<" && selector.charAt(selector.length - 1) == ">" && selector.length >= 3) {
                    console.log('選擇器')
                }
                // 判斷是否為選擇器
                else {

                    var dom = document.querySelectorAll(selector);
                    [].push.apply(this, dom);

                }

            }
            // 判斷是否為陣列
            else if ("length" in selector && typeof selector == 'object' && selector != window) {

                // 1. 轉真陣列
                var arr = [].slice.call(selector);
                // 2. 轉偽陣列
                [].push.apply(this, arr);

            }
            return this;
        }
    }

<script src="xmjQuery.js"></script>
<body>
	<div></div>
	<script>
		console.log($('div')); // 回傳一個init {0:div,length:1};
	</script>
</body>

第三步：撰寫 nextAll 方法🎃🎀

一個很牛逼的技巧 mjQuery.extend({}) 和 mjQuery.prototype.extend({}) 這樣可以讓我們的后期維護變得更加的方便，


mjQuery.prototype.extend = mjQuery.extend = function (obj) {
        for (var k in obj) {
           // this相當于 mjquery 或 mjquery.prototype 看誰呼叫了
            this[k] = obj[k];
       	}
}

// 將方法寫到了 xmjQuery的原型上，
mjQuery.prototype.extend({
        nextAll: function (name) {
            var res = [];
            // 臨時存盤陣列
            var tempArr = [];
            // 臨時存盤陣列2 
            var tempArr2 = [];
            // 臨時存盤索引值
            var tempIndex = 0;

            // 沒有沒有傳入引數的時候
            if (arguments.length == 0) {
                var sc = document.body.querySelector('script');

                // 1. 遍歷查找的第一個this 
                for (var i = 0; i < this.length; i++) {
                	if (i == 0) {
						// 2. 找到第一個this的父元素
	                    var parent = this[i].parentNode;
	                    // 2.1 遍歷父元素里面的子元素
	                    for (var j = 0; j < parent.children.length; j++) {
	                        // 3. 判斷當前父元素里面的子元素 是否 和 this 這個值不相等
	                        if (parent.children[j] != this[i] && parent.children[j] != sc) {
	                            tempArr.push(parent.children[j]);
	                        }
	                        // 4. 如果相等拿到他的索引值
	                        else {
	                            if (parent.children[j] == this[i]) {
	                                tempIndex = j;
	                            }
	                        }
	                    }

					}
                    
                }
                // 5. 判斷把拿到索引值的前面內容都 咔嚓掉
                for (var i = 0; i < tempArr.length; i++) {
                    if (i < tempIndex) {
                        // 6. 將完整的陣列傳入 res 里面去
                        res.push(tempArr[i]);
                    }
                }
            }
            // 傳入引數
            else {
                var sc = document.body.querySelector('script');

                // 1. 遍歷查找的第一個this 
                for (var i = 0; i < this.length; i++) {
                	if (i == 0) {
						// 2. 找到第一個this的父元素
	                    var parent = this[0].parentNode;
	                    // 2.1 遍歷父元素里面的子元素
	                    for (var j = 0; j < parent.children.length; j++) {
	                        // 3. 判斷當前父元素里面的子元素 是否 和 this 這個值不相等
	                        if (parent.children[j] != this[i] && parent.children[j] != sc) {
	                            tempArr.push(parent.children[j]);
	                        }
	                        // 4. 如果相等拿到他的索引值
	                        else {
	                            if (parent.children[j] == this[i]) {
	                                tempIndex = j;
	                            }
	                        }
	                    }
					}
                    
                }
                // 5. 判斷把拿到索引值的前面內容都 咔嚓掉
                for (var i = 0; i < tempArr.length; i++) {
                    if (i >= tempIndex) {
                        // 6. 將完整的陣列傳入 res 里面去
                        tempArr2.push(tempArr[i]);
                    }
                }

                // 7. 判斷完整陣列里面是否有 傳入name的元素
                for (var i = 0; i < tempArr2.length; i++) {
                    var e = document.querySelectorAll(name);
                    for (var j = 0; j < e.length; j++) {
                        if (tempArr2[i] == e[j]) {
                            res.push(tempArr2[i]);
                        }
                    }
                }
            }
            return $(res);


        }
    })

<script src="mjQuery.js"></script>
<body>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <p class="next"></p>
    <div class="box2">
        <!-- <div class="box1"></div>
        <p class="next"></p>
        <div class="box1"></div>
        <div class="box1"></div> -->
    </div>
    <div class="box2"></div>
    <p class="next"></p>
    <p class="next"></p>
    <div class="box2"></div>
    <div id="box2"></div>
    <div class="box3">
        <div class="box2"></div>
    </div>
    <div class="box2"></div>
    <script>
        console.log($('.next').nextAll('.box2')); // init {0: div.box2, 1: div.box2, 2: div.box2, 3: div.box2, length: 4}
    </script>
</body>

第四步：撰寫 prveAll 方法🎇

mjQuery.prototype.extend({
        prevAll: function (name) {
            var res = [];
            // 臨時存盤陣列
            var tempArr = [];
            // 臨時存盤陣列2 
            var tempArr2 = [];
            // 臨時存盤索引值
            var tempIndex = 0;

            // 沒有沒有傳入引數的時候
            if (arguments.length == 0) {
                var sc = document.body.querySelector('script');

                // 1. 遍歷查找的第一個this 
                for (var i = 0; i < this.length; i++) {
                    // 2. 找到第一個this的父元素
                    if (i == 0) {
                        var parent = this[i].parentNode;
                        // 2.1 遍歷父元素里面的子元素
                        for (var j = 0; j < parent.children.length; j++) {
                            // 3. 判斷當前父元素里面的子元素 是否 和 this 這個值不相等
                            if (parent.children[j] != this[i] && parent.children[j] != sc) {
                                tempArr.push(parent.children[j]);
                            }
                            // 4. 如果相等拿到他的索引值
                            else {
                                if (parent.children[j] == this[i]) {
                                    tempIndex = j;
                                }
                            }
                        }
                    }


                }
                // 5. 判斷把拿到索引值的前面內容都 咔嚓掉
                for (var i = 0; i < tempArr.length; i++) {
                    if (i < tempIndex) {
                        // 6. 將完整的陣列傳入 res 里面去
                        res.push(tempArr[i]);
                    }
                }
            }
            // 傳入引數
            else {
                var sc = document.body.querySelector('script');

                // 1. 遍歷查找的第一個this 
                for (var i = 0; i < this.length; i++) {
                    if (i == 0) {
                        // 2. 找到第一個this的父元素
                        var parent = this[i].parentNode;
                        // 2.1 遍歷父元素里面的子元素
                        for (var j = 0; j < parent.children.length; j++) {
                            // 3. 判斷當前父元素里面的子元素 是否 和 this 這個值不相等
                            if (parent.children[j] != this[i] && parent.children[j] != sc) {
                                tempArr.push(parent.children[j]);
                            }
                            // 4. 如果相等拿到他的索引值
                            else {
                                if (parent.children[j] == this[i]) {
                                    tempIndex = j;
                                }
                            }
                        }
                    }

                }
                // 5. 判斷把拿到索引值的前面內容都 咔嚓掉
                for (var i = 0; i < tempArr.length; i++) {
                    if (i < tempIndex) {
                        // 6. 將完整的陣列傳入 res 里面去
                        tempArr2.push(tempArr[i]);
                    }
                }

                // 7. 判斷完整陣列里面是否有 傳入name的元素
                for (var i = 0; i < tempArr2.length; i++) {
                    var e = document.querySelectorAll(name);
                    for (var j = 0; j < e.length; j++) {
                        if (tempArr2[i] == e[j]) {
                            res.push(tempArr2[i]);
                        }
                    }
                }
            }
            return $(res);


        },
        
    })

<script src="mjQuery.js"></script>
<body>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <p class="next"></p>
    <div class="box2">
        <!-- <div class="box1"></div>
        <p class="next"></p>
        <div class="box1"></div>
        <div class="box1"></div> -->
    </div>
    <div class="box2"></div>
    <p class="next"></p>
    <p class="next"></p>
    <div class="box2"></div>
    <div id="box2"></div>
    <div class="box3">
        <div class="box2"></div>
    </div>
    <div class="box2"></div>
    <script>
        console.log($('.next').prveAll('.box2')); // init {0: div.box1, 1: div.box1, 2: div.box1, length: 3}
    </script>
</body>

完結

求點贊 + 收藏 + 評論🥪🌮🌯🍱🍱🥠

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290451.html

標籤：其他

上一篇：JavaScript 二維陣列轉一維陣列

下一篇：unity打包webgl局限及優化建議

構建jQuery框架封裝 nextAll 和 prevAll 方法！！！！（超級篇！）

文章目錄

閑話🎈

第一步：構建一個自己的 jQuery🧨

第二步：撰寫一些基本結構🎨

第三步：撰寫 nextAll 方法🎃🎀

第四步：撰寫 prveAll 方法🎇

完結