jQuery源码学习

  • jQuery源码学习已关闭评论
  • 16 次浏览
  • A+
所属分类:Web前端
摘要

自定义一个类似jquer库==> Hq库的具体步骤:第一步:

自定义一个类似jquer库==> Hq库的具体步骤:

// 1.通过$_$('div')方法就可以直接返回一个由Hq构造函数实例化出来的一个对象
// 2.在通过Hq构造函数,获取你以选择器为参数的所有节点
// 3.Hq在调用原型上addEles方法将所有的节点,赋值给对应的this的每一项(实例化对象)
// 4.进而这个对象又可以使用Hq原型对象prototype上所有的方法
// 5.所以接下来,我们只需要封装各种方法即可,(设置形参)
// 6.为了可以进行链式调用,只需在每个方法后面在返回该实例化对象 (return this)--紧接着调用其它方法
// 7.链式调用 --- 关键就是在于JQ源码中所有的方法最后都会返回 return this

第一步:

// 自定义Hq 就是相当于一个构造函数
function Hq(ele) {
    if (typeof ele == 'string') {
        // querySelectorAll 可以获取节点
        let eles = document.querySelectorAll(ele)
        // for (var i = 0; i < eles.length; i++) {   //可以将这一部分单独抽出来封装成一个方法addEles
        //     this[i] = eles[i]
        // }
        // this.length = eles.length
        // 将节点传给addElEs()方法
        this.addEles(eles)
    }
}
 
第二步:在其prototype原型上添加方法 --  将节点对象每个内容(节点名字)赋值给构造函数中的this
// ================ prototype原型上添加方法===============
Hq.prototype.addEles = function (ele) {
    // 将节点对象每个内容(节点名字)赋值给构造函数中的this
    for (var i = 0; i < ele.length; i++) {
        this[i] = ele[i]
    }
    this.length = ele.length
}
 
第三步:在根据其用法,逆向添加其它的方法:例如css样式的方法
// ===============================添加css样式方法============================
{
    Hq.prototype.Style = function (parm, parn) {
        if (parm == 'yanse') {
            for (let i = 0; i < this.length; i++) {
                this[i].style.color = parn
            }
        } else if (parm == 'beijing' || parm == 'background-color') {
            for (let i = 0; i < this.length; i++) {
                this[i].style.background = parn
            }
        } else if (parm == 'biankuang') {
            for (let i = 0; i < this.length; i++) {
                this[i].style.border = parn
            }
        }
        return this
    }
}
 
 
第四步:添加常见事件方法
// ===============================常用事件方法添加==========================
// 添加鼠标点击方法
{
    Hq.prototype.Dj = function (cb) {  //cb就是形参用来接收要执行的function函数
        // addEventListener给节点添加事件
        for (let i = 0; i < this.length; i++) {
            this[i].addEventListener('click', cb); //这里绑定的是一个事件侦听('事件类型' ,function(){} -- 要执行的函数)
        }
        return this
    }
    // 添加鼠标移动方法
    Hq.prototype.mouOver = function (cb) {
        for (let i = 0; i < this.length; i++) {
            this[i].addEventListener('mouseover', cb);
        }
        return this
    }
}
 
第五步:添加常用的特效方法
// ==========================常用的特效方法=================================
{
    Hq.prototype.yinCang = function () {
        for (let index = 0; index < this.length; index++) {
            this[index].style.display = 'none'
        }
    }
    Hq.prototype.xianShi = function () {
        for (let index = 0; index < this.length; index++) {
            this[index].style.display = 'block'
        }
    }
}
 
第六步:最后定义一个函数$() -- 实例化出jquery对象
function $_$(argument) {
    // 构造函数实例化
    return new Hq(argument)
}

///////////////////==================以上就是自定义Hq库中的一些功能===================///////////////////////
 
接下来我们在html网页文件实际使用Hq库:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>源码解析</title>
    <script src="./script/Yunlong.js"></script>
</head>
<body>
    <div>
        <ul>
            <li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
            <li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
            <li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
            <li><img src="./img/img/1.jpg" alt="jQuery源码学习" alt=""></li>
        </ul>
        <button>dianji</button>
        <p>45454545</p>
    </div>
    <script>
        // console.log(new Hq('img'));   //自已手动的实例化对象
        // console.log($_$('img'));   //同过调用$_$方法实例化对象
        // $_$('img').Myclick(function () {
        //     console.log('这是云龙,自定义的点击方法');
        // })

        $_$('li').Style('yanse', 'red').Style('beijing', "#3f3").Style('biankuang', "2px solid #f33")
        // $_$('button').Dj(function () {
        //     console.log('点击事件');
        // })

        // $('button').click(function () {
        //     $('p').toggle()
        // })

    </script>
</body>
</html>