β

AOP装饰函数与小T的情愫(二)

Harries Blog™ 34 阅读

老大见小T终于摸清了用 AOP 装饰函数的一些套路,很是欣慰,决定用实际情景让他试一试,老大拿出了一个最常见的AOP的经典应用之一— 数据 统计 上报的情景,分离业务 代码 和数据统计上报的代码,在实际 开发 中项目结尾阶段难免要加上很多统计数据的代码,这个过程可能被迫改动早已封装好的函数.

1.老大给小T设定了一个情景如下:页面中有一个登录的button,点击这个button会弹出登录的浮层,与此同时需要进行数据上报来统计有多少用户点击了这个登录的button(这个任务可能是在项目结尾阶段进行的),让小T发现问题并进行改写:

<html>
    <input type="button" value="login" id="login" />
    <script>
        const login = document.getElementById('login');
        const textlogin = login.tagName;
        let x = 0;
        let showLogin = function () {
            console.log('打开登录浮层');
            log(textlogin);
        }

        let log = function (tag) {
            x = x + 1;
            console.log('上报标签为:' + tag +','+ '上报次数为:' + x);
            // 这里我简单的用login按钮单击的次数来模拟,上报过程略
        }
        login.onclick = showLogin;
    </script>
</html>
作者:Harries Blog™
追心中的海,逐世界的梦
原文地址:AOP装饰函数与小T的情愫(二), 感谢原作者分享。

发表评论