好玩的.有趣的proxy

版权声明:个人笔记,不喜勿喷 https://blog.csdn.net/qq_39571197/article/details/88684406
<script>
    const END = 'end';
    class Chain { /* a factory */
        // status
        get END() {
            return 'end';
        }
        constructor(options) {
            let currentOptionName = null;
            let proxy = new Proxy({}, {
                get: (obj, key, proxyObj) => {
                    if (key === this.END) {
                        return function () {
                            console.log(options);
                            return proxy = currentOptionName = null;
                        };
                    }

                    return function () {
                        currentOptionName = key;
                        console.log('proxy->', key);
                        // methods
                        return {
                            add(...payloads) {
                                options[currentOptionName].push(payloads);
                                currentOptionName = null;
                                return proxy;
                            },
                        };
                    };
                },
            });
            return proxy;
        }
    }
    const defaultOpts = {
        module: [],
        plugins: [],
    };
    const webpack = new Chain(defaultOpts);
    webpack
        .module()
        .add(123)
        .plugins()
        .add(234)
        .end();
</script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        const proxyLog = function () {
            const proxyLog = {
                proxyNames: {},
            };
            const proxyNames = proxyLog.proxyNames;
            proxyLog.register = function (namespace) {
                proxyNames[namespace] = 1;
                return new Proxy({}, {
                    get(obj, key, proxyObj) {
                        return proxyNames[namespace] ? console[key] : () => { };
                    },
                });;
            };
            proxyLog.cancel = function (namespace) {
                delete proxyNames[namespace];
            };
            return proxyLog;
        }();

    </script>
    <script>
        // 源码内调试
        const vueLog = proxyLog.register('vue');
        const ngLog = proxyLog.register('ng');
        vueLog.log(1);
        ngLog.log(1);
        // 不看源码的调试
        proxyLog.cancel('vue');
        proxyLog.cancel('ng');
        vueLog.log(1);
        ngLog.log(1);
    </script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_39571197/article/details/88684406
今日推荐