亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

可想自己造一個jQuery庫?(五)

標簽:
前言

1.虽然说市面上有许多讲解jQuery源码或者是也有类似如何搭建一个属于自己的javascript库的文章。
2.但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂jQuery
3.如果你既不能通过书籍视频和他人文章的源码解析明白jQuery,也想自己实现一个jQuery的。
4.本系列就是以一些不同的方法手段,简单的代码,实现了一套与jQuery一样的API
5.最后在每篇文章的最后会留下github源码地址,希望能得到大家star的认可与支持,谢谢。

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://www.xianlaiwan.cn/article/2043

點擊查看更多內容
6人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
165
獲贊與收藏
1382

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消