可想實現一個自己的簡單jQuery庫？(五)

mindwind 發布于2019-08-21 10:48 / 1345人閱讀

摘要：這個版本我們要增加一個用的非常多的方法那就是我們知道不僅能遍歷數組還能遍歷對象首先我們需要一個對數組進行驗證的方法接著就是我們的重頭戲因為我們還可能遍歷數組對象如所以還需要一個判斷是否是數組對象在這應該強調下的用法還是很多人不知道何時使用

Lesson-4

這個版本我們要增加一個用的非常多的方法!

那就是each!

我們知道each不僅能遍歷數組,還能遍歷對象.

首先我們需要一個對數組進行驗證的方法

function isArray(obj) {
    return Array.isArray(obj);
}

接著就是我們的重頭戲

Kodo.each = function(obj,callback) {
    var len = obj.length,
        constru = obj.constructor,
        i = 0;

    if(constru === window.f) {
        for (; i < len; i++) {
            var val = callback.call(obj[i],i,obj[i]);
            if(val === false) break;
        }
    } else if (isArray(obj)) {
        for (; i < len; i++) {
            var val = callback.call(obj[i],i,obj[i]);
            if(val === false) break;
        }
    } else {
        for( i in obj ) {
            var val = callback.call(obj[i],i,obj[i]);
            if(val === false) break;
        }
    }

};

因為我們還可能遍歷Kodo數組對象

如

f("div").each(function(index,item) {

})

所以還需要一個判斷是否是Kodo數組對象

if(constru === window.f) {
    for (; i < len; i++) {
        var val = callback.call(obj[i],i,obj[i]);
        if(val === false) break;
    }
}

在這應該強調下call的用法,還是很多人不知道call何時使用.

在我們的callback里第一個參數是下標,第二個參數是當前的對象,然后this還要指向他自己

所以 callback.call(obj[i],i,obj[i]); 就是這樣寫第一個參數是改變this指向,第二個參數是下標,第三個是自己本身

很簡單不是嗎?

既然你都看到這里了,還不給我一個star?!

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-4
可想造一個屬于你自己的jQuery庫?(四)：http://segmentfault.com/a/1190000004001281

云服務器 GPU云服務器 js實現的簡單特效怎么搭建一個自己的視頻網站如何搭建一個自己的服務器用c實現簡單的shell

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86228.html

可想實現一個自己的簡單jQuery庫？(五)

摘要：這個版本我們要增加一個用的非常多的方法那就是我們知道不僅能遍歷數組還能遍歷對象首先我們需要一個對數組進行驗證的方法接著就是我們的重頭戲因為我們還可能遍歷數組對象如所以還需要一個判斷是否是數組對象在這應該強調下的用法還是很多人不知道何時使用 Lesson-4 這個版本我們要增加一個用的非常多的方法! 那就是each! 我們知道each不僅能遍歷數組,還能遍歷對象. 首先我們需要一個對數...

Code4App 2019-08-01 14:55 評論0 收藏0
可想實現一個自己的簡單jQuery庫？(六)

摘要：這個版本新增個方法先給出代碼我們要仔細分辨下這個方法在中返回的都是什么對象到底是對象還是對象明白了這個后就很容易能寫出這個方法首先我們知道一般都會這樣寫查找下的返回的是數組對象而不是原生的對象那么我們就可以換個思路因為我們能拿到這個 Lesson-5 這個版本新增6個方法,find(),first(),last(),eq(),get(),ajax 先給出代碼 find : funct...

Warren 2019-08-21 10:49 評論0 收藏0
可想實現一個自己的簡單jQuery庫？(六)

摘要：這個版本新增個方法先給出代碼我們要仔細分辨下這個方法在中返回的都是什么對象到底是對象還是對象明白了這個后就很容易能寫出這個方法首先我們知道一般都會這樣寫查找下的返回的是數組對象而不是原生的對象那么我們就可以換個思路因為我們能拿到這個 Lesson-5 這個版本新增6個方法,find(),first(),last(),eq(),get(),ajax 先給出代碼 find : funct...

whinc 2019-08-01 14:55 評論0 收藏0