3-策略模式_csdn cs3策略-CSDN博客

本文链接：https://blog.csdn.net/qq_41797053/article/details/105439201
<!DOCTYPE html>
<html lang='en'>

<head>
    <meat charset='UTF-8'>
        <meat name='viewport' content='width=device-width, initial-scale=1.0'>
            <style>
                #show {
                    width: 200px;
                    height: 200px;
                    border: 1px solid;
                }
            </style>
</head>

<body>
    <div id="show">测试</div>
    <button type="background" cssVal='green'>改变背景</button>
    <button type="color" cssVal='red'>改变文字颜色</button>
    <button type="fontSize" cssVal='28px'>改变文字大小</button>
    <button type="fontWeight" cssVal='bold'>改变文字宽度</button>
    <button type="opacity" cssVal='0.3'>改变透明度</button>

    <script>
        // let ODom = document.getElementById("show");
        // let btnGroup = document.getElementsByTagName('button');
        // for (let i = 0; i < btnGroup.length; i++) {
        //     btnGroup[i].onclick = function () {
        //         changeStyle(ODom, this.getAttribute('type'))
        //     }
        // }
        // // 改变目标元素样式
        // function changeStyle(dom, type) {
        //     let typeObj = {
        //         bg: ['background', 'green'],
        //         cl: ['color', 'red'],
        //         fs: ['fontSize', '28px'],
        //         fw: ['fontWeight', 'bold'],
        //         op: ['opacity', '0.3'],
        //     }

        //     if (type instanceof Array) {
        //         type.forEach((item) => {
        //             dom.style[item.cssType] = item.cssVal;
        //         })
        //     } else {
        //         let cssType = typeObj[type][0];
        //         let cssVal = typeObj[type][1];
        //         dom.style[cssType] = cssVal;
        //     }
        // }
        // changeStyle(ODom, [
        //     {
        //         cssType: 'background',
        //         cssVal: 'black'
        //     },
        //     {
        //         cssType: 'color',
        //         cssVal: 'red'
        //     }
        // ])



        let ODom = document.getElementById("show");
        let btnGroup = document.getElementsByTagName('button');

        let ProxyEvent = function (func) {
            let timer;
            let cahce = [];
            // 明确知道参数个数的情况
            // return function (dom, type) {
            //     if (type instanceof Object) {
            //         clearTimeout(timer);
            //         console.log(arguments, '----arguments')
            //         cahce.push(type);
            //         timer = setTimeout(() => {
            //             changeStyle(dom, cahce);
            //             cahce = [];
            //         }, 2000);
            //     }
            // }
            
            // 不知道参数的情况，用arguments
            return function () {
                let oDom = [].shift.call(arguments);
                let type = [].shift.call(arguments);
                if (type instanceof Object) {
                    clearTimeout(timer);
                    cahce.push(type);
                    timer = setTimeout(() => {
                        changeStyle(oDom, cahce);
                        cahce = [];
                    }, 2000);
                }
            }
        }

        let proxyEvent = ProxyEvent(changeStyle);
        for (let i = 0; i < btnGroup.length; i++) {
            btnGroup[i].onclick = function () {
                proxyEvent(ODom, {
                    cssType: this.getAttribute('type'),
                    cssVal: this.getAttribute('cssVal')
                })
            }
        }

        // 改变目标元素样式
        function changeStyle(dom, type) {
            if (type instanceof Array) {
                type.forEach((item) => {
                    dom.style[item.cssType] = item.cssVal;
                })
            }
        }


    </script>
</body>

</html>