当前位置：网站首页>9、 Delegation mode

9、 Delegation mode

2022-06-10 10:09:00 【Qwe7】

Nine 、 Delegate pattern

When multiple objects need to process the same request , These requests can be handled by another object at the same time

1、 Example of delegation mode 

<!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>

    <script>
    
    window.onload = function () { 
        // var aLis = document.getElementsByTagName('li')
        // for( var i = 0; i < aLis.length; i++) {
        //     aLis[i].onclick = function () { 
        //         console.log(i); //  Every time I print 4
        //      }
        // }
        //  There are two ways to solve variable Promotion 
        // ES6 let
        // let aLis = document.getElementsByTagName('li')
        // for(let i = 0; i < aLis.length; i++) {
        //     aLis[i].onclick = function () { 
        //         console.log(i);
        //      }
        // }
        //  Closure 
        // var aLis = document.getElementsByTagName('li')
        // for(var i = 0; i < aLis.length; i++) {
        //     (function (i) { 
        //         aLis[i].onclick = function () { 
        //             console.log(i);
        //          }
        //     })(i)
        // }
        // //  There is a problem with this way 
        // // 1. Every need li Bind different events on , It will cause performance loss and memory occupation 
        // // 2.  Newly added li You also need to rebind events 
        // var oUl = document.querySelector('ul')
        // var oLi = document.createElement('li') 
        // oLi.innerHTML = 'eeeee'
        // oUl.appendChild(oLi)
        // oLi.onclick = function () { 
        //     // xxx
        // }

        var oUl = document.querySelector('ul')
        oUl.onclick = function (e) { 
            var e = e || window.event,
                target = e.target || e.srcElement; // IE Compatible processing of 
            
            if (target.nodeName.toLowerCase() === 'li') {
                console.log(target.innerHTML);
            }   
        }
        var oLi = document.createElement('li') 
        oLi.innerHTML = 'eeeee'
        oUl.appendChild(oLi)
     }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
        <li>dddd</li>

    </ul>
</body>
</html>

Ten 、 Data access object mode

Data access object pattern is mainly used to abstract and encapsulate an object to access and store data sources , This can facilitate the management of data , And avoid duplication between data . Coverage and other problems appear .

1、 Data access object pattern example 

<!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>

    <script>
    
    /*
    {
        nameSpace|key: expire|value
    }    
    */

    var DataVisitor = function (nameSpace, splitSign) { 
        this.nameSpace = nameSpace;
        this.splitSign = splitSign || '|';
    }

    DataVisitor.prototype = {
        status: {
            SUCCESS: 0,
            FAILURE: 1,
            OVERFLOWER: 2, //  out of memory 
            TIMEOUT: 3,
        },
        getKey: function (key) { 
            return this.nameSpace + this.splitSign + key
        },
        set: function (key, value, cbFn, expireTime) { 
            var status = this.status.SUCCESS
            // this.key = this.getKey(key)
            // this.expireTime =  typeof expireTime === 'number' ? expireTime + new Date().getTime() : -1;
            key = this.getKey(key)
            expireTime =  typeof expireTime === 'number' ? expireTime + new Date().getTime() : -1;

            try{
                window.localStorage.setItem(key, expireTime + this.splitSign + value)
            } catch(e) {
                status = this.status.OVERFLOWER
            }

            cbFn && cbFn.call(this, status, key, value)
            return value
        },
        get: function (key, cbFn) { 
            key = this.getKey(key);
            var status = this.status.SUCCESS
            var value = window.localStorage.getItem(key)

            if (value) {
                var index = value.indexOf(this.splitSign),
                    time = value.slice(0, index);
                
                if (time > new Date().getTime() || time == -1) {
                    value = value.slice(index + this.splitSign.length);
                } else {
                    value = null;
                    status = this.status.TIMEOUT;
                    window.localStorage.removeItem(key)
                }
            } else {
                status = this.status.FAILURE
            }
            cbFn && cbFn.call(this, status, key, value)
            return value
        },
        remove: function (key, cbFn) { 
            key = this.getKey(key);
            var status = this.status.SUCCESS

            value = window.localStorage.getItem(key)
            if (value) {
                value = value.slice(value.indexOf(this.splitSign) + this.splitSign.length);
                window.localStorage.removeItem(key)
                var status = this.status.SUCCESS
            } 
            cbFn && cbFn.call(this, status, key, value)
        }
    }
    
    var learnInPro = new DataVisitor('learnInPro')
    learnInPro.set('aaa', '123', function (status, key, value) { 
        console.log(status, key, value);
    })

    learnInPro.get('aaa', function (status, key, value) { 
        console.log(status, key, value);
     })
    learnInPro.remove('aaa', function (status, key, value) { 
        console.log(status, key, value);
     })

     learnInPro.set('bbb', '123', function (status, key, value) { 
        console.log(status, key, value);
    }, 1000 * 2)
    learnInPro.get('bbb', function (status, key, value) { 
        console.log(status, key, value);
    })

    setTimeout(function () { 
        learnInPro.get('bbb', function (status, key, value) { 
            console.log(status, key, value);
        })
     }, 1000 * 3)
    </script>
</head>
<body>
    
</body>
</html>
原网站

版权声明
本文为[Qwe7]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/161/202206100950548466.html

边栏推荐

猜你喜欢

随机推荐