用ES6简单实现jQuery

目录结构

├── index.html
└── js
    └── jQuery-demo.js

逻辑实现

jQuery-demo.js

/**
 * 手动实现一个简单的Query
 * 设计初衷
 * 提高操作dom的敏捷性
 * 提高代码复用性
 * 提高代码可维护性
 */

/**
 * 现有功能：
 * 获取DOM节点
 */

class jQuery {
    constructor(selector) {
        const result = document.querySelector(selector) 
        const length = result.length
        for (let index = 0; index < length; index++) {
            this[index] = result[index]
        }
        this.selector = selector
        this.length = length
    }


    /**
     * 
     * @param {Dom索引值}} index 
     * @returns 
     */
    get(index) {
        return this[index]
    }

    /**
     * 
     * @param {毁掉} fn 
     */
    each(fn) {
        for (let index = 0; index < this.length; index++) {
            const elem = this[index]
            fn(elem)
        }
    }

    /**
     * 
     * @param {事件类型} type 
     * @param {毁掉} fn 
     * @returns 
     */
    on(type,fn) {
        return this.each(elem => {
            elem.addEventListener(type,fn,false)
        })
    }
    
}

开始使用

创建html模版

<!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>简单实现jQuery-持续更新中</title>
</head>
<body>      
    <div class="page-container">
        <ul id="page-menu">
            <li>苹果</li>
            <li>香蕉</li>
            <li>西瓜</li>
        </ul>
    </div>
</body>
</html>

引入库文件

<script src="./js/jQuery-demo.js"></script>

实例话

let $ = new jQuery('li')

// 获取所有的信息
console.log('result---->',$)

// 获取所有匹配节点的长度
$.length)

// 获取某一个元素
$.get(0)

// 给元素绑定所需事件
$.on( ('click', () => alert('你好啊！')) )
posted @ 2021-12-07 09:36  杨凌云的博客  阅读(306)  评论(0)    收藏  举报