可想实现一个自己的简单jQuery库？(五)

mindwind 发布于2019-08-21 10:48 / 1323人阅读

摘要：这个版本我们要增加一个用的非常多的方法那就是我们知道不仅能遍历数组还能遍历对象首先我们需要一个对数组进行验证的方法接着就是我们的重头戏因为我们还可能遍历数组对象如所以还需要一个判断是否是数组对象在这应该强调下的用法还是很多人不知道何时使用

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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