原生js中的代理模式的学习笔记

最新推荐文章于 2024-06-10 17:00:16 发布

风清云淡_A

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量486

点赞数

分类专栏：设计模式 js原生知识案例文章标签：代理模式 javascript 开发语言

本文链接：https://blog.csdn.net/qq_27702739/article/details/121218524

版权

js原生知识案例同时被 2 个专栏收录

91 篇文章 2 订阅

订阅专栏

设计模式

24 篇文章 0 订阅

订阅专栏

这篇博客探讨了JavaScript中的代理模式，通过示例展示了如何使用DOM操作动态创建和添加元素，以及如何优雅地处理事件。文章还提到了事件冒泡和事件委托的概念，演示了如何为动态添加的元素绑定事件，并且讨论了内存管理和避免内存泄露的方法。

摘要由CSDN通过智能技术生成

代理模式比较简单，主要的核心代码记录一下
在这里插入图片描述

 ul {
            margin-bottom: 10px;
            overflow: hidden;
            width: 200px;
        }

        li {
            list-style: none;
            float: left;
            width: 20px;
            height: 20px;
            background: red;
            color: #fff;
            margin: 10px;
            text-align: center;
        }

 <ul id="lists">

    </ul>
    <ul id="lists2">

    </ul>

    <div id="article">
        <p>第一段文字</p>
    </div>
    <button>我是一个按钮</button>

<script>
        var str = ''
        for (var i = 0; i < 40; i++) {
            var oLi = '<li>' + i + '</li>'
            str += oLi
        }
        document.getElementById('lists').innerHTML = str
    </script>
    <script>
        var fragment = document.createDocumentFragment()
        for (var i = 1; i < 21; i++) {
            var oLi = document.createElement('li')
            oLi.innerHTML = i
            fragment.appendChild(oLi)
        }
        document.getElementById('lists2').appendChild(fragment)
    </script>
    <script>
        //添加事件 bad
        /* var oUl = document.getElementById('lists2'),
            li = oUl.getElementsByTagName('li'), len = li.length - 1
        for (var i = 0; i < len; i++) {
            li[i].onclick = function () {
                this.style.backgroundColor = 'gray'
            }
        } */
    </script>
    <script>
        //最佳事件，利用子元素的事件冒泡，触发定义在父元素上的事件
        var oUl = document.getElementById('lists2')
        oUl.onclick = function (e) {
            var e = e || window.event, target = e.target || e.srcElement
            if (target.nodeName.toLowerCase() === 'li') {
                target.style.backgroundColor = 'gray'
            }
        }
    </script>
    <script>
        //为动态添加的子元素添加事件
        var article = document.getElementById('article')

        article.onclick = function (e) {
            var e = e || window.event, target = e.target || e.srcElement
            if (target.nodeName.toLowerCase() === 'p') {
                target.innerHTML = '我要更改这段内容'
            }
        }
        var newP = document.createElement('p')
        newP.innerHTML = "新增的一段文字"
        article.appendChild(newP)
    </script>
    <script>
        //可以避免内存泄露,减少引用事件
        //数据分发
        /*  $.get('./deal?name=message', (res) => { })
         $.get('./deal?name=aside', (res) => { })
         $.get('./deal?name=main', (res) => { })
         $.get('./deal?name=banner', (res) => { }) */
        //请求太多，造成资源浪费

        var post = {
            banner(res) { },
            aside(res) { },
            main(res) { },
            message(res) { },
        }
        /* $.get('./deal.php', (res) => {
            for (var i in res) {
                Deal[i] && Deal[i](res[i])
            }
        }) */
        //委托模式封装一个简易事件
        var delegate = function (context, target, handle, cb) {
            context.addEventListener(handle, function (e) {
                console.log(e, 'ppp')
                var e = e || window.event, target1 = e.target || e.srcElement
                if (target1.nodeName.toLowerCase() === target) {
                    console.log(cb, 'ecb')
                    cb && cb()
                }
            }, false)
        }
        delegate(document.body, 'button', 'click', function () {
            alert("委托成功")
        })
    </script>