JS 事件绑定方法封装聚合

fengyehongWorld

已于 2022-05-03 21:05:21 修改

阅读量487

点赞数

分类专栏： # JS 文章标签： javascript jquery

于 2022-05-03 17:50:03 首次发布

本文链接：https://blog.csdn.net/feyehong/article/details/124558654

版权

JS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

⏹主函数

<!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>
</head>
<body>
    <input id="ipt1" type="text" />
    <hr>
    <input id="ipt2" type="text" />
    <hr>
    <select id="slt1">
        <option>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
</body>
<script src="../jquery.min.js"></script>
<script type="module">
    // 导入事件绑定的共通方法
    import bindEventCommon from './js/bindEventCommon.js'
    
    $(function() {
		
		// 项目的ID列表
        const inputItemIdList = [
            "ipt1",
            "ipt2",
            "slt1"
        ];
        bindEventCommon(inputItemIdList);
    })
</script>
</html>

❗❗❗事件绑定的共通函数

// 事件绑定的共通函数,参数为id列表
async function bindEventCommon(itemIdList) {

    // 准备好要导入的模块地址
    const importModule = [];
    // 根据id来动态导入id所对应的模块
    for (const itemId of itemIdList.values()) {
        // 👨‍💻ES2020新语法,动态模块导入
        importModule.push(import(`./${itemId}Event.js`))
    }
    
    // 存储导入模块的list
    let eventObjectList = [];
    try {
        eventObjectList = await Promise.all(importModule);
    } catch (error) {
        console.error('要导入的模块不存在,请检查ID名称或者模块名称!');
        return;
    }

    // 动态进行事件绑定
    for (const [index, itemId] of itemIdList.entries()) {
        /*
            itemIdList中元素的数量和eventObjectList中模块的数量相同
                因此可以通过itemIdList中元素的index获取到模块List中相对应的模块
            模块对象.default可以获取到模块中聚合的对象
        */ 
        $(`#${itemId}`).on(eventObjectList[index].default);
    }
}

export default bindEventCommon;

⏹各个项目所对应的事件封装函数
ipt1Event.js

// id为ipt1的元素的绑定事件聚合函数,该元素的所有事件都绑定到该对象中
const ipt1EventObject = {
    // 💪之所以命名为focus,是因为要和JQuery的on方法的事件名称保持一致
    focus: (event) => {
        console.log("ipt1的focus()方法执行了");
    },
    click: (event) => {
        console.log("ipt1的click()方法执行了");
    }
}

export default ipt1EventObject;

ipt2Event.js

const ipt2EventObject = {
    focus: (event) => {
        console.log("ipt2的focus()方法执行了");
    },
    click: (event) => {
        console.log("ipt2的click()方法执行了");
    }
}

export default ipt2EventObject;

slt1Event.js

const focusEvent = (event) => {
    console.log(event);
    console.log("slt1的focus()方法执行了");
}

function click(event) {
    console.log(event);
    console.log("slt1的click()方法执行了");
}

const slt1EventObject = {
    // 😒自定义函数的名称和事件名称不相同
    focus: focusEvent,
    // 😑想要把方法聚合到对象中
    blur: (event) => {
        console.log("slt1的blur()方法执行了");
    },
    // 😋自定义函数名称和事件名称相同
    click
}

export default slt1EventObject;