ES6 class 验证

兮兮的酱羊肉

于 2022-07-20 11:39:49 发布

阅读量130

点赞数

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/u012863185/article/details/125888946

版权

es6验证，仿Dplayer测试on监听自定义事件，记录一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6 class</title>
    <style type="text/css">
        .player-container {
            background-color: red;
        }
    </style>
</head>
<body>

<div id="playerId" class="player-container">gvdf</div>

<div>
    <input id="cwidth" type="number" placeholder="宽" />
    <input id="cheight" type="number" placeholder="高" />
    <button onclick="submit()">提交</button>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
    class XJPlayer {
        handlerFunc;
        container;
        width = 1080;
        height = 720;

        constructor(option) {
            this.handlerFunc = {};
            this.container = option.container;
            this.resize(option.width, option.height);
        }

        resize(width, height) {
            this.width = width;
            this.height = height;
            this.container.style.width = this.width + 'px';
            this.container.style.height = this.height + 'px';
            this.trigger('resize', '重置尺寸');
        }

        on(eName, callback) {
            this.handlerFunc[eName] = callback;
        }

        trigger(eName, params) {
            if (this.handlerFunc[eName]) {
                this.handlerFunc[eName].call(this, params);
            }
        }
    }

    const player = new XJPlayer({
        container: document.getElementById("playerId"),
        width: 160,
        height: 90
    });

    player.on("resize", params => {
        console.log("resize", params);
        console.log("resize", player);
    });

    const submit = () => {
        const width = $("#cwidth").val();
        const height = $("#cheight").val();
        player.resize(width, height);
    }

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