转载

前端设计模式之AOP

设计模式类型：修饰者模式（AOP）

问题1：移动端网页小游戏，点击play按钮，点击抽奖按钮，页面进入，等事件都要加上埋点，每次都要在事件的方法体里最后一句加上埋点上传的逻辑。

问题2：队友写了个window.onload，一万行代码，看着头大，新需求需要在原来的逻辑执行完之后做业务逻辑。

分析问题，每次执行相同的方法确实很烦，很多处代码都要加上uploadEventsPoint(埋点上传)，一万行的代码去改动，往里面去加逻辑，只会迭代的代码越来越多，越来越不好理逻辑，新来的同学看了更会看不懂。有没有一种方法，提供一个after方法，所有的事件被它包装后就立刻执行after里的逻辑。

解决问题：
function decorateWrap(fn，after) = {
    return (arg) => {
        fn.call(this, ...arg)
        after(...arg)
    }
}

function btn1Click = () => {
    /**
    *  此处省略一万行代码
    */
}

function btn2Click = () => {
    /**
    *  此处省略一万行代码
    */
}

function uploadPointer = (type) => {
    $.ajax({
        type: 'post',
        data: {
            type,
        }
    })
}

btn1Click = decorateWrap(btn1Click, uploadPointer);
btn2Click = decorateWrap(btn2Click, uploadPointer);

document.getElement.getElementById('btn1').addEventListener('click', () => {
    btn1Click('btn1')
})
document.getElement.getElementById('btn2').addEventListener('click', () => {
    btn2Click('btn1')
})

window.onload = function() {
    /**
    * 此处省略一万行代码
    */
}
decorateWrap(window.onload, () => {
    /**
    *   前面的一万多行代码执行完了才会到这里
    */
})()

原文 https://segmentfault.com/a/1190000022384981

正文到此结束